React基础学习--新旧生命周期对比（二）

生命周期新旧对比

1. 图示

2. 旧版生命周期代码

<script type="text/babel">
    // 创建组件
    class Count extends React.Component {
        // --------------------下面的是正常流程的生命周期-------------------------
        // 构造器
        constructor(props) {
            console.log("Count---constructor")
            super(props)
            // 初始化状态
            this.state = {count: 0}
        }

        // 加1时的按钮回调函数
        add = () => {
            // 获取状态
            let {count} = this.state
            // 更新状态
            this.setState({count: count + 1})
        }

        // 卸载组件按钮回调函数
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('box'))
        }

        // 强制更新按钮的回调
        // 不更改任何状态中的数据，强制更新页面
        force = () => {
            this.forceUpdate()
        }

        // 组件将要挂载
        componentWillMount() {
            console.log('Count---componentWillMount')
        }

        // 组件挂载完毕
        componentDidMount() {
            console.log('Count---componentDidMount')
        }

        // 组件将要卸载
        componentWillUnmount() {
            console.log('Count---componentWillUnmount')
        }

        // --------------------下面的是正常更新(setState)流程的生命周期-------------------------

        // 控制组件更新的“阀门”:必须要有Boolean类型的返回值，true为继续执行后续方法和生命周期（包括render），false为阻止后续方法和生命周期执行
        shouldComponentUpdate() {
            console.log('Count---shouldComponentUpdate')
            return true 
        }

        // 组件将要更新
        componentWillUpdate() {
            console.log('Count---componentWillUpdate')
        }

        // 组件更新完毕
        componentDidUpdate() {
            console.log('Count---componentDidUpdate')
        }

        render() {
            console.log("Count---render")
            return (
                <div>
                    <h2>当前求和为：{this.state.count}</h2>    
                    <button onClick={this.add}>点击+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>强制更新</button>
                </div>
            )
        }
    }
    
    // 父组件A
    class A extends React.Component {
        state = {carName: '奔驰'}

        changeCar = () => {
            this.setState({carName: '宝马'})
        }

        render() {
            return (
                <div>
                    <h2>我是父组件</h2>    
                    <button onClick={this.changeCar}>换车</button>
                    <hr />
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }

    // 子组件B
    class B extends React.Component {
        // 组件卸载回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('box'))
        }

        // 组件将要接收新的props的钩子
        // 此处有【坑】：第一次接收到的数据不会调用此方法，之后接收的数据才会调用此方法
        componentWillReceiveProps() {
            console.log('B---componentWillReceiveProps')
        }

        // 控制组件更新的“阀门”
        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>
                    <h2>我是子组件</h2>    
                    <h3>汽车名字：{this.props.carName}</h3>
                    <button onClick={this.death}>卸载组件</button>
                </div>
            )
        }
    }

    // 渲染组件
    // ReactDOM.render(<Count/>, document.getElementById('box'))
    ReactDOM.render(<A/>, document.getElementById('box'))
 </script>

总结：

1. 初始化阶段：由ReactDOM.render()触发---初次触发
        1）constructor()
        2) componentWillMount()
        3) render()
        4) componentDidMount() ===> 常用
                一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段：由组件内部this.setState()或父组件render()触发
        1) shouldComponentUpdate()
        2) componentWillUpdate()
        3) render()
        4) componentDidUpdate()

3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
        1） componentWillUnmount() ===> 常用
                一般在这个钩子中做一下收尾的事，例如：关闭定时器、取消订阅消息

3. 新版生命周期代码

<script type="text/babel">
  // 创建组件
   class Count extends React.Component {
       // --------------------下面的是正常流程的生命周期-------------------------
       // 构造器
       constructor(props) {
           console.log("Count---constructor")
           super(props)
           // 初始化状态
           this.state = {count: 0}
       }

       // 加1时的按钮回调函数
       add = () => {
           // 获取状态
           let {count} = this.state
           // 更新状态
           this.setState({count: count + 1})
       }

       // 卸载组件按钮回调函数
       death = () => {
           ReactDOM.unmountComponentAtNode(document.getElementById('box'))
       }

       // 强制更新按钮的回调
       // 不更改任何状态中的数据，强制更新页面
       force = () => {
           this.forceUpdate()
       }

       // 从props中获取派生状态（state）：state的值任何时候都取决于props
       // 必须要使用static；必须返回一个null或者是state对象
       static getDerivedStateFromProps(props, state) {
           console.log('getDerivedStateFromProps',props, state)
           // return {count: 10}
           return null // 为了继续向下演示
       }

       // 在更新之前获取快照
       getSnapshotBeforeUpdate() {
           console.log('getSnapshotBeforeUpdate')
           return 1 // 返回任意值
       }

       // 组件挂载完毕
       componentDidMount() {
           console.log('Count---componentDidMount')
       }

       // 组件将要卸载
       componentWillUnmount() {
           console.log('Count---componentWillUnmount')
       }

       // --------------------下面的是正常更新(setState)流程的生命周期-------------------------

       // 控制组件更新的“阀门”:必须要有Boolean类型的返回值，true为继续执行后续方法和生命周期（包括render），false为阻止后续方法和生命周期执行
       shouldComponentUpdate() {
           console.log('Count---shouldComponentUpdate')
           return true 
       }

       // 组件更新完毕
       componentDidUpdate(preProps, preState, snapshotValue) {
           console.log('Count---componentDidUpdate', preProps, preState, snapshotValue)
       }

       render() {
           console.log("Count---render")
           return (
               <div>
                   <h2>当前求和为：{this.state.count}</h2>    
                   <button onClick={this.add}>点击+1</button>
                   <button onClick={this.death}>卸载组件</button>
                   <button onClick={this.force}>强制更新</button>
               </div>
           )
       }
   }

   // 渲染组件
   ReactDOM.render(<Count count={20}/>, document.getElementById('box'))
</script>

总结：

1. 初始化阶段：由ReactDOM.render()触发----初次渲染
     1)  constructor()
     2)  getDerivedStateFromProps
     3)  render()
     4)  componentDidMount()

 2. 更新阶段：由组件内部this.setState或者父组件重新render触发
     1)  getDerivedStateFromProps
     2)  shouldComponentUpdate()
     3)  render()
     4)  getSnapshotBeforeUpdate
     5)  componentDidUpdate()

 3. 卸载组件：由ReactDOM.unmountComponentAtNode触发
     1)  componentWillUnmount

4. 新版生命周期函数中getSnapshotBeforeUpdate的使用场景

<script type="text/babel">
   // 创建组件
    class News extends React.Component {

        state = {newsArr: []}

        componentDidMount() {
            setInterval(() => {
                // 获取状态
                const {newsArr} = this.state
                // 模拟一条新闻
                const news = "新闻" + (newsArr.length + 1)
                // 更新状态
                this.setState({newsArr: [news, ...newsArr]})
            }, 1000)
        }

        getSnapshotBeforeUpdate() {
            return this.refs.list.scrollHeight
        }

        componentDidUpdate(preProps, preState, height) {
            this.refs.list.scrollTop += this.refs.list.scrollHeight - height
        }

        render() {
            return (
                <div className="list" ref="list">
                    {
                        this.state.newsArr.map((n, index) => {
                            return <div className="item" key={index}>{n}</div>
                        })
                    }
                </div>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<News/>,document.getElementById('box'))
</script>