m0_62487693的博客

useSyncExternalStore() 外部数据源更新。- useLayoutEffect() 同步执行副作用。- usetranstion() 过渡更新。- useContext() 订阅获取上下文。- useEffect() 异步执行副作用。- useReducer() 订阅更新。- useCallback() 保存状态。- useState() 数据更新。- useRef() 元素组件获取。- useMemo() 派生新状态。

使用`useCallback()` 代替 `useRef()` 解决：由`useRef()`创建`ref对象`更新时，不会通知，即使使用useEffect也无效问题。>react中通过ref实行获取dom,或者子组件的dom,从而实现对子组件中内容的修改，函数式组件通过`useRef() fowardRef()` 来实现。>useRef作用返回一个可变的`ref`对象，其中`.current`返回初始化传入对象。> `callback ref`中ref值发生变化，会是通知的效果。

2.如果加入限定条件，上一次useEffect() 更新收集的记录数据，与当前的useEffect()更新值之间进行比较，也就说明当state，props更新时，callback都会执行，可以用于监听所有state，props。1.如果不穿限制条件（参二），每次苏渲染组件时候都会执行callback。* 当state和props 发生变化时，react做了什么工作？3.参数1： 回调函数 参数2：数组（可选项，也是限制条件）* 第一次打开浏览器时，react做了那些工作？函数组件重新编译，重新执行。

问题：当ref对象发生变化时候，useRef是不会通知的。即使使用了监听器也是无效的。* 需求: 监听chilEl当Child中ref变化时候，是否可以通知到App。* 结论：.current属性发生变更，不会引发重新渲染组件的。* callback ref 的ref值发生变化，会通知组件。* 使用useCallback 代替useRef。

实现：暴露给父组件部分属性和api。* 注意：上面两个api必须一起使用。2.监听childEl 当中ref的变化 并通知App。

总结：通过 useRef+forwardRef()，在父组件中使用ref；* 这样我们就可以将父创建的ref传递给子，子接受ref并绑定到dom元素上。* 问题：通过useRef() 无法直接从父组件中获取组件的dom?* 4: 父组件中使用useRef() 创建。* 3: 子组件中，给需要被获取dom绑定ref属性，并赋值回参二。* 5：父/子组件中，都可以获取子组件中的dom对象。* 就可以实现父中获取子中的dom。* 作用：创建一个React的节点。* 2：子组件中，回参二，是ref。

返回值：一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。* 注意：1：不能获取ref绑定的普通函数组件。* 作用：通过ref获取dom元素。* 实参：null或者对象。

组件## 概念> 由虚拟dom带有一定功能并且可复用的效果，就是组件## 特点- 1.低耦合- 2.可复用## 分类### 语法- 函数组件- 类组件### 功能- 受控组件- 非受控组件### 效果- ui组件- 页面组件## 三大属性### state> 表示组件内部私有的状态，为响应式数据，作用：用于控制组件内部的交互**注意：类组件和函数组件中state的创建/修改/读取方式是不一样的**#### 函数组件中state- 1.函数名大驼峰。

5.父组件：如果需要绑定页面上，重新创建一个状态，并在函数中使用setXXX更新状态值。3.子组件：在组件内部，满足条件时，触发函数，并传入实参（实参为当前组件私有状态）2.子组件：在组件中通过 props（可以使用{} 解析 ） 获取自定义属性。1.父组件：使用组件时，定义自定义属性，并赋值定义的函数。4.父组件：定义函数形参中接受实参。

【代码】react中prop。

【代码】react中模拟双向绑定。

*** useState() 是react中的 hooks函数* 作用：创建state状态* 参数：js任意类型数据* 返回值：数组* 数组[0] 存放响应式数据（state）* 数组[1] 修改响应式的函数* 将更新中的，数组[1]函数的实参，实现修改数组[0]的赋值* 注意：1.hooks函数只能在函数组件中使用，* 2.当页面中绑定的state状态发生更新时，组件会重新渲染，函数会重新执行。

arr[1](false) //意思是使用数组arr中第二个参数（即函数 将arr[0]的值 修改为 false。返回值：数组[0] 响应式状态值， 数组[1]是函数作用修改响应式状态 数组[0] 的赋值。注意：只能在函数组件内部使用。参数：js任意类型数据。作用：创建响应式状态。

【代码】react中监听。

【代码】react中jsx语法注意要点。

{str}

/ React.createElement(TagetNmae,attrObjdect,child) 作用：创建虚拟dom。当代码量过大是后，页面运行会迟钝，我们一般会在本地编译，然后运行编译后的js。> 与react相比较，react-dom优势是什么，推广jsx语法。-- 设置app 为react 项目的根元素 -->-- react 的核心库 -->// 解决方式: jsx 语法。- 1：为什么要学习react-dom。- 2: 如何使用-react-dom。-- js语法 -->

/ React.createElement(TagetNmae,attrObjdect,child) 作用：创建虚拟dom。// ReactDOM.render(虚拟dom,真实跟标签dom) 作用：将虚拟dom渲染到真实dom上。// react 是如何通过操作虚拟dom 减少操作真实dom的次数？// 虚拟dom 中属性比真实dom属性少很多。-- 设置app 为react 项目的根元素 -->// 比较虚拟dom和真实的有什么区别；1：react是什么?-- react 的核心库 -->