react

通信

1. 父子 props
2. 跨层 context
3. 全局状态库

useState

• state 判断相等条件使用: Object.is()

• memo 在实践中, 你可以通过遵循一些原则来减少许多不必要的记忆化：

• 当一个组件在视觉上包装其他组件时，让它 接受 JSX 作为子元素。随后，如果包装组件更新自己的 state，React 知道它的子组件不需要重新渲染。

• 建议使用 state 并且不要 提升状态 超过必要的程度。不要将表单和项是否悬停等短暂状态保存在树的顶部或全局状态库中。

• 保持 渲染逻辑纯粹。如果重新渲染组件会导致问题或产生一些明显的视觉瑕疵，那么这是组件自身的问题！请修复这个错误，而不是添加记忆化。

• 避免 不必要地更新 Effect。React 应用程序中的大多数性能问题都是由 Effect 的更新链引起的，这些更新链不断导致组件重新渲染。

• 尝试 从 Effect 中删除不必要的依赖关系。例如，将某些对象或函数移动到副作用内部或组件外部通常更简单，而不是使用记忆化。

• 如果特定的交互仍然感觉滞后，使用 React 开发者工具 查看哪些组件在记忆化中受益最大，并在需要时添加记忆化。这些原则使你的组件更易于调试和理解，因此在任何情况下都最好遵循它们。从长远来看，我们正在研究 自动记忆化 以一劳永逸地解决这个问题。

• useDeferredValue

useReducer

vs useState

两者是等价的,可以互相转换.

• 规模小适合useState, 代码量少.当多个事件处理程序以相似的方式修改 state 时，useReducer 更好
• useReducer 抽象层级更高, 他将状态更新逻辑与事件处理程序分离开, 可读性更好,也方便调试.

reducer技巧

• reducers必须是纯函数,在渲染时运行,不应该包含异步请求、定时器或者任何副作用
• 每个 action 都描述了一个单一的用户交互，即使它会引发数据的多个变化
• 以不可变值的方式去更新 对象 和 数组, 使用Immer 简化 reducers