在组件的全部生命周期中,跟着该组件的props或许state发作转变,其DOM表现也会有响应的变化。一个组件就是一个状况机,关于特定地输入,它总返回一致的输出。
一个React组件的生命周期分为三个部份:实例化、存在期和烧毁时。
实例化
当组件在客户端被实例化,第一次被建立时,以下要领顺次被挪用:
- getDefaultProps 设置属性的默许值。 es6对应 deftaultProps
- getInitialState 用来初始化每一个实例的state。 es6 对应 constructor函数中的this.state
- componentWillMount 衬着前
- render 衬着
- componentDidMount 衬着后
当组件在服务端被实例化,初次被建立时,以下要领顺次被挪用:
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
componentDidMount 不会在服务端被衬着的过程当中挪用。
getDefaultProps
关于每一个组件实例来讲,这个要领只会挪用一次,该组件类的一切后续运用,getDefaultPops 将不会再被挪用,其返回的对象能够用于设置默许的 props(properties的缩写) 值。
getInitialState
关于组件的每一个实例来讲,这个要领的挪用有且只要一次,用来初始化每一个实例的 state,在这个要领里,能够接见组件的 props。每一个React组件都有本身的 state,其与 props 的区分在于 state只存在组件的内部,props 在一切实例中同享。
getInitialState 和 getDefaultPops 的挪用是有区分的,getDefaultPops 是关于组件类来讲只挪用一次,后续该类的运用都不会被挪用,而 getInitialState 是关于每一个组件实例来讲都邑挪用,而且只调一次。
每次修正 state,都邑从新衬着组件,实例化后经由过程 state 更新组件,会顺次挪用以下要领:
1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate
然则不要直接修正 this.state,要经由过程 this.setState 要领来修正。
componentWillMount
该要领在初次衬着之前挪用,也是再 render 要领挪用之前修正 state 的末了一次时机。
render
该要领会建立一个假造DOM,用来示意组件的输出。关于一个组件来讲,render要领是唯一一个必需的要领。render要领须要满足下面几点:
- 只能经由过程 this.props 和 this.state 接见数据(不能修正)
- 能够返回 null,false 或许任何React组件
- 只能涌现一个顶级组件,不能返回一组元素
- 不能转变组件的状况
- 不能修正DOM的输出
render要领返回的效果并非真正的DOM元素,而是一个假造的表现,相似于一个DOM tree的构造的对象。react之所以效率高,就是这个缘由。
componentDidMount
该要领不会在服务端被衬着的过程当中挪用。该要领被挪用时,已衬着出实在的 DOM,能够在该要领中经由过程 this.refs 接见到实在的 DOM。
class App extends Component {
static defaultProps = {
name:"默许值"
}
constructor(props) {
super(props);
this.state = {
num : 0
};
this.addNum = this.addNum.bind(this);
}
addNum(e) {
e.preventDefault();
var num = ++this.state.num;
this.setState({
num:num
})
}
componentWillMount() {
this.setState({
num:10
})
}
render() {
return (
<div className="App">
<div className="App-header" ref="header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React{this.props.name}</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button onClick={this.addNum}>{this.state.num}</button>
</div>
);
}
componentDidMount() {
console.log(this.refs.header)
}
}
须要注重的是,因为 this.refs.[refName] 属性猎取的是实在 DOM ,所以必需比及假造 DOM 插进去文档今后,才运用这个属性,不然会报错。
存在期
此时组件已衬着好而且用户能够与它举行交互,比方鼠标点击,手指点按,或许别的的一些事宜,致使运用状况的转变,你将会看到下面的要领顺次被挪用
- componentWillReceiveProps props在父组件转变时实行
- shouldComponentUpdate 假如你肯定组件的 props 或许 state 的转变不须要从新衬着,能够经由过程在这个要领里经由过程返回 false 来阻挠组件的从新衬着,返回 `false 则不会实行 render 以及背面的 componentWillUpdate,componentDidUpdate 要领
- componentWillUpdate 这个要领和 componentWillMount 相似,在组件吸收到了新的 props 或许 state 行将举行从新衬着前,componentWillUpdate(object nextProps, object nextState) 会被挪用,注重不要在此方面里再去更新 props 或许 state。
- render
- componentDidUpdate 这个要领和 <kdb>componentDidMount</kdb> 相似,在组件从新被衬着以后,componentDidUpdate(object prevProps, object prevState) 会被挪用。能够在这里接见并修正 DOM。
烧毁时
componentWillUnmount
每当React运用完一个组件,这个组件必需从 DOM 中卸载后被烧毁,此时 componentWillUnmout 会被实行,完成一切的清算和烧毁事情,在 componentDidMount 中增加的使命都须要再该要领中打消,如建立的定时器或事宜监听器。
当再次装载组件时,以下要领会被顺次挪用:
1、getInitialState
2、componentWillMount
3、render
4、componentDidMount
createClass和ES6的差别
ES6 class
static propTypes
static defaultProps
constructor (this.state)对应createClass
propTypes
getDefaultProps
getInitialState
团体流程
ES6 class
static propTypes props值的范例搜检 static defaultProps 设置属性的默许值
constructor ( this.state ) 初始化每一个实例的statecomponentWillMount 该要领在初次衬着之前挪用,也是再 render 要领挪用之前修正 state 的末了一次时机。
componentDidMount 该要领被挪用时,已衬着出实在的 DOM,能够在该要领中经由过程 this.refs 接见到实在的
DOM。componentWillUnmount 每当React运用完一个组件,这个组件必需从 DOM 中卸载后被烧毁,此时会被实行
componentWillReceiveProps props在父组件转变时实行 shouldComponentUpdate
假如你肯定组件的 props 或许 state 的转变不须要从新衬着,能够经由过程在这个要领里经由过程返回 false 来阻挠组件的从新衬着,返回
`false 则不会实行 render 以及背面的 componentWillUpdate,componentDidUpdate 要领componentWillUpdate 这个要领和 componentWillMount 相似,在组件吸收到了新的 props 或许
state 行将举行从新衬着前, componentDidUpdate 这个要领和
<kdb>componentDidMount</kdb> 相似,在组件从新被衬着以后,会被挪用。能够在这里接见并修正 DOM。 render
衬着组件