React 中对响应式的理解
最近在专研 React 文档，遇到文档中这样的一句话让我陷入了沉思：“在组件主体中声明的所有变量都是响应式的。” 基于 Vue，我对响应式的理解是这样的：响应式变量是被 Vue 的响应式系统（基于 Proxy）追踪的，只要它们发生变化，Vue 就会自动更新视图。比如通过 ref() 或 reactive() 创建的对象，计算属性 computed，甚至是 watchEffect() 等副作用监听器…
阅读全文Category
React系列
共 11 篇文章
React系列八：脱围机制
有些组件可能需要控制和同步 React 之外的系统。例如，你可能需要使用浏览器 API 聚焦输入框，或者在没有 React 的情况下实现视频播放器，或者连接并监听远程服务器的消息。在本章中，你将学习到一些脱围机制，让你可以“走出” React 并连接到外部系统。大多数应用逻辑和数据流不应该依赖这些功能。 当你希望组件“记住”某些信息，但又不想让这些信息 触发新的渲染 时，你可以使用 ref 。 u…
阅读全文React系列七：Reducer 和 Context
Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入传递给其他组件。你可以组合使用它们来共同管理一个复杂页面的状态。 这里的tasksReducer是我们用于处理tasks的方法，如新增，删除，修改等。 initialTasks是初始化tasks的默认值。 tasks是任务列表、dispatch用于调用tasksReducer来操作tasks。 接下来需要将tasks和dis…
阅读全文React系列六：Context
通常来说，你会通过 props 将信息从父组件传递到子组件。但是，如果你必须通过许多中间组件向下传递 props，或是在你应用中的许多组件需要相同的信息，传递 props 会变的十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。 这里的1是默认值 这里需要用useContext来使用LevelContext 注意！这个示例还不能运行。因…
阅读全文React系列五：状态管理
React 控制 UI 的方式是声明式的。你不必直接控制 UI 的各个部分，只需要声明组件可以处于的不同状态，并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 通俗的说就是根据一个状态来判断展示哪一个组件。 React推荐使用尽量简单但是意义明确的state： 1. 如果两个 state 变量总是一起更新，请考虑将它们合并为一个。 2. 仔细选择你的 state 变量，以避免…
阅读全文