基础
示例工程: formik-09x-component-lifecycle-events-example
核心文件: index.js
示例说明
Formik 大部分示例工程中都使用了极其方式创建 Formik 表单组件, 本示例中则使用了复杂 (或者说典型) 方式创建一个 Formik 表单组件, 即使用其继承自 React.Component 组件, 从而展示有关生命周期事件的基本使用. 但是, 也比较简单, 只涉及到了两个事件:
- componentWillReceiveProps
- render
但是, 这个示例中使用的 componentWillReceiveProps 事件在最新的 React 中已经过时. 引用一个老外的话说是:
This lifecycle, however, is on the deprecation path; it will stop working as-named in React 17: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
Given that, we should provide a more future-friendly solution for listening for shallow route changes. Perhaps adding a popstate listener in componentDidMount. If that seems like the best option I can add it to docs, but opening this ticket for discussion/tracking.
现在, 在最新版本 React 环境下需要使用 UNSAFE_componentWillReceiveProps()来代替.
另外: 在新版本中, 官方明确指出使用上述事件容易导致一些复杂 BUG 的出现, 所以官方建议使用事件来代替. 另外, 还有如下建议:
Note:
Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be deprecated in the future.
If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
For other use cases, follow the recommendations in this blog post about derived state.
If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.
If you used componentWillReceiveProps to "reset" some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.
In very rare cases, you might want to use the getDerivedStateFromProps lifecycle as a last resort.
引用
- , https://github.com/zeit/next.js/issues/4154
- , https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
来源: http://www.bubuko.com/infodetail-2713706.html