react生命周期

Jason_Geng 发布于2019-08-23 15:10 / 510人阅读

摘要：生命周期，一直只关心自己常用的那几个，虽然基本能解决的问题，但是当被问到的时候，说的不清不楚还是让我很惭愧，所以今天我就专门来梳理一下的生命周期执行场景执行之前详细不会触发重复渲染，只执行一次执行场景之后之后详情只能通过访问数据不能修改可

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元素。

服务器托管专线服务生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101637.html

React专题：生命周期

摘要：而生命周期钩子，就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名，分别是将只提供别名，彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验生命周期...

Hanks10100 2019-08-23 11:25 评论0 收藏0
捋一捋React的生命周期

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

MobService 2019-08-23 15:20 评论0 收藏0
ReactV16.3，即将更改的生命周期

摘要：我们目前的计划是为不安全生命周期引入别名，和。从现在开始，只有新的生命周期名称将起作用。从版本开始，更新以响应更改的推荐方法是使用新的静态生命周期。注释：本文是根据React的官方博客翻译而成（文章地址：https://reactjs.org/blog/2018...）。主要讲述了React之后的更新方向，以及对之前生命周期所出现的问题的总结，之后的React将逐步弃用一些生命周期和...

wendux 2019-08-22 16:28 评论0 收藏0
React组件生命周期详解

摘要：组件生命周期构造方法是对类的默认方法，通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求，并。后废弃该生命周期，可以在中完成设置渲染组件是一个组件必须定义的生命周期，用来渲染。该生命周期内可以进行。 React组件生命周期 constructor( ) 构造方法 constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是...

learn_shifeng 2019-08-22 17:31 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
React组件生命周期

摘要：组件生命周期此文章适合之前的版本，，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。 React组件生命周期此文章适合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前，这篇文章还是适用的。新的生命周期请看官...

mgckid 2019-08-20 10:42 评论0 收藏0