一、基于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中的数据都是可读可写的。