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