注意： setState()既能更新状态又能更新UI。如果在render()里继续调用setState(),setState()又会调用render(),所以产生了递归。会导致报错。
react 生命周期指的是组件从创建到卸载的整个过程，每个过程都有对应的钩子函数会被调用，它主要有以下几个阶段：
最近一直在学vue和nodejs，想着React这块儿也不能太久不用忘记了，写篇博客来解决一下我当时初学React时的痛点，生命周期。
在 React 16.3 中，Facebook 的工程师们给 React 带来一系列的新的特性，如 suspense 和 time slicing 等，这些都为 React 接下来即将到来的异步渲染机制做准备，有兴趣的可以看Sophie Alpert 在 JSConf Iceland 2018 的演讲。
React的核心是组件，组件在创建和渲染的过程中，需要调用固定的钩子函数，也称为组件的“生命周期”。利用生命周期函数，可以做初始化工作，并在渲染过程中实现一些特定功能。
在 React 中，对于每一次由状态改变导致页面视图的改变，都会经历两个阶段：render 阶段、commit 阶段。
作为一个合格的React开发者，它的生命周期是我们必须得了解的，本文将会以下几个方面介绍React生命周期：
React 类组件为开发者提供了一些生命周期钩子函数，能让开发者在 React 执行的重要阶段，在钩子函数里做一些该做的事。自从 React Hooks 问世以来，函数组件也能优雅地使用 Hooks ，弥补函数组件没有生命周期的缺陷。
React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命周期中提供很多钩子函数在生命周期的不同时刻调用。
React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种:
React放出Fiber（2017/09/26发布的v16.0.0带上去的）到现在已经快1年了，到目前（2018/06/13发布的v16.4.1）为止，最核心的Async Rendering特性仍然没有开启，那这大半年里React团队都在忙些什么？Fiber计划什么时候正式推出？
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法
1.React16.3的发布带来了一些新的特性, 除了新的ContextAPI之外, 还对生命周期做了部分修改, 为了支持未来的异步渲染特性, 一下生命周期将被废弃
componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate
此外，还有 State、Props、Context、Ref 等特性。这些加持让 Class 成为了具备完整组件特性的唯一选项，尽管Class 也存在许多问题，但它无可替代
React 有两种组件：class组件 和 函数组件。class组件需要继承 React.Component，用法如下：
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
React.js 核心团队一直在努力使 React 变得更快，就像燃烧的速度一样。为了让开发者能够加速他们的 React 应用程序，为此增加了很多工具:
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
⚠️ 注意 ：不能调用setState() 原因是render是每次组件渲染时触发的，如果在里面凋setState()，则组件数据发生变化，肯定要重新渲染，但是重新渲染又会触发render。就会形成死循环！！！
类式组件具有一系列的生命周期方法，用于处理组件在不同阶段的生命周期事件。这些方法可以在组件的不同生命周期阶段被调用，例如组件的初始化、挂载、更新和卸载等。
props属性是从父组件传过来的。当父组件改变了传递给子组件的数据时，子组件内部就会触发该函数。 以下流程发生在子组件内部：子组件内部
React的生命周期是组件在其生命周期内的一系列事件和方法调用，允许您管理组件的行为和状态。除了常见的生命周期方法如componentDidMount和componentDidUpdate之外，还有一些其他方法可供使用。
下面所写的，只适合前端的React。（React也支持后端渲染，而且和前端有点小区别，不过我没用过。）
注意加粗的字段，React 官方的文档其实把两个 hook 的执行时机说的很清楚，下面我们深入到 react 的执行流程中来理解下
1. 前言 函数式组件是一种非常简洁的数据驱动 UI 的实现方式。如果将 React 组件拆分成三个部分 —— 数据、计算和渲染，我们可以看到性能优化的几个方向。 数据：利用缓存，减少 rerender 的次数 计算：精确判断更新时机和范围，减少计算量 渲染：精细粒度，降低组件复杂度 今天主要分享数据层面的性能优化技巧。 1.1. 有什么是 Hook 能做而 class 做不到的？ 在学习 React hook api 的过程中，发现其相比类组件的生命周期，更加抽象且灵活。在 React 官方文档的 FA
一年多来，React 团队一直致力于实现异步渲染。上个月，在 JSConf 冰岛的演讲中，Dan 揭晓了一些令人兴奋的新的异步渲染可能。现在，我们希望与你分享我们在使用这些功能时学到的一些经验教训，以及一些帮助你在组件启动时准备异步渲染的方法。
在react router项目中，有这样的一个需求，首先展示用户名列表，点击某个用户名后，根据用户名在后台取得用户具体信息在详情页进行展示。
文：徐超，《React进阶之路》作者 授权发布，转载请注明作者及出处 ---- React 深入系列4：组件的生命周期 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 组件是构建React应用的基本单位，组件需要具备数据获取、业务逻辑处理、以及UI呈现的能力，而这些能力是要依赖于组件不同的生命周期方法的。组件的生命周期分为3个阶段：挂载阶段、更新阶段、卸载阶段，每个阶段都包含相应的生命周期方法。因
组件实例从被创建到被销毁的过程称为组件的生命周期。react只有class组件才有生命周期，函数组件只能通过hooks去模拟
函数式组件是一种非常简洁的数据驱动 UI 的实现方式。如果将 React 组件拆分成三个部分 —— 数据、计算和渲染，我们可以看到性能优化的几个方向。
react hook是继16.6的Suspense、lazy、memo后的又一巨大的令人兴奋的特性。然后有各种文章说了hook的优缺点，其中缺点包括：没有直接替代getSnapshotBeforeUpdate、componentDidUpdate生命周期的hook、不能像class组件那样写this、函数太大。这只是表面的现象，只要稍微思考一下，hook其实是无所不能的，我甚至相信未来挑不出hook的毛病来。今天手把手带大家过一遍如何实现class组件特性。
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安全的。
React 已经具备了在 Nod e服务器上处理渲染的能力。有一个特殊版本的 DOM 渲染器，它与客户端的模式相同。
本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/...)
生命周期 1. 生命周期函数 【调取组件】 constructor 初始化属性状态 componentWillMount 第一次渲染之前 render 渲染 componentDidMount 第一次渲染之后 【组件重新渲染：内部状态改变、传递给组件的属性改变】 状态改变： shouldComponentUpdate =>是否允许组件更新：返回TRUE是允许，返回FALSE则不再继续向下走
useEffect 是react 新版本推出的一个特别常用的 hooks 功能之一，useEffect 可以在组件渲染后实现各种不同的副作用，它使得函数式组件同样具备编写类似类组件生命周期函数的功能.
2、可以看出Preact中setState参数也是可以接收函数作为参数的。将要更新的state合并到当前的state
在 16 之前的版本的渲染过程可以想象成一次性潜水 30 米，在这期间做不了其它事情(Stack Reconciler);
该生命周期函数会在组件挂载的时候触发。所谓挂载，指的是真实 DOM 元素添加到文档树上。
例如像我们人类，从生到死的过程有这么几个特定的时间点，就是上，幼儿园，小学，中学...
前言 React Native有很多组件比如Image、ListView等等，想要合理的使用组件，首先要先了解组件的生命周期。 1.概述 无论你是开发Android还是iOS，对于组件的生命周期一定
今天我们继续从源码层面看 React 的更新阶段，是如何触发类函数的生命周期函数的。
值得一提的是，在将更改应用到 DOM 时，React 内部也有阶段概念。它们按如下方式分隔开：
本文主要探讨了React的渲染机制，从构建DOM树、Diff算法、DOM更新策略等方面进行介绍。同时，还讨论了如何优化React的性能，包括虚拟DOM、减少DOM操作、使用key属性、React的shouldComponentUpdate生命周期方法等。通过合理运用这些优化策略，可以大大提高React应用程序的性能。
我们都知道使用React可以使得网页的性能有很大的提高，本文具体探究它是通过什么样的渲染机制做到的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
