React 组件生命周期：你需要知道什么 [2022]
已发表: 2021-01-06在 React 中，应用程序被分成最小的可能部分，称为组件。 组件可以是展示的或容器的。
当我们谈论表示组件时，它们没有逻辑。 它们嵌入在组件内部； 它只有用户界面。
容器组件是使用表示组件并在组件中具有业务逻辑的组件。 此类组件通常必须保留本地状态对象以实现它们可能负责的众多用例之一。 这些组件使用展示组件作为子组件，并使用各种道具传递数据。
React 允许您拥有类或函数式组件。 React 生态系统中使用的一种流行模式是表示组件是功能类型的组件，而容器组件是类类型。
react 生命周期显示了组件经历的确切过程，以及 react 组件生命周期背后的原因。
目录
功能组件
这些是没有状态的，只能使用道具进行操作。
所有组件生命周期方法或setState都不能在此类组件内使用或访问。
结帐： React 项目想法
类组件
这些组件可以具有本地状态，并且可以访问生命周期方法和setState 。
react 中的一个典型类组件如下所示：- 
组件生命周期分为三个阶段：-
- 安装
- 更新
- 卸载
安装
当创建任何组件并将其插入 DOM（文档对象模型）时，使用的方法是：
●构造函数()
●静态 getDerivedStateFromProps()
●渲染（）
● componentDidMount()
更新
当提供给组件的 prop 或状态发生更改时，组件的重新渲染也称为更新阶段。 在这个阶段，下面给出了以下被调用的生命周期方法：
● 静态 getDerivedStateFromProps()
● shouldComponentUpdate()
● 渲染（）
● getSnapshotBeforeUpdate()
● componentDidUpdate()
阅读： Vue vs React：Vue 和 React 的区别
卸载
在卸载任何组件期间调用此方法：-
● 组件 willUnmount()
它是在文档对象模型被破坏之前调用的最后一个函数。 它可以清理在 componentWillMount 期间构建的任何元素。
为了组件中的错误处理目的，保留了一些方法：-
● 静态 getDerivedStateFromError()
● componentDidCatch()
常用的生命周期方法详细解释：-
● 构造函数（道具）
这种生命周期方法用于组件的安装阶段。 可以在这里声明一个本地状态对象。 super(props) 在任何其他语句之前在构造函数中被调用； 否则，访问 this.props 时会出错。
如果不打算声明本地状态对象或将事件处理程序绑定到实例，则无需编写组件的生命周期方法。
不建议使用 constructor() 中的调用状态，因为它会在上一个循环结束之前触发重新渲染。
Constructor() 是唯一可以直接分配状态的地方。 否则，如果需要更改状态或在其中分配某些内容，则应使用this.setSate 。
●渲染（）
在这个方法组件内部，编写了 JSX 部分。 JSX 类似于 HTML，但它是 javascript 的扩展语法。 当我们使用 JSX 时，我们还可以在 render 方法中使用 Javascript 表达式。
任何父组件的 render() 方法都可能在其中包含子组件。 所有这些都遵循组合模式，这是反应组件的基础。
每当调用父级的渲染方法时，子组件的渲染也开始，并且只有在整个子渲染完成后，父级渲染才完成。
render 方法是必需的方法； 没有这个，就无法制作组件，因为这是唯一可以编写组件视图部分的地方。
render 方法是纯的； 这意味着它不能修改其中的状态。
对于处于更新阶段的任何组件，是否会重新渲染特定组件可能取决于shouldComponentUpdate()生命周期方法返回类型或使用。
不建议在此方法中进行 API 调用以及与浏览器的任何交互，这会引发错误。
● componentDidMount()
此方法在组件安装后立即调用。 现在 DOM 可用于进一步操作。 可以在此方法中调用setState 。
此外，可以从这里进行与浏览器或 API 调用的交互。
此方法仅在创建期间调用一次。 该方法不会在任何进一步的重新渲染部分中运行，并且其中的逻辑也不会运行。
● componentDidUpdate()
这与 componentDidMount 相同。 可能会出现错误，唯一的区别是仅在发生组件重新渲染时才调用此方法。 初始渲染不调用此方法。
setState 和副作用可以在这个方法中完成。 但是 setState 需要被包裹在一个条件中； 否则，可能会陷入渲染无限循环，渲染永远不会结束。
如果 shouldComponentUpdate() 返回 false，也不会调用 componentDidUpdate。
●组件WillUnmount()
当组件的卸载阶段正在进行时，将调用此方法。
在方法内部，理想情况下，可以实现事件处理程序的移除和内存的清理。
不应在 this 内部调用 setState() 函数，因为它会导致组件重新渲染。
● shouldComponentUpdate()
在开发 React 应用程序时，经常会出现必须避免不必要的组件重新渲染的情况。 要实现这个类内组件，有上面提到的方法。 如果此方法返回 false，则不会发生组件及其子组件的重新渲染。
可以检查以前的 props 并与提供的新 props 进行比较，以确保没有更改，然后返回 false。
不建议再次调用其中的 setState() 方法，这会导致重新渲染。
此外，不应在此方法内执行副作用。
此方法还有另一种替代方法。 可以在扩展类的同时使用 React.pureComponents。 这比 shouldComponentUpdate() 更稳定可靠。
最后但并非最不重要的一点是，存在用于捕获错误的反应组件的错误边界类型。
必须简单地用错误边界组件包装组件。
在这个特殊组件中，使用了两种生命周期方法：-
- 静态 getDerivedStateFromError()
- 组件DidCatch()
如果任何后代组件抛出错误，它们都会被调用。
第一个是在渲染阶段调用的，所以它里面不允许有副作用。 第二个是在提交阶段调用的，因此它内部允许有副作用。
另请阅读：印度的 ReactJS 开发人员薪水
从世界顶级大学在线学习软件工程课程。 获得行政 PG 课程、高级证书课程或硕士课程，以加快您的职业生涯。
结论
React 组件生命周期增加了代码的复杂性，但通过方法完成的系统执行和操作从开发人员的角度来看似乎非常有吸引力。 React 生命周期允许重构或操作组件。
如果您有兴趣了解更多关于 React、全栈开发的信息，请查看 upGrad 和 IIIT-B 的全栈软件开发执行 PG 计划，该计划专为在职专业人士设计，提供 500 多个小时的严格培训，9 个以上的项目和任务、IIIT-B 校友身份、实用的实践顶点项目和顶级公司的工作协助。
