React生命周期

最新推荐文章于 2024-03-17 07:45:00 发布
最新推荐文章于 2024-03-17 07:45:00 发布
阅读量626 收藏 1
点赞数 1
分类专栏： React 文章标签： React 生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41463701/article/details/83119619
版权

React生命周期

React的生命周期分别分为3个阶段

  1. 初始化阶段
  2. 运行阶段
  3. 销毁阶段

在这里插入图片描述

class MyComponent extends Component {
    constructor(props){
      super(props);
      this.state ={
          name : "Hello World"
      }
    
    componentWillMount() {
        console.log("渲染之前");
    }
    render() {
        console.log("渲染")
    }
    componentDidMount() {
        console.log("渲染完成")
    }
    componentWillReceiveProps(nextProps){
      console.log("接收到来自父组件的数据",nextProps)
    }
    shouldComponentUpdate(nextProps,nextState) {
        console.log("判断数据是否更新true，false来判断",nextProps,nextState)
        return true
    }
    componentWillUpdate(nextProps,nextState) {
      console.log("组件数据将要更新",nextProps,nextState)
    }
    componentDidUpdate(prevProps){
      console.log("组件数据更新完毕",prevProps)
    }
    componentWillUnmount(){
        console.log("已经销毁")
    }
}

1.组件初始化阶段

1. componentWillMount()

在初始化阶段调用一次，之后开始渲染

componentWillMount() {
        console.log("渲染之前");
    }
2. render()
render(){
    return(<div>Hello World</div>)
}

render方法是在类组件中唯一必须的方法

render方法不会和浏览器直接进行交互

3. componentDidMount()

在整个页面选软完成后调用方法，类似于Vue的mounted

可以调用setState立即在componentDidMount()，这样会让render调用两次，谨慎使用可能会导致性能的问题。

componentDidMount() {
        console.log("渲染完成")
}

2.组件运行阶段

1. componentWillReceiveProps(nextProps)

16.5.2官方文档即将要废弃

在父组件传入的值变更的时候，才会调用此方法

参数1.nextProps为接收到的父组件的数据

componentWillReceiveProps(nextProps){
      console.log("接收到来自父组件的数据",nextProps)
}
2. shouldComponentUpdate(nextProps,nextState)

return false和ture用来判断是否需要更新数据||参数2.nextState为子组件变更的数据

这个方法常用于性能的优化不要依赖它来“防止”渲染，因为这可能导致错误。考虑使用内置PureComponent而不是shouldComponentUpdate()手写

shouldComponentUpdate(nextProps,nextState) {
        console.log("shouldComponentUpdate:判断数据是否更新，true，false来判断",nextProps,nextState)
        return true//更新数据
        return false //不更新数据
        //然后UNSAFE_componentWillUpdate()，render()和componentDidUpdate()将不会被调用
    }

++在将来，React可以shouldComponentUpdate()视为提示而不是严格的指令，并且返回false仍然可能导致组件的重新呈现。++ ——————————官方文档16.5.2版本

3. componentWillUpdate(nextProps,nextState)

组件将要更新的时候调用，可以修改state的值

render(){
    return(<div>Hello World</div>)
}
4. componentDidUpdate(prevProps,prevState,snapshot)

组件更新完成后调用

componentDidUpdate(prevProps){
      //必须要if来包裹 不然会死循环
      // if(this.state.name == null){
      // }
      console.log("componentDidUpdate:数据已经改变",prevProps)
    }

3.组件销毁阶段

1. componentWidllUnmount()
componentWillUnmount(){
        console.log("componentWillUnmount:已经销毁")
}

componentWidllUnmount()在销毁组件之前调用

常用于清理无效的计时器，网络请求等等…………

下面附上测试声明周期的测试代码

有些强迫症为了美观下面render中的注释了一下

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props){
      super(props);
      this.state ={
          name : "Hello World"
      }
      this.fn1 = this.fn1.bind(this);
    }
    fn1(){
      this.setState({
          name : "I Love You"
      })
    }
    //初始化阶段
    //渲染之前
    componentWillMount() {
        console.log("componentWillMount:render之前触发");
    }
    render(){
        console.log("render渲染完成")
        return (
            //<div className="App">
                //<h1 ref="color">{this.state.name}</h1>
                //<input type="button" defaultValue="按钮" onClick={this.fn1}/>
            //</div>
        );
    }
    //渲染之后
    componentDidMount() {
        console.log("componentWillMount:render之后触发",this.refs.color.style.color="red")
    }
    //运行阶段
    //接收父组件带来的数据
    componentWillReceiveProps(nextProps){
      console.log("componentWillReceiveProps:接收到来自父组件的数据",nextProps)
    }
    //判断数据是否更新
    shouldComponentUpdate(nextProps,nextState) {
        console.log("shouldComponentUpdate:判断数据是否更新，true，false来判断",nextProps,nextState)
        return true
    }
    //数据更新 一定要有数据的改变
    //改变后重新渲染
    componentWillUpdate(nextProps,nextState) {
      console.log("componentWillUpdate:数据将要发生改变",nextProps,nextState)
    }
    //所有组件加载完毕
    componentDidUpdate(prevProps){
      //必须要if来包裹 不然会死循环
      // if(this.state.name == null){
      //
      // }
      console.log("componentDidUpdate:数据已经改变",prevProps)
    }
    //组件销毁前
    componentWillUnmount(){
        console.log("componentWillUnmount:已经销毁")
    }
}
class App extends Component {
  constructor(){
    super();
    this.state = {
        name : "cxy",
        onOff : true
    }
    this.changeProps = this.changeProps.bind(this);
    this.removeChild = this.removeChild.bind(this);
  }
  removeChild(){
    //用一个开关来控制是否消失
      this.setState({
          onOff :false
      })
  }
  changeProps(){
      this.setState({
          name : "yxc"
      })
  }
  render(){
    return (
        <div>
            {this.state.name}
            {
              this.state.onOff?<MyComponent name={this.state.name}/>:null
            }
            <input type="button" defaultValue="更新父组件数据" onClick={this.changeProps}/>
            <input type="button" defaultValue="销毁子组件" onClick={this.removeChild}/>
        </div>
    )
  }
}
export default App;
```# React生命周期

React的生命周期分别分为3个阶段
1. 初始化阶段
2. 运行阶段
3. 销毁阶段


```javaScript

class MyComponent extends Component {
    constructor(props){
      super(props);
      this.state ={
          name : "Hello World"
      }
    
    componentWillMount() {
        console.log("渲染之前");
    }
    render() {
        console.log("渲染")
    }
    componentDidMount() {
        console.log("渲染完成")
    }
    componentWillReceiveProps(nextProps){
      console.log("接收到来自父组件的数据",nextProps)
    }
    shouldComponentUpdate(nextProps,nextState) {
        console.log("判断数据是否更新true，false来判断",nextProps,nextState)
        return true
    }
    componentWillUpdate(nextProps,nextState) {
      console.log("组件数据将要更新",nextProps,nextState)
    }
    componentDidUpdate(prevProps){
      console.log("组件数据更新完毕",prevProps)
    }
    componentWillUnmount(){
        console.log("已经销毁")
    }
}
结束语

本篇最后修改时间为2018.10.17
欢迎大家一起讨论，上述表述如有出错欢迎指正。

-只争朝夕-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React的声明周期
01-08
React声明周期（16.3版本以前） 分为3个阶段： 1. 加载阶段 1. constructor() // 加载的时候调用一次，可以舒适化state 2. render() // 渲染页面 3. componentDidMount() // 组件挂在后触发 2. 更新阶段 1. componentWillReceiveProps(nextProps) // 接收新的props时触发 2. shouldComponentUpdate(nextProps, nextState) // 组件props或者state改变时触发， true: 更新， false: 不更新 // React.Pu
React生命周期详解
热门推荐
qq_43717065的博客
09-10 2万+
从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。React的生命周期同理也是这么一个过程。 React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中React都提供了一些钩子函数。 生命周期的描述如下： 挂载期：一个组件实例初次北创建的过程。 更新期：组件在创建后再次渲染的过程。 卸载期：组件在使用完后被销毁的过程。 组件的挂载： 组件在首次创建后，进行第一次的渲染为挂载期。挂载期有的一些方法会被依次触发，列举如下： constru.
前端React篇之React的生命周期有哪些？
最新发布
星辰迷上大海的博客
03-17 876
React的生命周期包括几个重要阶段：首先是挂载阶段，包括constructor构造函数、render渲染方法和componentDidMount挂载完成方法；接着是更新阶段，涵盖shouldComponentUpdate、render和componentDidUpdate方法；最后是卸载阶段，包括componentWillUnmount方法。
react生命周期详细介绍
luobo2345的博客
02-10 2万+
react生命周期详解，挂载渲染，卸载和错误捕获
React的生命周期详细讲解
zayyo的博客
02-28 3298
当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期当父组件中状态发生变化（包括子组件的挂载以及卸载）时，会触发自身对应的生命周期以及子组件的更新render以及render之前的生命周期，则 父组件先执行render以及render之后的声明周期，则子组件先执行，并且是与父组件交替执行当子组件进行卸载时，只会执行自身的生命周期，不会再触发别的生命周期。
react 生命周期实例分析
10-15
主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
React生命周期原理与用法踩坑笔记
11-21
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考，具体如下： React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲 ...
react生命周期函数图解
10-09
React中重要的部分就是生命周期函数。与其他框架不同，React的生命周期函数不同阶段支持不同的状态和属性变化，从而进行重新渲染。不同周期执行不同的函数对于整个开发过程很重要。
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
【React】生命周期详解
qq_45677671的博客
04-27 2844
文章目录constructor(props) constructor(props) React组件的构造函数在挂载之前被调用。 在使用React.Component构造函数时： 需要先在添加其他内容前，调用super(props) 用来将父组件传来的props绑定到这个类中 使用this.props将会得到。 官方建议： 不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。 constructor中应当做些初始化的动作 如：初始化
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 4297
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
React生命周期执行顺序详解
qq_44699923的博客
08-23 8474
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html
react的生命周期函数（超详细）
weixin_48065262的博客
04-03 1万+
一、es5版 实例化 取得默认属性 getDefaultProps 外部传入的props 初始状态 getInitailState state状态 即将挂载 componentWillMount 描画VDOM render 二、旧版本生命周期 加载阶段 取得默认属性，初始状态在constructor中完成（运行一次，可读数据，可同步修改state，异步修改state需要setState,setState在实例产生后才可以使用，可以访问到props） 即将挂载 componentWillMoun
React 生命周期精讲
TongJ_的博客
04-04 1143
React生命周期主要包括三个阶段：创建阶段(Mounting)、更新阶段(Updating) 和 销毁阶段(Unmounting)，在React不同的生命周期里，会依次触发不同的钩子函数。
react 生命周期
07-30
React中的useEffect是一个React Hook，用于在组件渲染时执行副作用操作，类似于类组件中的生命周期函数。useEffect的作用是在组件渲染完成后执行一些操作，比如发送网络请求、订阅事件、更新DOM等。useEffect接收两...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值