docs: 增加react文档记录

docs/.vitepress/sibar.js

@@ -156,6 +156,10 @@ export function sidebarUsageFrame() {
           text: 'react@18.2.0',
           link: '/usage-frame/react/react@18.2.0'
         },
+        {
+          text: 'react@18.2.0文档',
+          link: '/usage-frame/react/react@18.2.0文档'
+        },
         {
           text: 'react-dom@18.2.0',
           link: '/usage-frame/react/react-dom@18.2.0'

docs/usage-frame/react/react@18.2.0.md

@@ -30,7 +30,7 @@
 - set函数仅更新下一次渲染的状态变量，即在调用该函数之后紧接着调用该状态变量，得到的值还是原来的值
 - 如果提供的新值和上一个相同（指的是引用相同，即内存中的地址），将跳过组件重渲染
 - 给组件传递一个key，key改变时，可以重置组件的状态（即进行初始化渲染）
-- 当更新一个对象/数组时，请进行整个替换（也就是引用也随之变更），而非使用不改变对象引用的方式（比如数组的push等、直接设置属性等）改变对象，不然屏幕可能不会更新
+- 当更新一个对象/数组时，请进行整个替换（也就是引用也随之变更，可使用展开语法复制对象和数组、concat添加、filter删除、slice截取、map等改变数组），而非使用不改变对象引用的方式（比如数组的push等、直接设置属性等）改变对象，不然屏幕可能不会更新。对于复杂的对象或数组，可以使用[`immer`](https://zh-hans.react.dev/learn/updating-arrays-in-state#write-concise-update-logic-with-immer)进行修改，让修改操作更加简洁
 - react执行的是批量状态更新策略，即调用set函数后不会立即执行更新，而是等待所有的事件处理函数（比如点击，换句话说，得等待set函数所处的块代码执行完毕）执行完毕后才会更新状态（也就是组件重渲染更新屏幕）。如果你想调用set函数后迫切的更新屏幕（访问dom），可以使用flushSync（影响性能，大多数时候都不用）
 - 在调用set函数的代码块中包括异步操作，若异步操作内部也包括state变量，变量的值还是之前的，react执行的是批量状态更新策略，不影响已经运行的事件处理程序中的变量的值（即使是异步的）
 - 若出现`too many re-renders`的错误，表明此时组件进行循环`渲染->设置状态（重渲染）-> 渲染`的循环等，通常情况是由于错误指定事件处理函数引起的(即`onClick={handleClick()}`)，正确的处理是`onClick={handleClick}`或`onClick={(e) => handleClick(e)}`。也可查看控制台的JavaScript调用堆栈

docs/usage-frame/react/react@18.2.0文档.md

@@ -0,0 +1,90 @@
+# react@18.2.0 doc
+
+## 工具
+
+- html2jsx: <https://transform.tools/html-to-jsx>
+
+## 基础
+
+react框架：nextjs（全栈框架）、remix（嵌套路由全栈框架）、Gatsby（支持cms）、expo（支持原生）
+
+使用：
+
+- react组件必须以大写字母开头，html标签必须是小写字母
+- react组件只支持单根节点，多节点可用Fragment组件包裹
+- react组件接收props对象作为其唯一参数
+- 不要在一个组件内部定义其他组件
+- 组件返回值可以全写在一行上，多行内容需用`()`包裹，否则return下一行之后的代码都将被忽略
+- 条件渲染同js，比如if，&&，三元运算符
+- 不想渲染任何内容，可返回null
+- 可将jsx赋值给变量
+- 对于列表，使用filter进行组件筛选，使用map进行组件转换，列表项需要使用key属性进行唯一标识
+- 若列表项返回多个节点，必须使用Fragment，而非其简写形式
+
+jsx语法：让你在js文件中书写类似html的标签
+
+- 只能返回一个根元素
+- 标签必须闭合
+- 大部分属性用驼峰式语法命名，不能包含`-`以及保留字。
+- 历史原因，`aria-*`, `data-*`以html格式书写的
+- 变量和js表达式使用`{}`括起来，比如属性`className={classObj}`, `{arr.map(i => <li/>)}`
+
+props：react使用props进行父子组件通信
+
+- props可进行解构`function App({name, age}) {}`
+- prop属性可指定默认值`function App({name = 'jade'}){}`
+- 组件内部接收props，可使用展开语法`...props`，避免一长串的代码
+- 使用组件时，嵌套的内容将作为children prop传入到组件内部
+
+纯粹的组件：
+
+- react假使编写的所有组件都是纯函数，即输入相同，返回的jsx也相同
+- 组件的渲染过程始终是纯粹的，不会改变在组件渲染之前就已经存在的任何对象/变量，这将变得不纯粹；但可更改在渲染时刚创建的变量
+
+事件：
+
+- 事件处理程序命名通常为`handleXxx`
+- 内联事件，直接在标签属性上用大括号包裹起来写普通/箭头函数定义
+- 将逻辑提取到外部，使用`onClick={handleClick}`或`onClick={() => handleClick()}`，不能用`onClick={handleClick()}`，这会立即执行，而非点击执行，因为jsx大括号内的代码都会立即执行
+- 通常会在父组件定义子组件的事件处理程序，这时可将它作为props传递到子组件中，按照惯例，事件处理程序prop用on开头
+- 确保为事件处理程序使用恰当的html标签，比如点击使用button而非div
+- 阻止事件传播（e.stopPropagation），捕获阶段事件（onClickCapture），阻止默认行为（e.preventDefault）都是使用js语法
+- 对于事件传播，可将绑定于父组件的事件作为props传给子组件，让子组件显示调用它
+- 事件处理程序不需要是纯函数
+
+state：
+
+- 局部变量，即组件内部使用的普通变量，在组件每次重渲染时，都是代码中定义好的值，无法随用户操作而变更值，同时也不会触发渲染
+- useState用于保存渲染期间的数据，更新时会触发渲染
+- 设置state时，只会在下一次渲染变更state的值，即当前时间节点上还是目前的值
+
+渲染和提交：
+
+- 请求和提供ui的过程：（触发渲染-> 渲染组件-> 提交到dom） -> 浏览器绘制
+- 触发渲染的原因：初次渲染、组件或其祖先组件的状态（比如state）发生变更
+- 渲染组件：初次渲染时，调用根组件，后续渲染，调用内部状态更新触发渲染的函数组件，这个过程是递归的
+- 渲染始终是一次纯计算：输入相同则输出也相同，只做渲染的事情，不去更改已存在的变量
+- 提交到dom：初次渲染，使用appendChild将创建的所有dom放在屏幕上，重渲染时仅更改有差异的地方的dom节点
+
+注意：
+
+- react和jsx是互相独立的
+- 将未经处理的对象作为文本内容使用会报错
+- 使用&&运算符时，左侧若是0，将返回0
+
+## 附录
+
+### 纯函数
+
+定义：
+
+1. 只负责自己的任务，不会修改在函数调用前存在的变量和对象
+2. 输入相同内容，输出总是一致的
+
+### 副作用
+
+定义：函数式编程大都依赖于纯函数，但某些事物在特定情况下不得不发生改变（比如更新屏幕、启动动画、更改数据等），这些统称为副作用。通俗来说，它们是额外发生的事情，与渲染过程无关
+
+react中，副作用通常属于事件处理程序，仅在执行操作时运行（而非渲染期间），故而无需是纯函数
+
+如果无法为副作用寻找到合适的事件处理程序，可调用useEffect将其附加到返回的jsx中，这会让react在渲染结束时执行它