本篇文章为一篇学习文章，非原创，详细请查看参考的原文。

组件设计原则

不阻断数据流

props和state可能会更新，不论什么时候组件应该处理好这些更新。

渲染中不要阻断数据流

当别人使用你的组件时，他们的预期是，不论传递属性如何变化，组件都将反映这些变化。
因此，不建议把props复制到state。
计算结果可以使用memoization缓存，输入没变就不重新计算。Hooks提供了一种记忆昂贵计算的内置方法 useMemo， class组件可以使用类似memoize-one：

  1. function Button({ color, children }) {
  2.   const textColor = useMemo(
  3.     () => slowlyCalculateTextColor(color),
  4.     [color] // ✅ 除非 `color` 改变，不会重新计算
  5.   );
  6.   return (
  7.     <button className={'Button-' + color + ' Button-text-' + textColor}>
  8.       {children}
  9.     </button>
  10.   );
  11. }

不要在Side Effects里阻断数据流

可以使用Hooks useEffect

不要在优化中阻断数据流

建议避免手动实现 shouldComponentUpdate ，也要避免在 React.memo() 中使用自定义的比较方法。React.memo 中默认的浅比较会响应函数标识的更新

时刻准备渲染

一个组件不应该被或多或少的渲染而损坏。
不要试图在组件行为中，假设任何不必要的时序信息。组件应该随时可以重新渲染。
组件不应该因为它或其父组件频繁地重渲染而坏掉。

没有单例组件

即使组件只渲染一次，但是设计上需要让它渲染多次也不会损坏。
同一个组件使用多次不应该相互影响。

隔离本地状态

确定哪个状态是特定UI下的本地状态，除非必要，不要将该状态提升到更高的地方。
不要把该本地的数据全局化。

参考

编写有弹性的组件
https://overreacted.io/zh-hans/writing-resilient-components/