React中的数据存在哪里？

先介绍两个概念

• 状态共位：将状态尽可能放置在离其使用位置最近的组件中。从而减少不必要的渲染和 props 传递，简化组件结构，提高可维护性。适用于状态仅被单个或少数几个组件使用的场景
• 状态提升：将共享状态提升到共同的祖先组件中。实现多个组件之间状态共享，父组件通过 props 向下传递数据和回调函数。使用于状态被多个兄弟组件所需要时。

一句话总结：共置状态 -> 提升状态 -> 组件组合 -> Context

1. 首先考虑放在当前组件的 state 里面
2. 如果存在多个兄弟组件的状态都是同一个，那就提升到共同的父级组件中管理
3. 如果存在 props 多级传递，且中间层可能并不关心 props 状态，仅为了传递给深层组件，那么考虑直接将包含数据的深层组件，整个传递给子级（通过 props.children 或其它插槽的方式）
4. 最后考虑 context（redux）之类的全局状态管理器

最佳实践：

1. 如果有多个状态需要一起同步，先观察下是否可以使用派生状态（即从现有 props 和 state 直接推导出新的状态），如果不行，考虑使用 useReducer
2. 针对计算成本很高的函数，可以在调用时使用 useMemo 包裹，缓存计算结果