React系列七:Reducer 和 Context
Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入传递给其他组件。你可以组合使用它们来共同管理一个复杂页面的状态。 这里的tasksReducer是我们用于处理tasks的方法,如新增,删除,修改等。 initialTasks是初始化tasks的默认值。 tasks是任务列表、dispatch用于调用tasksReducer来操作tasks。 接下来需要将tasks和dis…
阅读全文Latest Posts
记录技术、生活和一些阶段性的想法。
Reducer 可以整合组件的状态更新逻辑。Context 可以将信息深入传递给其他组件。你可以组合使用它们来共同管理一个复杂页面的状态。 这里的tasksReducer是我们用于处理tasks的方法,如新增,删除,修改等。 initialTasks是初始化tasks的默认值。 tasks是任务列表、dispatch用于调用tasksReducer来操作tasks。 接下来需要将tasks和dis…
阅读全文通常来说,你会通过 props 将信息从父组件传递到子组件。但是,如果你必须通过许多中间组件向下传递 props,或是在你应用中的许多组件需要相同的信息,传递 props 会变的十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息,而无需通过 props 显式传递。 这里的1是默认值 这里需要用useContext来使用LevelContext 注意!这个示例还不能运行。因…
阅读全文React 控制 UI 的方式是声明式的。你不必直接控制 UI 的各个部分,只需要声明组件可以处于的不同状态,并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 通俗的说就是根据一个状态来判断展示哪一个组件。 React推荐使用尽量简单但是意义明确的state: 1. 如果两个 state 变量总是一起更新,请考虑将它们合并为一个。 2. 仔细选择你的 state 变量,以避免…
阅读全文state 中可以保存任意类型的 JavaScript 值,包括对象。但是,你不应该直接修改存放在 React state 中的对象。相反,当你想要更新一个对象时,你需要创建一个新的对象(或者将其拷贝一份),然后将 state 更新为此对象。 在 React 中,状态是不可变的(immutable)。React 不会深入比较对象内部的属性变化,而是通过引用是否变化 来判断是否需要更新组件。 Vue…
阅读全文事件处理函数还将捕获任何来自子组件的事件。通常,我们会说事件会沿着树向上“冒泡”或“传播”:它从事件发生的地方开始,然后沿着树向上传播。 如果你点击任一按钮,它自身的 onClick 将首先执行,然后父级 <div 的 onClick 会接着执行。 在 React 中所有事件都会传播,除了 onScroll,它仅适用于你附加到的 JSX 标签。 事件处理函数接收一个 事件对象 作为唯一的参数。按照…
阅读全文React 组件是常规的 JavaScript 函数,但 组件的名称必须以大写字母开头,否则它们将无法运行! 在看到标签时,小写为html标签,大写为自己的组件。 返回语句可以全写在一行上,但是,如果你的标签和 return 关键字不在同一行,则必须把它包裹在一对括号中。没有括号包裹的话,任何在 return 下一行的代码都 将被忽略!不过也要注意:()是(),<\</是<\</,括号只是用于包裹…
阅读全文在上一章我们学习了基础的react语法,现在我们了解一下企业级开发 安装一个构建工具,如 Vite、Parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能,提供本地开发的开发服务器,以及部署应用到生产服务器的构建命令。 使用命令npm create vite\@latest,选择React模板,即可创建React应用。 路由决定了当用户访问特定 URL 时显示的内容或页面。你需…
阅读全文当在 React 中调用 useState 提供的 状态更新函数时,React 会触发该组件的重新渲染。也就是说组件的主体部分会再次执行。 Vue在改变某个变量的状态时不会重新执行onMounted。虽然Vue 和 React 都是响应式框架,但它们的更新机制不同。React 是“重新执行组件函数”,而 Vue 是“依赖追踪+局部更新”。 重新渲染 ≠ 重新操作 DOM,React 重新渲染组件时…
阅读全文今天开坑React,本来想看原版文档,奈何英语水平有限。加之最近也许要面试,故先使用中文文档。 本文采用了与vue对照的方式进行对比学习,如果是熟悉vue的人学习起来会更好理解。如果你不了解vue,推荐去看官方文档,也很容易理解:[链接] 按照我的一点印像,react使用js函数return一个html标签,这就是react的组件 React 组件必须以大写字母开头,而 HTML 标签则必须是小写…
阅读全文分享一个好东西,可以在Linux上使用节点 原文:[链接]
阅读全文