精读《编写有弹性的组件》
1. 引言
读了 精读《useEffect 完全指南》 之后，是不是对 Function Component 的理解又加深了一些呢？
这次通过 Writing Resilient Components 一文，了解一下什么是有弹性的组件，以及为什么 Function Component 可以做到这一点。
2. 概述
相比代码的 Lint 或者 Prettier，或许我们更应该关注代码是否具有弹性。
Dan 总结了弹性组件具有的四个特征：
- 不要阻塞数据流。
- 时刻准备好渲染。
- 不要有单例组件。
- 隔离本地状态。
以上规则不仅适用于 React，它适用于所有 UI 组件。
不要阻塞渲染的数据流
不阻塞数据流的意思，就是 不要将接收到的参数本地化， 或者 使组件完全受控。
在 Class Component 语法下，由于有生命周期的概念，在某个生命周期将 props 存储到 state 的方式屡见不鲜。 然而一旦将 props 固化到 state，组件就不受控了：
class Button extends React.Component {
state = {
color: this.props.color
};
render() {
const { color } = this.state; //
版权声明：本文为ascoders原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。