React 旧生命周期与新生命周期-一一网

1.旧的生命周期

• 生命周期函数有自己的执行的顺序

1. 初始化阶段：ReactDOM.render()触发–初次渲染

constructor()

componentWillMount()

render()

componentDidMount() ：常用（开启定时器、发送网络请求、订阅消息）

2. 更新阶段：组件内部this.setState()或父组件render触发

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

3. 卸载阶段：ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()：常用（收尾工作，eg：关闭定时器、取消订阅消息）

    class Life extends React.Component{
      // 构造器
      constructor(props){
        console.log('count---constructor')
        super(props)
           // 初始化状态
        this.state = {count:0}
      }
      force=()=>{
        // 点击强制更新页面
        this.forceUpdate()
      }
      death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('example'))
      }
      add =()=>{
        const {count} = this.state
        this.setState({count:count+1})
      }
       // 组件即将挂载
       componentWillMount(){
        console.log('count---componentWillMount')
      }
      // 组件挂载完毕
      componentDidMount(){
        console.log('count---componentDidMount')
      }
      // 组件是否应该被更新 必须返回false 或 true（默认true）
      // setState()
      shouldComponentUpdate(){
        console.log('count---shouldComponentUpdate')
        return false // 页面不更新
        // return true
      }
      // 强制更新 不更改任何状态中数据
      componentWillUpdate(){
        console.log('count---componentWillUpdate')
      }
       // 组件更新完毕
       componentDidUpdate(){
        console.log('count---componentDidUpdate')
      }

      // 组件即将卸载
      componentWillUnmount(){
        console.log('count---componentWillUnmount')
      }
      
      render(){
          console.log('count---render')
          const {count} = this.state
          return(
            <div>
                <h2 > 当前求和为：{count} </h2>
                <button onClick={this.add}>点我+1</button>
                <button onClick={this.death}>点我卸载</button>
                <button onClick={this.force}>强制更新</button>
            </div>
          )
        }
      }
      ReactDOM.render(
        <Life  />,
        document.getElementById('example')
      );
           

复制代码

• 父子组件

        state = {carName:'benz'}
        changeCar=()=>{
          this.setState({carName:'OOOO'})
        }
        render(){
          return(
            <div>
              <div>我是A</div>
              <button onClick={this.changeCar}>换车</button>
            <B carName={this.state.carName}></B>  
            </div>
          )
        }
      }
      class B extends React.Component{
        componentDidMount(){
          console.log('B---componentDidMount')
        }
        conponentWillReceiveProps(props){
          console.log('B---conponentWillReceiveProps',props)
        }
        shouldComponentUpdate(){
          console.log('B---shouldComponentUpdate')
          return true
        }
         // 强制更新 不更改任何状态中数据
        componentWillUpdate(){
        console.log('B---componentWillUpdate')
      }
       // 组件更新完毕
       componentDidUpdate(){
        console.log('B---componentDidUpdate')
      }
      // 组件即将卸载
      componentWillUnmount(){
        console.log('B---componentWillUnmount')
      }

        render(){
          console.log('B---render')
          return(
            <div>我是B，车是:{this.props.carName}</div>
          )
        }
      }
      ReactDOM.render(
        // <Life  />
        <A/>,
        document.getElementById('example')
      );

复制代码