博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react生命周期
阅读量:6613 次
发布时间:2019-06-24

本文共 1393 字,大约阅读时间需要 4 分钟。

react生命周期,一直只关心自己常用的那几个,虽然基本能解决99%的问题,但是当被问到的时候,说的不清不楚还是让我很惭愧,所以今天我就专门来梳理一下react的生命周期

1、componentWillMount()

  • 执行场景:render()执行之前
  • 详细: setState()不会触发re-render重复渲染,只执行一次

2、render()

  • 执行场景: componentWillMount() 之后/ componentWillReceive(nextProps, nextState)之后
  • 详情: 只能通过this.props,this.state访问数据不能修改、 可以反回null,false 或则任何React组件、
    不能改变组件状态、 不能修改Dom的输出
  • 注意:render
    方法反回的不是真实的Dom元素,而是一个虚拟的表现,类似于一个Dom-Tree的结构对象,react之所以效率高就是这个原因

3、componentDidMount()

  • 执行场景:render()以后立即执行
  • 详情:可以对Dom进行操作 通常在这里加载服务器数据 可以setState触发重新渲染 只执行一次

4、componentWillReceiveProps(nextProps)

  • 执行场景:在已经挂载的组件接收到新的props时触发,可以理解为除了第一次生命周期(componentWillMount ->
    render -> componentDidMount)之后的生命周期触发
  • 详情: 只有当从外部传入的props发生变化时才会触发,setState是不会触发的
  • 注意:
    由于组件可能会在props传入即使没有发生改变也会触发重新渲染,所以如果你想自己处理改变最好对当前props值和下一次值进行比较,避免触发不必要的渲染

5、shouldComponentUpdate(nextProps,nextState)

  • 执行场景:在接收新的props或者state时触发
  • 详情:这个函数的作用是为了让我们自己能够控制组件是否重新渲染从而优化组件,默认返回true表示需要重新渲染
  • 注意:首次渲染时不会触发, 函数如果返回false是不会触发重新渲染的(componentWillUpdata -> render -> componentDidUpdate)是不会被触发的

6、componentWillUpdate(nextProps, nextState)

  • 执行场景: props或state发生改变时,shouldComponentUpdata 返回true时触发
  • 注意:不可以在这里调用setState 如果需要响应props可以到componentWillReceiveProps()中做响应

7、componentDidUpdate(prevProps, prevState)

  • 执行场景: 在componentWillUpdate -> render 以后
  • 注意: 该方法可以操作Dom,但是组件初始时不会调用

8、componentWillUnmount()

  • 执行场景:在组件卸载或销毁之前调用
  • 详情: 这个方法主要用于一些清理工作,比如无效的timers, interval, 或则取消网络请求
    清理任何componentWillMount()中创建的Dom元素。

转载地址:http://leaso.baihongyu.com/

你可能感兴趣的文章
IC卡的传输协议(1)-字符传输协议T=0【转】
查看>>
ADO.Net基础复习(一)
查看>>
Oracle EBS使用adpatch工具打patch过程
查看>>
YAML 语法
查看>>
不平静的2009,期待更不平静的2010
查看>>
[SPLEB]数据库设计
查看>>
转] C#中out和ref之间的区别
查看>>
android关键知识
查看>>
selenium切换窗口后定位元素出现问题的解决方案
查看>>
java模拟实现生产者---消费者问题
查看>>
QTP的那些事--有关的一些重要可用的函数(发送邮件)
查看>>
排列与组合的一些定理
查看>>
模板引擎Nvelocity实例
查看>>
[原创]Gerrit中文乱码问题解决方案分享
查看>>
灵活运用Zend框架
查看>>
HTML元素的默认CSS设置介绍
查看>>
CSS-图片不变形设置
查看>>
Autodesk云计算系列视频 --- 开篇介绍 Up to the cloud 直上云端
查看>>
自旋锁spin_lock和raw_spin_lock【转】
查看>>
Git异常:fatal: could not create work tree dir 'XXX': No such file or directory
查看>>