diff --git a/docs/usage-frame/react/react@18.2.0.md b/docs/usage-frame/react/react@18.2.0.md index 8a5a564..99ef57a 100644 --- a/docs/usage-frame/react/react@18.2.0.md +++ b/docs/usage-frame/react/react@18.2.0.md @@ -2,11 +2,36 @@ ## hook +### useState + +定义:`const [state, setState] = useState(initialState)` + +定义说明: + +1. initialState:即变量state的初始值 + - 可以是任意的值,包括函数 + - 对于函数,必须是无参数的纯函数,会将该函数的运行结果作为state的初始值 + - 初始化完成之后,该值就无作用了 +2. 返回值:该函数返回一个由两个值组成的数组 + - state:在首次渲染时,也就是initialState + - set函数(setState):更新state的函数,无返回值,在更新时同时触发组件重渲染 + - setState的参数:可以是一个值,也可以是一个纯函数`prev => cur`(根据之前的state计算出现在的state) + +注意: + +- hook只能在组件的顶层或自己的hook中调用,不能用于循环或条件语句中 +- set函数参数若是依据之前状态计算的表达式(比如a+1),若连续调用多次,则实际上就只调用了一次(批量状态更新策略的缘故);若参数是函数(比如a => a+1),连续调用多次,实际也是调用多次 +- set函数仅更新下一次渲染的状态变量,即在调用该函数之后紧接着调用该状态变量,得到的值还是原来的值 +- 如果提供的新值和上一个相同,将跳过组件重渲染 +- 当更新一个对象/数组时,请进行整个替换(也就是引用也随之变更),而非只是改变对象的属性 +- react执行的是批量状态更新策略,即调用set函数后不会立即执行更新,而是等待所有的事件处理函数(比如点击,换句话说,得等待set函数所处的块代码执行完毕)执行完毕后才会更新状态(也就是组件重渲染更新屏幕)。如果你想调用set函数后迫切的更新屏幕(访问dom),可以使用flushSync(影响性能,大多数时候都不用) +- 在开发且严格模式下,将两次调用初始化函数,用于找出意外的不纯性 + ### useEffect 定义:`useEffect(setup, dependencies?)` -参数: +定义说明: 1. setup: 处理 effect 的函数,选择性返回一个清理函数 cleanup - 在组件被添加到 dom 时,将运行 setup @@ -63,7 +88,9 @@ function Page({ url, shoppingCart }) { 定义:`useId()` -返回值:返回一个唯一的字符串 ID +定义说明: + +1. 返回一个唯一的字符串 ID 注意: