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

本文共 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://pkgum.baihongyu.com/

你可能感兴趣的文章
【基础进阶】URL详解与URL编码
查看>>
apache日志分析
查看>>
java 反射: 当Timestamp类型的属性值为null时,设置默认值
查看>>
vue-resource和vue-async-data两个插件的使用
查看>>
UISegmentedControl的基本用法
查看>>
ASP.NET 4.5.256 has not been registered on the Web server
查看>>
shell编程之文本与日志过滤
查看>>
重构中对设计模式的反思
查看>>
安卓Launcher之获取手机安装的应用列表,安卓launcher
查看>>
ElasticSearch 2 (10) - 在ElasticSearch之下(深入理解Shard和Lucene Index)
查看>>
数据库事务的隔离级别
查看>>
CSS教程:div垂直居中的N种方法[转]
查看>>
Ubuntu下的svn的安装
查看>>
Android handler Thread 修改UI Demo
查看>>
js 基于函数伪造的方式实现继承
查看>>
Map集合遍历的2种方法
查看>>
桶排序-py
查看>>
cflow察看工程函数调用关系+Linux 0.11 内核实验环境
查看>>
Duplicate fragment name ERROR Jetty Maven Plugin
查看>>
Hbase关于Java常用API举例
查看>>