React入门0x008: 生命周期

loonggg 发布于2019-08-23 11:31 / 2976人阅读

0x000 概述

上一章说明了生命周期的概念，本质上就是框架在操作组件的过程中暴露出来的一系列钩子，我们可以选择我们需要的钩子，完成我们自己的业务，以下讲的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同

0x001 组件挂载

以下是组件挂载的过程中触发的声明周期：

class App extends React.Component {
    constructor(props) {
        super(props)
        console.log("constructor", props)

    }

    componentWillMount() {
        console.log("componentWillMount")
    }

    componentDidMount() {
        console.log("componentDidMount")
    }

    render() {
        console.log("render")
        return {Date()}
    }

    componentDidMount() {
        console.log("componentDidMount")
    }
}

0x002 组件更新

以下是组件更新的时候触发的生命周期：

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            date: Date()
        }
        setTimeout(() => {
            this.setState({date: Date()})
        }, 3000)
    }

    componentWillReceiveProps() {
        console.log("componentWillReceiveProps")
    }

    shouldComponentUpdate() {
        console.log("shouldComponentUpdate")
        return true

    }

    render() {
        console.log("render")
        return {this.state.date}
    }

    componentWillUpdate() {
        console.log("componentWillUpdate")

    }

    componentDidUpdate() {
        console.log("componentDidUpdate")

    }

}

第一次的render是由组件挂载引起的，而其他的方法则是由setState引起的

0x003 组件卸载

以下是由组件卸载的时候触发的生命周期：

class Content extends React.Component {
    render(){
        console.log("Content::render")
        return content
    }
    componentWillUnmount() {
        console.log("Content::componentWillUnmount")
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            show: true
        }
        setTimeout(() => {
            this.setState({show: false})
        }, 3000)
    }

    render() {
        console.log("App::render")

        return (
            this.state.show
                ? 
                : null
        )
    }



}

0x004 完整生命周期

挂载：
constructor
componentWillMount
render
componentDidMount
更新：
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸载：
componentWillUnmount
错误处理（这里不说）：
componentDidCatch

0x005 声明周期使用场景

constructor(props)：

该方法主要用来初始化state，或者初始化一些资源，可以访问prop，但是访问不了 setState，会报错：Warning: Can"t call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the App component.

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            show: true
        }
    }

    render() {
        return (
            this.state.show
                ? 
                : null
        )
    }

}

componentWillMount()

没啥卵用，可以在这个方法中调用setState()，并且设置的state可以在本次渲染生效，推荐使用constructor

render（）

你懂的，每次更新状态都会触发，但是不要在这里调用会触发组件更新的函数，比如setState()，否则可能陷入无尽阿鼻地狱。

componentDidMount()

这个方法常用，触发这个生命周期，意味着dom和子组件都挂载好了，refs也可以用了，一般在这儿做网络请求。

componentWillReceiveProps(nextProps)

这个组件也常用，一般用于父组件状态更新，导致传递给子组件的props更新，当时子组件又不是直接绑定父组件的props的时候使用，比如

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: props.content
        }
    }

    render() {
        return this.state.content
    }
}

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            content: "1"
        }
        setTimeout(() => {
            this.setState({
                content: 10
            })
        }, 1000)
    }

    render() {
        return (
            
        )
    }

}

我们接受父组件的state.content作为子组件的初始化state.content，但是1s 之后，父组件发生了变化，state.content从1变成了10，我们期望子组件也同时更新，可惜子组件的constructor只会执行一次，为了解决这个问题，我们可以添加这个生命周期：

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: props.content
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            content:nextProps.content
        })
    }

    render() {
        return this.state.content
    }
}

这样就可已在父组件props更新的时候，触发子组件的更新

shouldComponentUpdate(nextProps, nextState)

这个组件也很常用，用来判断是否要进行某次更新，如果返回true则执行更新，如果返回false则不更新，常用与性能优化

class A extends React.Component {
    render() {
        console.log("A::render")
        return "A"
    }
}

class B extends React.Component {
    render() {
        console.log("B::render")
        return "A"
    }
}

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 1
        }
        setTimeout(() => {
            this.setState({
                num: 10,
                name: 1
            })
        })
    }

    render() {
        console.log("App::render")
        return 
                
                
            
                {this.state.num}
            
        

    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

我们在App组件中挂载了A、B组件，App绑定了state.num，A、B绑定了state.name，然后在1s 后触发app组件的更新，此时查看浏览器，可以看到，APP、A、B都执行了render，但其实A、B依赖的name并没有发生改变。如果是小组件还好，但如果是大组件，那就糟糕了，所以需要避免这种无所谓的更新：

class A extends React.Component { shouldComponentUpdate(nextProps, nextState) { return nextProps.name === this.props.name ? true : false } render() { console.log("A::render") return "A" } } class B extends React.Component { shouldComponentUpdate(nextProps, nextState) { return nextProps.name === this.props.name ? false : true } render() { console.log("B::render") return "A" } }

我在促发这个方法的时候，A组件返回 true，B 组件返回false，查看浏览器，可以发现，触发该方法的时候 A渲染了，而B没有渲染

componentWillUpdate(nextProps, nextState)

没啥卵用，和componentDidUpdate组成一对儿，如果业务需要，就用

componentDidUpdate()

没啥卵用，和componentWillUpdate组成一对儿，如果业务需要，就用

componentWillUnmount

用于清理资源或者事件

class Content extends React.Component { constructor() { super() this.state = { num: 1 } setInterval(() => { this.setState({ num: ++this.state.num }) console.log(this.state.num) }, 1000) } render() { return this.state.num } } class App extends React.Component { constructor() { super() this.state = { show: true } setTimeout(() => { this.setState({ show: false }) },2000) } render() { return this.state.show ? : null } } ReactDom .render( , document .getElementById( "app" ) )

我们在App组件中挂载Content组件，而Content组件则使用定时器每秒更新一次，但是在2s 之后，我们在App组件中卸载这个组件，但是，查看浏览器可以发现，定时器依旧在工作，并且报错：

如果我们返回显示隐藏组件，就会积累越来越多的定时器。然后就爆炸了。 ``` class Content extends React.Component { constructor() { super() this.state = { num: 1 } this.interval=setInterval(() => { this.setState({ num: ++this.state.num }) console.log(this.state.num) }, 1000) } render() { return this.state.num } componentWillUnmount(){ clearInterval(this.interval) } } ``` 这么解决
0x006 总结
在不同的生命周期做不同的事。
0x007 资源：
react

源码

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97082.html

上一篇：我与DOM的第一次邂逅

下一篇：初识DOM

相关文章

React入门0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相关的简单用法，这一章需要讲一下组件的生命周期。生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从...

Blackjun 2019-08-23 11:30 评论0 收藏0

Router入门0x201: 从 URL 到 SPA

摘要：的全称是统一资源定位符英文，可以这么说，是一种标准，而网址则是符合标准的一种实现而已。渲染器，将组件渲染到页面上。 0x000 概述从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 评论0 收藏0

快速入门React

摘要：考虑到是快速入门，于是乎我们就记住一点，当修改值需要重新渲染的时候，的机制是不会让他全部重新渲染的，它只会把你修改值所在的重新更新。这一生命周期返回的任何值将会作为参数被传递给。安装react npm install creat-react-app -gshowImg(https://segmentfault.com/img/remote/1460000015639868); 这里直...

figofuture 2019-08-22 18:43 评论0 收藏0

01.react入门必备，知识点梳理，生命周期全讲解

摘要：生命周期在版本中引入了机制。以后生命周期图解不包含官方不建议使用的事件处理事件的命名采用小驼峰式，而不是纯小写。只是在兄弟节点之间必须唯一受控组件使的成为唯一数据源。 react 基础 JSX JSX是一个 JavaScript 的语法扩展,可以很好地描述 UI 应该呈现出它应有交互的本质形式。 React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远...

Jiavan 2019-08-26 10:36 评论0 收藏0

React入门0x016: 访问Dom

摘要：概述不到必要不要在中访问，尝试使用的思想去解决问题。当然，必要的时候还是可以的，比如某些依赖的组件时机在中，并不是任何时候都可以访问的，需要讲究时机。 0x000 概述不到必要不要在React中访问Dom，尝试使用React的思想去解决问题。当然，必要的时候还是可以的，比如某些依赖Dom的组件 0x001 时机在React中，并不是任何时候都可以访问Dom的，需要讲究时机。因为Re...

NeverSayNever 2019-08-23 13:50 评论0 收藏0

发表评论

登陆后可评论

0条评论

loonggg

男|高级讲师

我要关注我要私信

TA的文章
阅读更多

账号安全基本措施

阅读 1046·2021-11-25 09:43

#yyds干货盘点#Apache的三种模式

阅读 678·2021-11-22 14:45

❤️国庆假期快到了，用python写个倒计时程序，助你熬到假期！❤️

阅读 3792·2021-09-30 09:48

LibreOffice 7.2 正式发布：原生适配苹果 M1 芯片，更好兼容微软 Office 文档

阅读 1039·2021-08-31 09:41

Amaple.js框架详细介绍

阅读 1948·2019-08-30 13:52

Css优先级

阅读 1958·2019-08-30 11:24

实现图片恒定宽高比的属性 — intrinsicsize

阅读 1318·2019-08-30 11:07

CSS 常用的定位和布局方法汇总(已添加源码地址)

阅读 918·2019-08-29 12:15

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

React入门0x008: 生命周期

相关文章

React入门0x007: 生命周期概念

Router入门0x201: 从 URL 到 SPA

快速入门React

01.react入门必备，知识点梳理，生命周期全讲解

React入门0x016: 访问Dom

发表评论

0条评论

loonggg

男|高级讲师

TA的文章

账号安全基本措施

#yyds干货盘点#Apache的三种模式

❤️国庆假期快到了，用python写个倒计时程序，助你熬到假期！❤️

LibreOffice 7.2 正式发布：原生适配苹果 M1 芯片，更好兼容微软 Office 文档

Amaple.js框架详细介绍

Css优先级

实现图片恒定宽高比的属性 — intrinsicsize

CSS 常用的定位和布局方法汇总(已添加源码地址)

最新活动