您的位置是:网站首页>Javascript编程Javascript编程

Reactjs的生命周期是什么?reactjs生命周期的详细介绍

少儿编程网2020-03-26 21:31:20Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介本篇文章主要的讲述了关于reactjs的生命周期的介绍,还有关于react的setState机制介绍,下面就让我们看文章的正文内容吧生命体的周期是单一不可逆的,软件开发的生命周期会根据方法不同,在完成前重新开始生命周期一、初探生命周期React组件的生命周期根据广义定义描述,可以分为挂载、渲染和卸载

本篇文章主要的讲述了关于reactjs的生命周期的介绍,还有关于react的setState机制介绍,下面就让我们看文章的正文内容吧

 RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

生命体的周期是单一不可逆的,软件开发的生命周期会根据方法不同,在完成前重新开始RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

生命周期RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

一、初探生命周期RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

React组件的生命周期根据广义定义描述,可以分为挂载、渲染和卸载。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

生命周期分两类:RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

1)当组件在挂载或者卸载时RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

2)当组件接受新数据时,即组件更新RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

一)挂载或卸载RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

1、组件挂载RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

最基本过程:组件状态初始化:读取初始state和props, 以及compontentWillMount()和componentDidMount()RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

2、组件卸载RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

只有componentWillUnmount这一个卸载前状态RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

二)数据更新过程RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

1、组件自身state更新:shouldCompontentUpdate componentWillUpdate render componentDidUpdateRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

2、props改变引发的绘制:componentWillRecieveProps shouldComponentUpdate componentWillUpdate render componentDidUpdateRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

总结起来:RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

16.pngRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

二、自定义组件(ReactCompositeComponent)的生命周期主要通过三种状态进行管理:MOUNTING、RECEIVE_PROPS、UNMOUNTING,RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

15.pngRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

它们负责通知组件当前所处的状态,应该执行生命周期中的哪个步骤,是否可以更新state。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

  • mountComponent -> MOUNTINGRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

  • updateComponent -> RECEIVE_PROPSRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

  • unmountComponent -> UNMOUNTINGRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

MOUNTINGRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

一mountComponent:RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

通过mountComponent挂载组件,初始化序号、标记等参数,判断是否为无状态组件,并进行对应的组件初始化工作,比如初始化props、context等参数。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

利用getInitialState获取初始化state、初始化更新队列和更新状态。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

 RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

mountComponent本质上是通过 递归 渲染内容的,由于递归的特性,父组件的componentWillMount在其子组件的componentWillMount之前调用,而父组件的componentDidMount在其子组件的componentDidMount之后调用。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

14.pngRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

二)updateComponentRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

若存在componentWillReceiveProps,则执行。如果此时在componentWillReceiveProps中调用setState,是不会触发re-render的,RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

而是会进行state合并。且在componentWillReceiveProps、shouldComponentUpdate和componentWillUpdate中也还是无法获取到更新后的this.stateRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

即此时访问的this.state 仍然是未更新的数据,需要设置this.state = nextState后才可以,只有在render和componentDIdUpdate中才能获取到更新后的this.state(想看更多就到PHP中文网React参考手册栏目中学习)RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

 RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

updateComponent本质上是通过 递归 渲染内容的,由于递归的特性,父组件的componentWillUpdate在其子组件的componentWillUpdate之前调用,而父组件的componentDidUpdate在其子组件的componentDidUpdate之后调用。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

注意:禁止在shouldComponentUpdate和componentWillUpdate中调用setState,这会造成循环调用,直至耗光浏览器内存后崩溃。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

13.pngRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

三)unmountComponentRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

unmountComponent负责管理生命周期中的componentWillUnmount。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

如果存在componentWillUnmount,则执行并重置所有的相关参数、更新队列以及更新状态,如果此时在componentWillUnmount中调用setState,是不会触发re-render的,这是因为所有更新队列和更新状态都被重置为null,并清除了公共类,完成了组件写在操作。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

三、无状态组件RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

只有一个render方法,并没有组件类的实例化过程,也没有实例返回RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

没有状态,没有生命周期,只有纯粹接受prop渲染成dom结构,纯粹为渲染而生RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

setState机制RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

一、setState异步更新RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

注意:绝对不要直接修改this.state,这是一种低效做法,而且很有可能被之后的操作替换RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

1、setState通过队列机制实现state更新, 队列机制可以高效地批量更新stateRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

2、利用状态队列机制实现setState的异步更新,避免频繁地重复的更新stateRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

3、当执行setState时,会将需要更新的state合并后放入状态队列,而不会立刻更新this.stateRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

二、setState调用栈RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

简化调用栈:RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

12.pngRL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

isBatchingUpdatestrue,则把当前组件(即调用了 setState 的组件)放入 dirtyComponents 数组中;否则 batchUpdate 所有队列中的更新。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

以上就是Reactjs的生命周期是什么?reactjs生命周期的详细介绍的详细内容,更多请关注少儿编程网其它相关文章!RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

来源:php中文网RL4少儿编程网-Scratch_Python_教程_免费少儿编程学习平台


相关文章:

支持一下 ( )

Reactjs的生命周期是什么?reactjs生命周期的详细介绍

      匿名评论
    • 评论
    人参与,条评论
    Reactjs的生命周期是什么?reactjs生命周期的详细介绍

客服在线

服务时间

周一至周日 9:00-21:00