最专业的网站建设收费,网站备案有必要吗,成都小企业网站设计,外贸公司英文网站怎么做挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时
react#xff08;v17.0.2#xff09;的生命周期图谱如下。 相较于16版本#xff0c;17版本生命周期函数有如下变化#xff1a;
componentWillMount() componentWillUpdate() compone…挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时
reactv17.0.2的生命周期图谱如下。 相较于16版本17版本生命周期函数有如下变化
componentWillMount() componentWillUpdate() componentWillReceiveProps() getDerivedStateFromProps(props,state) getSnapshotBeforeUpdate(prevProps,prevState) 虽然UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps当前依然可用但在react未来的版本中可能被移除所以尽量避免使用。更多可以访问如下链接 https://react.docschina.org/docs/react-component.html。https://react.docschina.org/blog/2018/03/27/update-on-async-rendering.html。
挂载时
组件挂载时会依次调用如下生命周期函数
constructor(props)static getDerivedStateFromProps(props)render()componentDidMount() 其中getDerivedStateFromProps必须用static修饰它是类上的方法。且必须返回null或者状态对象State Obect。
getDerivedStateFromProps在实际开发中几乎不用仅适用于state唯一取决于props的场景。 更新时
setState触发更新、父组件重新渲染时触发更新
setState、父组件重新渲染触发更新时会依次调用如下生命周期函数
1、static getDerivedStateFromProps() 2、shouldComponentUpdate(nextProps,nextState) 3、render() 4、getSnapshotBeforeUpdate(prevProps,prevState) 5、componentDidUpdate(prevProps,prevState,snapshot) 其中getSnapshotBeforeUpdate(prevProps,prevState)必须返回null或任意快照值(Snapshot Valueundefined除外)。返回的快照值将作为componentDidUpdate的第三个形参。
forceUpdate触发更新
forceUpdate触发更新会依次调用以下生命周期函数
static getDerivedStateFromProps()render()getSnapshotBeforeUpdate()componentDidUpdate() 卸载时
组件卸载时会调用生命周期函数
componentWillUnmount() !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titletest/titlescript srchttps://unpkg.com/react17.0.2/umd/react.development.js/scriptscript srchttps://unpkg.com/react-dom17.0.2/umd/react-dom.development.js/scriptscript srchttps://unpkg.com/babel-standalone6/babel.min.js/script
/headbodydiv idapp/divscript typetext/babelclass Count extends React.Component{constructor(props){console.log(Count---constructor);super(props);this.state {count:0}}componentDidMount(){console.log(Count---componentDidMount);}static getDerivedStateFromProps(){console.log(Count---getDerivedStateFromProps);return null;}shouldComponentUpdate(){console.log(Count---shouldComponentUpdate);return true;}getSnapshotBeforeUpdate(){console.log(Count---getSnapshotBeforeUpdate);return null;}componentDidUpdate(){console.log(Count---componentDidUpdate);}componentWillUnmount(){console.log(Count---componentWillUnmount);}death () {ReactDOM.unmountComponentAtNode(document.getElementById(app));}add () {const {count} this.state;this.setState({count:count1})}force () {this.forceUpdate();}render(){console.log(Count---render);const {count} this.state;const {add,death,force} this;return (divh2当前值为{count}/h2button onClick{add}点我加1/buttonnbsp;button onClick{force}强制更新/buttonnbsp;button onClick{death}卸载组件/button/div)}}ReactDOM.render(Count/,document.getElementById(app));/script
/body/html
