React旧生命周期---主要知识点

最新推荐文章于 2023-06-14 15:56:18 发布

前端-rabbit

最新推荐文章于 2023-06-14 15:56:18 发布

阅读量748

点赞数 1

分类专栏： react 前端面试文章标签： reactjs react.js 前端框架

本文链接：https://blog.csdn.net/weixin_48037671/article/details/123833965

版权

前端面试同时被 2 个专栏收录

26 篇文章 3 订阅

订阅专栏

react

6 篇文章 0 订阅

订阅专栏

React旧生命周期

画蓝色对号的是在react新生命周期中将要摒弃的；

componentWillMount()
componentWillReceiveProps()
componentWillUpdate()

画红色框的是react生命周期中常用到的周期，也是以后工作后会常用到的生命周期；

1.componentDidMount() 组件加载完成

2.componentDidUpdate() 组件更新完成

3.componentWillUnmount() 组件将要卸载

会在下面逐一演示react中的4段路线

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

1. constructor()

2. componentWillMount()

3. render()

4. componentDidMount() =====> 常用

一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息


<body>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="test"> </div>
    <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                console.log("constructor");
                super(props)
                this.state = { count: 0 }
            }
            add = () => {
                this.setState({
                    count: this.state.count + 1
                })
            }
            // unmountComponentAtNode:卸载组件节点
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force=()=>{
                this.forceUpdate();
            }
            //componentWillMount:组件将要挂载时触发的函数  componentWillMount组件将要摒弃，在前加UNSAFE_不会报警告
            UNSAFE_componentWillMount(){
                console.log("ComponentWillMount-组件将要挂载时触发的函数");
            }
            //componentDidMount：组件挂载完成时触发的函数
            componentDidMount(){
                console.log("ComponentDidMount-组件挂载完成时触发的函数");
            }
            //shouldComponentUpdate：是否要更新数据时触发的函数
            shouldComponentUpdate(){
                console.log("shouldComponentUpdate-是否要更新数据时触发的函数");
                return null
            }
            //componentWillUpdate:将要更新数据时触发的函数
            UNSAFE_componentWillUpdate(){
                console.log("componentWillUpdate-将要更新数据时触发的函数");
            }
            //componentDidUpdate:数据更新完成时触发的函数
            componentDidUpdate(){
                console.log("componentDidUpdate-数据更新完成时触发的函数");
            }

            render() {
                console.log("render-页面渲染");
                return (
                    <div>
                        <h2>Count:{this.state.count}</h2>
                        <button onClick={this.add}>add</button>
                        <button onClick={this.death}>death</button>
                        <button onClick={this.force}>force</button>
                    </div>
                )
            }
        }

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

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

1. shouldComponentUpdate()

2. componentWillUpdate()

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

4. componentDidUpdate()

1.点击add按钮使数据加1，触发 shouldComponentUpdate()但Count未显示1

走的是3线，但未走完，因为 shouldComponentUpdate()未设置强制刷新

2.点击force按键，触发页面强制更新

走的是3、4路线

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

1. componentWillUnmount() =====> 常用

一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

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

1. constructor()

2. componentWillMount()

3. render()

4. componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事，

例如：开启定时器、发送网络请求、订阅消息

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

1. shouldComponentUpdate()

2. componentWillUpdate()

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

4. componentDidUpdate()

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

1. componentWillUnmount() =====> 常用