React旧版本生命周期

最新推荐文章于 2024-03-27 16:58:34 发布

请叫我大哥大

最新推荐文章于 2024-03-27 16:58:34 发布

阅读量67

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/m0_37931969/article/details/115857650

版权

react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

React旧版本生命周期

一. 组件挂载的生命周期执行顺序
     *  由ReactDOM.render()触发 ---第一次渲染
     *  1. constructor 构造器
     *  2. componentWillMount 组件将要挂载
     *  3. render
     *  4. componentDidMount 组件挂载完毕 
   
二.组件正常更新的时候生命周期执行顺序
     a）  由setState() 或 父组件 render() 调用
     *  1. shouldComponentUpdate 控制组件更新的"开关"
     *  2. componentWillUpdate 组件将要更新的钩子
     *  3. render
     *  4. componentDidUpdate 组件更新完毕的钩子
     * b）组件强制更新,对组件的状态不做任何更改,不由setDtate调用,由forceUpdate调用
     *  1. componentWillUpdate
     *  2. render
     *  2. componentDidUpdate

三.组件卸载的时候生命周期执行顺序
     *  1. componentWillUnmount 组件销毁
     *      做一些收尾: 关闭定时器 取消订阅

代码（可复制直接运行）

<!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>Document</title>
    
</head>
<body>
    <div id="app"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <script type="text/babel">
        class Life extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    count: 0
                }
                console.log("Demo--- constructor")
            }
            // 更新组件
            handleClick = ()=> {
                this.setState({
                    count: this.state.count + 1
                })
            }
            // 强制更新组件
            force = ()=> {
                this.forceUpdate()
            }
            // 销毁
            destruction = ()=> {
                ReactDOM.unmountComponentAtNode(document.getElementById("app"))
            }
            // 组件将要挂载的钩子
            UNSAFE_componentWillMount(){
                console.log('Demo组件将要挂载--- componentWillMount')
            }
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('Demo组件挂载完毕--- componentDidMount')
            }
            // 控制组件更新的"开关" 必须返回一个Boolean
            shouldComponentUpdate() {
                console.log('Demo控制组件更新的"开关"--- shouldComponentUpdate')
                return true
            }
            // 组件将要更新的钩子
            UNSAFE_componentWillUpdate(){
                console.log('Demo组件将要更新--- componentWillUpdate')
            }
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log('Demo组件更新完毕--- componentDidUpdate')
            }
            // 组件销毁的钩子
            componentWillUnmount(){
                console.log('Demo--- componentWillUnmount')
            }
            render() {
                console.log('Demo--- render')
                return (
                    <div>
                        <div>当前和为{this.state.count}</div>
                        <button onClick={this.handleClick}>点我加1</button>&nbsp;
                        <button onClick={this.force}>强制更新</button><br/>
                        <button onClick={this.destruction}>点我销毁</button>
                    </div>
                )
            }
        }
        
        // 父组件
        class Father extends React.Component {
            state = {
                money: 100
            }
            giveMoney = () => {
                this.setState({
                    money: 1000
                })
            }
            // 组件将要挂载的钩子
            UNSAFE_componentWillMount(){
                console.log('父组件将要挂载--- componentWillMount')
            }
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('父组件挂载完毕--- componentDidMount')
            }
            // 控制组件更新的"开关" 必须返回一个Boolean
            shouldComponentUpdate() {
                console.log('父组件控制组件更新的"开关"--- shouldComponentUpdate')
                return true
            }
            // 组件将要更新的钩子
            UNSAFE_componentWillUpdate(){
                console.log('父组件将要更新--- componentWillUpdate')
            }
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log('父组件更新完毕--- componentDidUpdate')
            }
            render() {
                console.log("父组件----render")
                return (
                    <div>
                        <div>父组件</div>
                        <button onClick={this.giveMoney}>给你1000块</button>
                        <Son money={this.state.money}/> 
                    </div>
                )
            }
        }
        // 子组件
        class Son extends React.Component {
            // 组件将要挂载的钩子
            UNSAFE_componentWillMount(){
                console.log('子组件将要挂载--- componentWillMount')
            }
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('子组件挂载完毕--- componentDidMount')
            }
            // 组件将要接受新的props的钩子函数 第一次时不会调用
            UNSAFE_componentWillReceiveProps(props) {
                console.log(props)
                console.log("子组件-----componentWillReceiveProps")
            }
            // 控制组件更新的"开关" 必须返回一个Boolean
            shouldComponentUpdate() {
                console.log('子组件控制组件更新的"开关"--- shouldComponentUpdate')
                return true
            }
            // 组件将要更新的钩子
            UNSAFE_componentWillUpdate(){
                console.log('子组件组件将要更新--- componentWillUpdate')
            }
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log('子组件组件更新完毕--- componentDidUpdate')
            }
            render() {
                console.log("子组件----render")
                return (
                    <div>
                        子组件 {this.props.money}
                    </div>
                )
            }
        }
        
        ReactDOM.render(
            <Life/>,
            document.getElementById('app')
        );
    </script>
</body>
</html>

请叫我大哥大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React旧版本生命周期

React旧版本生命周期一. 组件挂载的生命周期执行顺序 * 由ReactDOM.render()触发 ---第一次渲染 * 1. constructor 构造器 * 2. componentWillMount 组件将要挂载 * 3. render * 4. componentDidMount 组件挂载完毕二.组件正常更新的时候生命周期执行顺序 a）由setState() 或父组件 render() 调用 *
复制链接

扫一扫