组件(Component)由若干个React元素组成,包含属性、状态和生命周期等部分,满足独立、可复用、高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用程序的最小单元正是组件。
一、构建
目前推崇的构建组件的方式总共有两种:类和函数,而用React.createClass()构建组件的方式已经过时,本节也不会对其做讲解。
1)类组件
通过ES6新增的类构建而成的组件必须继承自React.Component,并且需要定义render()方法。此方法用于组件的输出,即组件的渲染内容,如下代码所示。注意,render()是一个纯函数,不会改变组件的状态,并且其返回值有多种,包括React元素、布尔值、数组等。
class Btn extends React.Component {
render() {
return <button>提交</button>;
}
}
2)函数组件
使用函数构建的组件只关注用户界面的展示,既无状态,也无生命周期。其功能相当于类组件的render()方法,但能接收一个属性对象(props),下面是一个简单的函数组件。
function Btn(props) {
return <button>{
props.text}</button>;
}
与类组件不同,函数组件在调用时不会创建新实例。
二、state(组件状态)
组件中的state用于记录其内部状态,这类有状态组件会随着state的变化修改其最终的呈现。
1)初始化
在组件的构造函数constructor()中可以像下面这样,通过this.state初始化组件的内部状态,其中this.state必须是一个对象。
class Btn extends React.Component {
constructor() {
super();
this.state = {
text: "提交"
};
}
render() {
return <button>{
this.state.text}</button>;
}
}
注意,在初始化之前要先调用super(),因为ES6对两个类的this的初始化顺序做了规定,先父类,再子类,所以super()方法要在使用this之前调用。
如果要读取this.state中的数据,那么可以像上面的代码那样通过成员访问运算符得到。但如果要更新this.state中的数据,那么就得用setState()方法,而不是用运算符。
2)setState()
此方法能接收2个参数,第一个是函数或对象,第二个是可选的回调函数,会在更新之后触发。下面用示例讲解第一个参数的两种情况(省略了构造函数以及初始化的代码),当它是函数时,能接收2个参数,第一个是当前的state,第二个是组件的props(将在下一节讲解