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

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

你可能感兴趣的文章
xhEditor for .net (支持上传,远程抓图)
查看>>
bleve搜索引擎是支持基于field搜索的
查看>>
CVS配置
查看>>
SharePoint 2013中的爬网最佳做法
查看>>
汉字转换为拼音以及缩写(javascript)
查看>>
Python中使用自定义类class作为海量数据结构时内存占用巨大的问题
查看>>
explain
查看>>
在纯AS工程中嵌入个别字体方法 (转载)
查看>>
c# 进程间通信
查看>>
C# Web程序打包部署问题
查看>>
linux下面某些常用命令的用法【转】
查看>>
js table操作 ------ 拖拽行为并且使其自动贴附
查看>>
DDD为何叫好不叫座?兼论DCI与业务分析的方法论
查看>>
GNU make manual 翻译( 一百三十五)
查看>>
2012注定是收获的一年,奋斗才刚刚开始
查看>>
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)...
查看>>
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(16)-权限管理系统-漂亮的验证码...
查看>>
ASP.NET MVC5+EF6+EasyUI 后台管理系统(17)-LinQ动态排序
查看>>
ASPJpeg和ASPUpload组件的一些属性和方法
查看>>
SqlServer基础:Bit类型
查看>>