45. B站 对比新旧生命周期 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

<!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>hello_react</title>
    <!-- 引入react,为了使用 React对象  -->
    <script src="js/17.0.1/react.development.js"></script>
    <!-- 引入 react-dom, 为了使用 ReactDOM 对象 -->
    <script src="js/17.0.1/react-dom.development.js"></script>
    <!-- 引入 babel， 为了 解析 JSX -->
    <script src="js/17.0.1/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>

    <!-- 1. 对比新旧生命周期
        使用新版本的17.0.1 react/react-dom/babel -->
    <script type="text/babel">
        // 创建组件
        class Count extends React.Component {

            constructor(props) {
                console.log('Count---constructor')
                super(props)
                this.state = {count: 0}
            }

            add = () => {
                let {count} = this.state
                this.setState({count: count+1})
            }

            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }

            force = () => {
                this.forceUpdate()
            }

            // 在新版本中，需要加 UNSAFE_
            UNSAFE_componentWillMount() {
                console.log('Count---componentWillMount')
            }

            componentDidMount() {
                console.log('Count---componentDidMount')
            }

            componentWillUnmount() {
                console.log('Count---componentWillUnmount')
            }

            shouldComponentUpdate() {
                console.log('Count---shouldComponentUpdate')
                return true
            }

            // 在新版本中，需要加 UNSAFE_
            UNSAFE_componentWillUpdate() {
                console.log('Count---componentWillUpdate')
            }

            componentDidUpdate() {
                console.log('Count---componentDidUpdate')
            }

            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(<Count/>,document.getElementById('test'))
    </script>

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

            state = {
                carName: '奔驰'
            }

            changeCar = () => {
                this.setState({carName: '奥托'})
            }

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

        class B extends React.Component {

            // 在新版本中，需要加 UNSAFE_ 
            UNSAFE_componentWillReceiveProps(props) {
                console.log('B---componentWillReceiveProps', props)
            }

            render() {
                console.log('B---render')
                return (
                <div>
                    我是B 组件，接收到的车是：{this.props.carName}
                </div>
                )
            }
        }

        // 挂载组件
        ReactDOM.render(<A/>,document.getElementById('test'))
    </script> -->

    <!-- 在新版本中，能不能使用旧的生命周期钩子？
        ----能。但是控制台会有警告。

        在新版本中，哪三个钩子需要加 UNSAFE_？
            1. componentWillMount
            2. componentWillUpdate
            3. componentWillReceiveProps

        记住三个Will。除了componentWillUnmount    
    -->

    <!-- 新旧生命周期有什么区别？
        新的废弃了三个：
            1. componentWillMount
            2. componentWillUpdate
            3. componentWillReceiveProps
        增加了两个：
            1. getDerivedStateFromProps
            2. getSnapshotBeforeUpdate    
            
    -->


   <!-- 新生命周期
       生命周期分为三个阶段：
        1. 初始化阶段---由ReactDOM.render触发--初次渲染
            constructor---getDerivedStateFromProps----render----componentDidMount
        2. 更新阶段----由组件内部this.setState() 或者 父组件render 触发
            getDerivedStateFromProps---shouldComponentUpdate ---render ----getSnapshotBeforeUpdate---componentDidUpdate 
        3. 卸载组件--由ReactDOM.unmountComponentAtNode() 触发
            componentWillUnmount
            
    -->
    
    <!--旧的
      生命周期分为三个阶段：
        1. 初始化阶段---由ReactDOM.render触发--初次渲染
            constructor---componentWillMount----render----componentDidMount
        2. 更新阶段----由组件内部this.setState() 或者 父组件render 触发
            shouldComponentUpdate --- componentWillUpdate---render---componentDidUpdate 
            强制更新 forceUpdate 没有阀门。
        3. 卸载组件--由ReactDOM.unmountComponentAtNode() 触发
            componentWillUnmount
   -->
   
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️