Change some improper translations. (#31176)

And also remove junk code between each lifecycle method. Then add index number before each method to help the reader understand the running order better.
This commit is contained in:
Leo
2018-11-26 14:35:51 -05:00
committed by Jingyi Ding
parent 45ef6adeaf
commit fa1ba1b5b4

View File

@ -1,59 +1,60 @@
---
title: Life Cycle Methods Of A Component
localeTitle: 组件的生命周期方法
---
---
## React组件的生命周期方法
当我们开始使用组件时,我们需要执行多个操作来更新组件状态(state)或在该组件发生更改时执行某些操作。在这种情况下,了解组件的各种生命周期方法会帮助你更好的操作组建!因此,我们将在本文中深入探讨组件的生命周期方法。
从广义上讲,我们可以将生命周期方法分为**3**类。
1. 创建
2. 更新
3. 卸载
由于生命周期方法的作用通过名称就很容易理解,我只想提一下方法名称。并且,方法前的编号便是此方法在这个生命周期中的调用顺序。如有必要,请随时为本文做出贡献。
## 创建:
1. `constructor()`
2. `componentWillMount()`
3. `render()`
4. `componentDidMount()`
## 更新:
1. `componentWillRecieveProps()`
2. `shouldComponentUpdate()`
3. `componentWillUpdate()`
4. `render()`
5. `componentDidUpdate()`
## 卸载:
1. `componentWillUnmount()`
## 一些有趣的事实需要注意:
* `constructor` `componentWillMount` `componentDidMount``componentWillUnmount`将在组件的生命周期中仅调用一次
* 仅当`shouldComponentUpdate`返回true时才会执行`componentWillUpdate``componentDidUpdate`
* `constructor` `componentWillMount` `componentDidMount``componentWillUnmount`在组件的整个生命周期中仅调用一次。
* 在更新组件时,仅当`shouldComponentUpdate`返回true时才会执行`componentWillUpdate``componentDidUpdate`方法
* `componentWillUnmount()`将在卸载任何组件之前调用,因此可用于释放已用内存,关闭与数据库的连接等
通过深入编码可以学到很多东西。因此,通过编码让你的手弄脏。
注意:
> “将在未来的16.x版本中启用弃用警告 **但遗留生命周期将继续有效直到版本17.**”
>
> “即使在版本17中它仍然可以使用它们但是它们将带有”UNSAFE\_“前缀别名以表明它们可能会导致问题。我们还准备了一个[自动脚本,](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles)用现有代码[重命名它们](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) 。” 1
换句话说,这些旧的生命周期方法仍然可用作:
* `UNSAFE_componentWillMount`
* `UNSAFE_componentWillReceiveProps`
@ -66,7 +67,7 @@ React 17中将引入新的生命周期方法
* `getDerivedStateFromProps`将是`componentWillReceiveProps`的更安全的替代品。
* 将添加`getSnapshotBeforeUpdate`以支持安全地从DOM更新中读取属性
通过深入编码可以学到很多东西。因此,尽情的去尝试吧。
### 来源