一、基于class关键字创建组件
最基本的组件结构：
// 如果要使用class定义组件，必须让自己的组件，继承自React.Component
class Movie extends React.Component{
// 在组件内部，必须有render函数。作用：渲染当前组件对应的虚拟DOM结构
render(){
// render函数中，必须返回合法的JSX虚拟DOM结构
return <div>这是class创建的Movie组件</div>;
}
}
以上代码演示了如何通过class创建一个最基本的组件。
二、为class创建的组件传递props参数并直接使用this.props来访问
React07.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React07</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="components/React07.jsx"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const user = {
name: "David",
age: 24,
gender: "男"
};
ReactDOM.render(
<Person name={user.name} age={user.age}/>,
document.querySelector("#app")
);
</script>
</body>
</html>
React07.jsx代码：
class Person extends React.Component{
render(){
{/*注意：在class组件内部，this表示当前组件的实例对象*/}
return <div>{this.props.name} --- {this.props.age}</div>;
}
}
运行结果：
由此可见，在class关键字创建的组件中，如果想使用外界传递过来的props参数，不需接收，直接通过this.props.***访问即可。
三、介绍class创建的组件中this.state
以下代码演示了为class创建的组件添加this.state：
// React07.jsx中的代码
class Person extends React.Component{
// 构造器
constructor(){
// 由于Person组件继承了React.Component这个父类，所以自定义的构造器中必须调用super()
super();
// 只有调用了super()以后，才能使用this关键字
this.state = {
msg: "Hello, I am state"
}
}
render(){
// 在class创建的组件中，this.state上的数据，都是可读可写的
this.state.msg = "I'm changed";
return <div>
{this.props.name} --- {this.props.age}
<h3>{this.state.msg}</h3>
</div>;
}
}
运行结果：
四、介绍有状态组件和无状态组件的区别
- 用构造函数创建出来的组件叫做“无状态组件”【无状态组件今后用的不多】。
- 用class关键字创建出来的组件叫做“有状态组件”【今后用的最多】。
- 使用function创建的组件，只有props，没有自己的私有数据和生命周期函数；使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数。
- 有状态组件和无状态组件之间的本质区别就是：有无state属性和有无生命周期函数。
- 如果一个组件需要有自己的私有数据，则推荐使用class创建的有状态组件；如果一个组件不需要有私有的数据，则可以使用无状态组件。React官方说：无状态组件由于没有自己的state和生命周期函数，所以运行效率会比有状态组件稍微高一些。
五、组件中的props和state之间的区别
- 数据来源上：props中的数据都是外界传递过来的；state中的数据都是组件私有的（通过Ajax获取回来的数据，一般都是私有数据）。
- 可读可写性：props中的数据都是只读的，不能重新赋值；state中的数据都是可读可写的。
