1.什么是组件
React是专注于View层的，组件也是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。React组件可以看成构造出一个虚拟DOM结构的对象。
2.React创建组件的方式
在React中创建组件有三种方式：
有状态组件(ES6写法)：React.Component
有状态组件(ES5写法)：React.createClass（注：此方法旧版本react可用，现已不可用）
无状态组件的函数写法（函数组件）。
3.有状态？无状态？
无状态组件，它是一种只负责展示的纯组件。这种组件只负责根据传入的props来展示，不涉及到要state状态、生命周期等操作。
有状态组件，需要涉及state、生命周期等操作。
React鼓励在大型项目中尽可能以无状态组件的写法 来分割原本庞大的组件。
2.React创建组件的方式
在React中创建组件有三种方式：
有状态组件(ES6写法)：React.Component
有状态组件(ES5写法)：React.createClass（注：此方法旧版本react可用，现已不可用）
无状态组件的函数写法（函数组件）。
3.有状态？无状态？
无状态组件，它是一种只负责展示的纯组件。这种组件只负责根据传入的props来展示，不涉及到要state状态、生命周期等操作。
有状态组件，需要涉及state、生命周期等操作。
React鼓励在大型项目中尽可能以无状态组件的写法 来分割原本庞大的组件。
组件的构想
（一）构想1：函数组件
把一堆标签用函数包起来，然后 return 出去，这个函数名就代表了这一堆标签。
定义一个函数
function App() {
return <div className="App">hi</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));
注意：<App /> 等价于 <App></App> 等价于 React.createElement(App)。表示的就是函数App里返回的内容。
那么，给函数传参该怎么做？
（二）构想2
标签就是函数，函数就是对象，标签的属性就是函数的参数。
传参示例
// 使用{props.name}获取传过来的参数
function Box1(props) {
return <div>{props.name}</div>;
}
function App() {
return (
<div className="App">
<Box1 name="jack" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
但在 React 世界里，函数无法做到修改别人传的参数。
希望既能满足函数的功能，又能局部 render。
于是 class 组件诞生了。
（三）构想三：class 组件
最简单的例子：
class App extends React.Component {
render() {
return (
<div>
app {this.props.name} {this.props.age}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App name="jack" age={18} />, rootElement);
组件如何拥有自己的局部变量？
规定：在 class App 里使用 constructor
constructor(props) {
super();
//局部变量初始化
this.state = {
name: props.name
};
}
如何修改参数 / 局部变量？
依然是在 class App 里
class App extends React.Component {
constructor(props) {
super();
//局部变量初始化
this.state = {
number: 0,
name: props.name,
age: props.age
};
}
//对参数或局部变量的修改只能用 setState
setName() {
this.setState({
name: "rose"
});
}
render() {
return (
<div>
app {this.state.name} {this.state.age}
<button onClick={this.setName.bind(this)}>点我修改名字</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App name="jack" age={18} />, rootElement);
新手注意事项：
onClick 后的函数名不能加上 ()
加上()的话，就是将函数的返回值结果传给onClick ，但onClick 要的是函数。
组件名首字母必须大写
关于 this
React 调用onClick 时，是：onClick.call(undefined, 其他函数)
即 React 强制把 this 变为 undefined
该怎么办？
① bind
onClick={this.setName.bind(this)}
② 箭头函数 () => { }
onClick={()=> this.setName()}
对参数或局部变量的修改只能用 setState
不能直接修改，如 this.state.number += 1 (不能这样用)
如果感觉有帮助留下一个宝贵的赞或者给小编一个赞赏！！
同时如果想了解更多内容可以关注下方公众号：
