React文档学习
文章平均质量分 96
大大咧咧40
这个作者很懒,什么都没留下…
展开
-
react之Effect的生命周期
组件可以挂载,更新和卸载每个Effect与周围组件有着独立的生命周期每个Effect描述了一个独立的同步过程们可以开始和停止在编写和读取Effect时,要独立地考虑每个Effect (如何开始和如何停止同步),而不是从组件的角度思考 (如何挂载,更新,卸载)在组件主体内声明的值是响应式的响应式值应该重新进行同步Effect,因为它们可以随着时间的推移而发生变化检查工具验证在Effect内部使用的所有响应式值都被指定为依赖项检查工具标记的所有错误都是合理的。原创 2024-05-26 22:21:54 · 420 阅读 · 0 评论 -
react之Effect的限制使用
如果你可以在渲染期间计算某些内容,则不需要使用Effect想要缓存昂贵的计算,请使用 useMemo 而不是 uesEffect想要重置整个组件树,请传入不同的key想要在prop变化时重置某些特定的state,请在渲染期间处理组件显示时就需要执行的代码应该放在Effect中,否则应该放在事件处理函数中如果你需要更新多个组件的state,最好在单个事件处理函数中处理当你尝试在不同组件中同步state变量时,请考虑状态提升。原创 2024-05-26 00:19:58 · 497 阅读 · 0 评论 -
react之Effect同步
与事件不同,Effect是由渲染本身,而非特定交互引起的。Effect允许你将组件与某些外部系统 (第三方API,网络等) 同步默认情况下,Effect在每次渲染 (包括初始渲染) 后运行如果 React 的所有依赖项都与上次渲染时的值相同,则将跳过本次Effect不能随意选择依赖项,他们是由Effect内部代码决定的。空的依赖数组 ([]) 对应于组件 “挂载”,即添加到屏幕上。仅在严格模式下的开发环境中,React会挂载两次组件,以对Effect进行压力测试。原创 2024-05-23 21:36:38 · 874 阅读 · 0 评论 -
react之refs与dom
ref是一种脱围机制,用于保留不用于渲染的值。ref是一个普通的JavaScript对象,具有一个名为 current的属性,你可以对其进行读取或设置你可以通过调用useRef Hook 来让react给你一个ref与state一样,ref允许你在组件的重新渲染之间保留信息与state不同,设置ref的current值不会触发重新渲染不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测Refs是一种通用概念,但大多数情况下你会使用它们来保存DOM元素你通过传递。原创 2024-05-22 21:57:05 · 1119 阅读 · 0 评论 -
react之Reducer和Context的联合使用
你可以将reducer和context结合,让任何组件读取和更新它的状态为子组件提供state 和 dispatch函数:创建两个context(一个用于state,一个用于dispatch函数)让组件的context使用reducer使用组件中需要读取的context你可以将所有传递信息的代码移动到单个文件来进一步整理组件你可以导出一个像可以提供 context 的组件。你也可以导出像useTasks和这样的自定义 Hook。原创 2024-05-13 08:51:59 · 717 阅读 · 0 评论 -
react之reducers
把 useState 转换成 useReducer:通过事件处理函数 dispatch actions;编写一个reducer函数,他接受传入的state和一个action,并返回一个新的state;使用useReducer 替换 useStateReducers 可能需要你写更多的代码,但这有利于代码的调试和测试Reducers必须是纯净的每个action 都描述了一个单一的用户交互使用 Immer 来帮助你在reducer里直接修改状态。原创 2024-05-10 22:17:22 · 1146 阅读 · 0 评论 -
对state进行保留和重置
只要在相同位置渲染的是相同组件,react就会保留statestate 不会被保存在JSX标签里。它与你在树中放置该JSX的位置相关联你可以通过为一个子树指定一个不同的key来重置它的state不要嵌套组件的定义,否则你会意外地导致state被重置。原创 2024-05-09 22:39:12 · 749 阅读 · 0 评论 -
react状态管理之state
声明式编程意味着为每个视图状态声明 UI 而非细致地控制 UI(命令式)。当开发一个组件时:写出你的组件中所有的视图状态。确定是什么触发了这些 state 的改变。通过useState模块化内存中的 state。删除任何不必要的 state 变量。连接事件处理函数去设置 state。如果两个 state 变量总是一起更新,请考虑将它们合并为一个。仔细选择你的 state 变量,以避免创建“极难处理”的 state。用一种减少出错更新的机会的方式来构建你的 state。原创 2024-05-08 22:49:11 · 984 阅读 · 0 评论 -
react之state深入浅出
设置 state 不会更改现有渲染中的变量,但会请求一次新的渲染。React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。要在一个事件中多次更新某些 state,你可以使用更新函数。你可以在state中存放任意类型的JavaScript值。到目前为止,你已经尝试过在state中存放数字,字符串和布尔值,这些类型的值在JavaScript中是不可变的,这意味着它们不能被改变或是只读的。你可以通过替换它们的值以触发一次重新渲染。从技术上讲,可以改变对象自身的内容。原创 2024-04-27 23:15:17 · 921 阅读 · 1 评论 -
react之初识state
当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。State 变量是通过调用useStateHook 来声明的。Hook 是以use开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。Hook 可能会让你想起 import:它们需要在非条件语句中调用。调用 Hook 时,包括useState,仅在组件或另一个 Hook 的顶层被调用才有效。useStateHook 返回一对值:当前 state 和更新它的函数。原创 2024-04-25 17:17:19 · 1005 阅读 · 0 评论 -
react之渲染与props
要传递 props,请将它们添加到 JSX,就像使用 HTML 属性一样。要读取 props,请使用解构语法。你可以指定一个默认值,如size = 100,用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props,但不要过度使用它!像这样的嵌套 JSX,将被视为Card组件的childrenprop。Props 是只读的时间快照:每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时,你可以设置 state。原创 2024-04-23 22:02:23 · 2063 阅读 · 0 评论 -
react之响应事件
你可以通过将函数作为 prop 传递给元素如来处理事件。必须传递事件处理函数,而非函数调用!,不是。你可以单独或者内联定义事件处理函数。事件处理函数在组件内部定义,所以它们可以访问 props。你可以在父组件中定义一个事件处理函数,并将其作为 prop 传递给子组件。你可以根据特定于应用程序的名称定义事件处理函数的 prop。事件会向上传播。通过事件的第一个参数调用来防止这种情况。事件可能具有不需要的浏览器默认行为。调用来阻止这种情况。原创 2024-04-24 11:19:27 · 1821 阅读 · 1 评论 -
react之组件与JSX
一直以来,创建网页时,Web 开发人员会用标签描述内容,然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。return (以下是构建组件的方法:前缀是一种JavaScript 标准语法(非 React 的特性)。它允许你导出一个文件中的主要函数以便你以后可以从其他文件引入它。原创 2024-04-21 20:55:55 · 1011 阅读 · 1 评论