react生命周期(旧)

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

                  1.  constructor()

                  2.  componentWillMount()

                  3.  render()

                  4.  componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

对应于下面红色框的路线

 

 2. 更新阶段: 由组件内部this.setSate()或父组件render触发

                  1.  shouldComponentUpdate()----这个函数会返回true或者false代表能不能更新

                  2.  componentWillUpdate()

                  3.  render() =====> 必须使用的一个

                  4.  componentDidUpdate()

 相当于走的下面红色箭头的这条线

 3.更新阶段：由强制更新触发

有时候没有改变状态，需要强制让组件更新

                  1.  componentWillUpdate()

                  2.  render() =====> 必须使用的一个

                  3.  componentDidUpdate()

 走的是下面红色箭头的路

如果把shouldComponentUpdate()返回false会阻止setState更新但是不能阻止强制更新

4.卸载组件: 由ReactDOM.unmountComponentAtNode()触发

                1.  componentWillUnmount()  =====> 常用在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

如果想卸载项目，

得调ReactDOM.unmountComponentAtNode(document.getElementById('test'))方法，传入要卸载dom的节点，比如下面的例子卸载的是id为test节点上的dom

5.父子组件更新：父组件传props给子组件，父组件更新props

                  1.componentWillReceiveProps（）------组件将要接收新的props的钩子

                  2.  shouldComponentUpdate()----这个函数会返回true或者false代表能不能更新

                  3.  componentWillUpdate()

                  4.  render() =====> 必须使用的一个

                  5.  componentDidUpdate()

相当于走的下面红色框的路线

参考链接： 尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili