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 变量，以避免…
阅读全文React系列四：对象更新
state 中可以保存任意类型的 JavaScript 值，包括对象。但是，你不应该直接修改存放在 React state 中的对象。相反，当你想要更新一个对象时，你需要创建一个新的对象（或者将其拷贝一份），然后将 state 更新为此对象。 在 React 中，状态是不可变的（immutable）。React 不会深入比较对象内部的属性变化，而是通过引用是否变化 来判断是否需要更新组件。 Vue…
阅读全文React系列三：React事件
事件处理函数还将捕获任何来自子组件的事件。通常，我们会说事件会沿着树向上“冒泡”或“传播”：它从事件发生的地方开始，然后沿着树向上传播。 如果你点击任一按钮，它自身的 onClick 将首先执行，然后父级 <div 的 onClick 会接着执行。 在 React 中所有事件都会传播，除了 onScroll，它仅适用于你附加到的 JSX 标签。 事件处理函数接收一个 事件对象 作为唯一的参数。按照…
阅读全文React系列二：基础概念
React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！ 在看到标签时，小写为html标签，大写为自己的组件。 返回语句可以全写在一行上，但是，如果你的标签和 return 关键字不在同一行，则必须把它包裹在一对括号中。没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！不过也要注意：()是(),<\</是<\</，括号只是用于包裹…
阅读全文React系列一：准备入门
在上一章我们学习了基础的react语法，现在我们了解一下企业级开发 安装一个构建工具，如 Vite、Parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能，提供本地开发的开发服务器，以及部署应用到生产服务器的构建命令。 使用命令npm create vite\@latest，选择React模板，即可创建React应用。 路由决定了当用户访问特定 URL 时显示的内容或页面。你需…
阅读全文React查缺补漏
当在 React 中调用 useState 提供的 状态更新函数时，React 会触发该组件的重新渲染。也就是说组件的主体部分会再次执行。 Vue在改变某个变量的状态时不会重新执行onMounted。虽然Vue 和 React 都是响应式框架，但它们的更新机制不同。React 是“重新执行组件函数”，而 Vue 是“依赖追踪+局部更新”。 重新渲染 ≠ 重新操作 DOM，React 重新渲染组件时…
阅读全文