状态管理
用 state 响应输入
预览
- 了解声明式 UI 变成和命令式 UI 编程有何不同
- 了解如何列举组件可能处于的不同视图状态
- 了解如何在代码中触发不同视图状态的变化
总结
- 声明式编程意味着为每一个视图状态声明 UI 而非细致地控制 UI (命令式)
- 当开发一个组件时：
- 写出你的组件中所有的视图状态
- 确定是什么触发了这些状态的改变
- 通过
useState模块化内存中的 state - 删除热河不必要的 state 变量
- 连接时间处理函数去设置 state
选择 state 结构
预览
- 使用单个 state 变量还是多个 state 变量
- 组织 state 时应避免的内容
- 如何解决 state 结构中的创建问题
构建 state 的原则
- 合并关联的 state: 如果某两个 state 变量总是一起变化，则将它们统一成一个 state 便俩个可能更好
- 避免互相矛盾的 state
- 避免冗余的 state
- 不要在 state 中镜像 props
- 避免重复的 state
- 避免深度嵌套的 state
总结
- 如果两个 state 变量总是一起更新，请考虑将它们合并为一个。
- 仔细选择你的 state 变量，以避免创建“极难处理”的 state。
- 用一种减少出错更新的机会的方式来构建你的 state。
- 避免冗余和重复的 state，这样您就不需要保持同步。
- 除非您特别想防止更新，否则不要将 props 放入 state 中。
- 对于选择类型的 UI 模式，请在 state 中保存 ID 或索引而不是对象本身。
- 如果深度嵌套 state 更新很复杂，请尝试将其展开扁平化。
在组件之间共享 state
预览
- 如何使用状态提升在组件之间共享状态
- 什么是受控组件？什么是非受控组件
受控组件和非受控组件
通常我们把包含“不受控制”状态的组件称为“非受控组件”，相反，当组件中的重要信息是由 props 而不是其自身状态驱动时，就可以认为该组件是“受控组件”。
非受控组件通常很简单，因为它们不需要太多配置。但是当你想把它们组合在一起使用时，就不那么灵活了。受控组件具有最大的灵活性，但它们需要父组件使用 props 对其进行配置。
总结
- 当你想要整合两个组件时，将它们的 state 移动到共同的父组件中
- 然后在父组件中通过
props把信息传递下去 - 最后，向下传递事件处理程序，以便子组件可以改变父组件的 state
- 考虑将组件视为“受控”(由 props 驱动)或是“不受控”(由 state 驱动)是十分有益的
对 state 进行保留和重置
预览
- React 如何“处理”组件结构
- React 何时选择保留或重置 state
- 如何强制 React 重置组件的 state
- key 和组件类型如何影响 state 是否被保留
总结
- 只要在相同位置渲染的是相同组件，React 就会保留状态
- state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联
- 你可以通过为一个子树指定一个不同的 key 来重置它的 state
- 不要嵌套组件的定义，否则你会意外地导致 state 被重置
迁移状态逻辑至 Reducer 中
预览
- 什么是 reducer 函数
- 如何将
useState重构成useReducer - 什么时候使用 reducer
- 如何编写一个好的 reducer
- reducers 必须是纯粹的
- 每个 action 都描述了一个单一的用户交互，即使它会引发数据的多个辩护