工作中发现在使用React组件时会出现先后顺序的问题,也就是在一个组件的整个生命周期中,通过用户的交互来更新state或者props,重新渲染组件,更新页面的ui。组成一个简单的“状态机”。
react的生命周期三个阶段:
Mounting 挂载
1、 constructor()构造方法
constructor是ES6对类的默认方法,通过 new命令生成对象实例时自动调用该方法。初始化执行一次。使用constructor必须手动调用super方法。需要调用this.props必须传入props。比如
class ClassName extends React.Component {
constructor(props) {
super(props); // 必须调用super方法
console.log(this.props); // 这里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
this.state = { color: props.color }; // !这种操作是错误的,应该避免,任何对state的操作除了初始化都要使用setState方法
this.setState( { color: props.color } ); //应该使用这种方法
this.handleClick = this.handleClick.bind(this); // 将事件处理方法绑定到实例。
}
state = {}; // 也可以直接初始化state
}
2、 componentWillMount => UNSAFE_componentWillMount()(即将被废弃)
首次渲染(render)之前调用,只执行一次。调用setState方法,是渲染之前最后更改state的最后机会。一般来说不会用,但是也是可以用的。哈哈哈
3、render组件渲染
这个方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。state或者props的更新都会引起render的重渲染,会多次执行。
该方法只能返回一个顶级组件,或者返回false/null;在这里也不能修改组件的状态,即不可调用setState方法。
render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。
4、componentDidMount
组件渲染完成后调用该方法,只执行一次。在这里已经渲染出真实的dom节点了,可以再该方法中通过 this.getDOMNode() (新版本已被弃用,推荐使用ReactDOM.findDOMNode)访问到真实的 DOM。
该方法中也可以调用setState来更新状态重新渲染组件,这里也是设置定时器监听事件的好地方。
Updating 更新
1、componentWillReceiveProps(nextProps) => UNSAFE_componentWillReceiveProps(nextProps)(即将被废弃)
组件props发生改变会调用该方法(或者说只要父组件更新,不管props是否与以前相同,都会调用该方法), 接收一个参数nextProps,所以在这里可以继续拿到this.props的值。在这个方法中更新state是安全的,一般情况下为了避免任何props的改变多次触发state更新,
可以通过nextProps和this.props的比较后再做相关操作。
2、static getDerivedStateFromProps(props, state)(新)
3、 shouldComponentUpdate(nextProps, nextState)
通过返回true或者false来判断是否需要重新渲染组件。如果返回false,后面的ender 以及 componentWillUpdate,componentDidUpdate 方法都将不会执行。组件比较多时,使用该方法能够避免不需要的重渲染,优化性能。
class ClassName extends React.Component {
constructor(props) {
super(props); // 必须调用super方法
console.log(this.props); // 这里可以拿到this.props的值
this.state = {}; // 在constructor中可以初始化state
}
componentDidMount() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 返回<div>渲染</div>
}
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id; // 只有在id改变时才会重新渲染组件
}
render() {
console.log(ReactDOM.findDOMNode(this.refs.title)) // 这里首次渲染拿不到值,返回null
return <div id="renderId" ref="title">渲染</div>
}
}
Unmounting 卸载
componentWillUnmount
该方法将会在 component 从DOM中移除时调用。一些组件相关的清理工作都可以在这里处理。
目前就接触到这些
来源:https://blog.csdn.net/qq_42324718/article/details/100882276