添加交互

响应事件

预览

• 编写事件处理函数的不同方法
• 如何从父组件传递事件处理逻辑
• 事件如何传播以及如何停止它们

总结

• 可以通过将函数作为 props 传递给元素如 <button 来处理事件。
• 必须传递事件处理函数引用，而非函数调用。
• 可以单独或者内联定义事件处理函数。
• 事件处理函数在组件内部定义，所以他们可以访问 props。
• 可以在父组件中定义事件处理函数，并将其作为 props 传递给子组件。
• 可以根据特定于应用程序的名称定义事件处理函数的 props。
• 事件会向上传播。通过事件的第一个参数调用 e.stopPropagation() 来阻止这种情况。
• 事件可能具有不需要的浏览器默认行为。调用 e.preventDefault() 来阻止这种情况。
• 从子组件显示调用事件处理函数 props 是事件传播的另一种优秀替代方案。

state: 组件的记忆

预览

• 如何使用 useState Hook 添加 state 变量。
• useState Hook 返回哪一对值。
• 如何添加多个 state 变量。
• 为什么 state 被称作是局部的。
• 如何保证多个 state 的顺序，简易实现 setState Hook。

总结

• 当一个组件需要在多次渲染之间“记住”某些信息时使用 state 变量。
• state 变量时通过调用 useState Hook 来声明的。
• Hook 是以 use 开头的特殊函数。
• Hook 可能会让你想起 import：他们需要在非条件语句中使用。调用 Hook 时，包括 useState ，仅在组件或另一个 Hook 的顶层被调用才有效。
• useState Hook 返回一对值：当前 state 和更新它的函数。
• 你可以拥有多个 state 变量。在内部，React 按顺序匹配它们。
• state 是组件私有的。如果在两个地方中渲染它，则每个副本都有独属于自己的 state。

渲染和提交

预览

• 在 React 中渲染的含义是什么
• 为什么以及什么时候 React 会渲染一个组件
• 在屏幕上显示组件所涉及的步骤
• 为什么渲染并不一定会导致 DOM 更新

总结

• 在一个 React 应用中一次屏幕更新都会发生以下三个步骤：
  • 触发 一次渲染
  • 渲染 组件
  • 提交 到 DOM
• 可以使用严格模式找到组件中的错误
• 如果渲染结果与上一次一样，那么 React 将不会修改 DOM

state 如同一张快照

预览

• 设置 state 如何导致重新渲染
• state 在何时以何种方式更新
• 为什么 state 不在设置后立即更新
• 事件处理函数如何获取 state 的一张“快照”

总结

• 设置 state 请求一次新的渲染。
• React 将 state 存储在组件之外，就像在架子上一样。
• 当你调用 useState 时，React 会为你提供该次渲染的一张 state 快照。
• 变量和事件处理函数不会在重新渲染中存活。每次渲染都有自己的事件处理函数。
• 每次渲染(以及其中的函数)始终看到的是 React 提供给本次渲染的 state 快照。
• 过去创建的事件处理函数拥有的是创建他们那次渲染中的 state 值。

把一系列 state 更新加入队列

预览

• 什么是“批处理”以及 React 如何使用它来处理多个 state 更新。
• 如何连续多次对同一 state 变量进行更新。
• 实现一个简易版的 “批处理函数”

总结

• 设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。
• React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。
• 要在一个事件中多次更新某些 state，你可以使用 setNumber(n => n + 1) 更新函数。

更新 state 中的 Objects

• 如何正确更新 state 中的 object
• 在不改变嵌套 object 的情况下，如何更新它们
• 什么是不可变性？如何保证不修改不可变对象
• 使用 Immer 减少 object 复制带来的重复性工作

总结

• React 中所有的 state 都是不不可变的。
• 当你在 state 中存储 object 时，改变它们不会触发渲染，而是会改变之前渲染“快照”中的状态。
• 不是改变对象，而是创建它的新版本，并通过设置它的状态来触发重新呈现。
• 可以使用对象扩展语法完成简单对象的副本创建。
• 扩展语法是浅拷贝的:它只复制一层深度。
• 要更新嵌套对象，需要从要更新的层次位置一直到最上层来创建副本。
• 如何通过 Immer 降低对象拷贝的重复度。

更新 state 中的数组

预览

• 如何添加、删除或者修改 React state 中的数组中的元素
• 如何更新数组内部的对象
• 如何通过 Immer 降低数组拷贝的重复度

总结

• 你可以直接将数组放入 state 中，但你不应该直接修改它
• 不要直接修改数组，而是创建它的一份新的拷贝，然后使用新的数组来更新它的状态
• 你可以使用 [...arr, newItem] 这样的数组展开语法来向数组中添加元素
• 你可以使用 filter() 和 map() 来创建一个经过过滤或者变换的数组
• 你可以使用 Immer 来保持代码简洁