持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

区别

Reac 16之后有三个生命周期被废弃

componentWillMount
componentWillReceiveProps
componentWillUpdate 相当于带有Will的生命周期函数将被废弃

之前的例子使用的版本都是16.8.4的

今天直接上手官网指定的最新的版本18.1.0版本

总体说区别不大，新的声明周期相对比旧的声明周期来讲只是做了微调。
回顾一下旧的生命周期时写的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            constructor(props){
                console.log('Count  construtor，组件初始化构造函数')
                super(props)
                this.state = {count:0}
            }

            add=()=>{ //加1按钮的回调
                const {count} = this.state
                this.setState({count:count+1})
            }

            remove=()=>{ //卸载组件按钮的回调
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            } 

            force = ()=>{  //强制更新的按钮的回调
                this.forceUpdate()
            }
            //组件将要挂载的钩子函数
            componentWillMount() { 
                console.log('count componentWillUpdate，组件将要挂载的钩子函数')
            }

             //组件挂载完毕的钩子函数
            componentDidMount() { 
                console.log('count   componentDidMount，组件挂载完毕的钩子函数')
            }
            //组件将要卸载的钩子函数
            componentWillUnmount() {  
                console.log('count   componentDidMount，组件将要卸载的钩子函数')
            }

            // 控制组件更新的开关的钩子函数
            shouldComponentUpdate() { 
                console.log('count shouldComponentUpdate，控制组件更新的开关的钩子函数')
                return true //必须return true 不然不会执行下面更新操作
            }
            // 组件将要更新钩子函数
            componentWillUpdate() { 
                console.log('count componentWillUpdate，组件将要更新钩子函数')
            }

            //组件更新完毕的钩子函数
            componentDidUpdate() {  //组件更新完毕
                console.log('count   componentDidMount，组件更新完毕的钩子函数')
            }

            render() {
                console.log('count   render 组件渲染DOM')
                const {count} = this.state
                return (
                    <div>
                        <div>当前的数字为：{count}</div>
                        <button onClick={this.add}>点下+1</button>
                        <button onClick={this.remove}>卸载组件按钮的回调</button>
                        <button onClick={this.force}>强制更新</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
</body>

</html>

上面代码用到了几乎所有的钩子函数，效果：

上面的代码使用了3个带will的生命周期的钩子函数：componentWillMount，componentWillUnmount，componentWillUpdate，我们看下使用新版本的17.0.1的js库看看会报什么错误：

然后我用目前最新的18.1.0的库直接报错：

在v18的版本中直接废弃了render方法，使用下列方法渲染render:

ReactDOM.createRoot( document.getElementById('root') ).render( <h1>Hello, React {React.version}!</h1>, );

今天不学习v18的特性，现在主流使用的都是V16，V17。假如使用V17如何解决这个警告呢：在钩子函数加上UNSAFE_关键字：

这样浏览器控制台就不会警告呢？React为什么要取消掉这三个钩子函数呢，我们看下这个警告里面博客地址：

异步渲染之更新

文档指出17.0是可以使用的。文档意思过时的组件的声明周期会导致被误解和滥用，用得也比较少。为以后的异步渲染铺路

删除的生命周期函数

componentWillMount：组件将要挂载的钩子函数
componentWillUnmount：组件将要卸载的钩子函数
componentWillUpdate：组件将要更新钩子函数

新增的生命周期钩子函数：

`getDerivedStateFromProps`

这个函数组件实例化之后以及重新渲染之前调用。它可以返回一个对象来更新 state，或者返回 null 来表示新的 props 不需要任何 state 的更新。

`getSnapshotBeforeUpdate`

这个钩子函数在更新之前（如：更新 DOM 之前）被调用

特别注意

getDerivedStateFromProps 这个钩子函数在组件初始化挂载和组件后期更新都会调用，主要目的是让组件在 props 变化时更新 state，该方法返回一个对象来更新 state，如果返回 null 则不更新任何内容

componentWillMount 这个钩子函数只在初始化挂载时调用

getSnapshotBeforeUpdate 相当于旧版本中render和componentDidUpdate这两个钩子函数中间加了一个钩子函数，需要与 componentDidUpdate() 方法一起使用，否则会出现错误。主要是更新之前做一些数据操作。

总结

有点复杂，难以记忆，这两个钩子很少会被用到。不打算写过多代码测试这些新增的钩子函数，等用到了再仔细研究,总结一下新的生命周期三种阶段的钩子函数执行属性：

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

1.constructor() （初始化）
2.getDerivedStateFromProps() （新增，渲染 DOM 元素之前，组件在 props 变化时更新 state）
3.render() （DOM渲染，必须的）
4.componentDidMount() （组件已挂载完毕，常用）

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

1.getDerivedStateFromProps()（新增，渲染 DOM 元素之前，组件在 props 变化时更新 state）
2.shouldComponentUpdate() （组件更新开关）
3.render() （DOM 更新渲染，必须的）
4.getSnapshotBeforeUpdate()（新增，数据操作）
5 .componentDidUpdate() （组件更新完毕）

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

1.componentWillUnmount() （组件将要卸载，常用）

重要的3个钩子

1.render：初始化渲染或更新渲染DOM使用，也是必须的 2.componentDidMount：开启页面监听，例如：发起请求或者操作页面动作 3.componentWillUnmount：页面卸载收尾操作，例如：清除定时器

React 学习笔记（15）新版本组件生命周期

区别