react-hooks

Posted 2021-09-15 給自己一個微笑

一. useState【状态钩】

const [state,setState] = useState(initState) // 函数返回值state命名可以【任意】命名

1. 接受参数： state 的初始值
2. 返回值：当前 state 值及异步更新 state 的函数 setState( )
3. 如果setState的值进行判断赋值时,那不到实时的值,需要配合useRef来使用

说明：

1. state 只在 首次渲染 时被创建且赋予初始值 initState【该初始值不仅仅局限于对象】
2. useState( ) 函数 可以定义多个，用来保存相应的状态数据信息
3. 调用更新函数 setState( ) 时，函数组件将 重新渲染，并赋予 state 最新的值

二. useEffect【效果钩(副作用函数)】

useEffect(() => {// 在此可以执行任何带副作用操作
  return () => { // 在组件卸载前执行
  // 在此做一些收尾工作, 比如清除定时器/取消订阅等
 }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

1. 接受参数：

• 参数1：执行操作逻辑函数
• 参数2：更新 effect 依赖项参数数组

1. 可选清除订阅机制：操作逻辑函数返回函数中执行清除操作（见下说明第2点）

性能优化：【控制effect的执行（依赖项数组参数）】

1. 当依赖项数组 未设置 时，默认每次渲染会更新后执行 effect
2. 当依赖项参数数组 为空 时，只在初次渲染后执行 effect
3. 当 effect 中依赖项参数数组中的值渲染时未发生变化时，则 effect 不会执行更新替换操作

说明：

1. 默认情况下，React 会在 每次渲染后调用 副作用函数 —— 包括 第一次渲染的时候【 DOM渲染-调用副作用函数-页面展示最新数据信息】
2. useEffect 可以通过 返回一个函数 来指定如何 清除 相关的副作用操作，便于将添加和移除订阅的逻辑放在一起
3. 每次我们重新渲染，默认都会生成 新的 effect，替换掉之前的【避免因没有处理更新逻辑而导致常见的 bug】
4. effect 的清除阶段在 每次重新渲染时都会执行，而不是只在卸载组件的时候执行一次

三. useCallback（主要用于处理对于一些数据更新引起其他组件不必要的渲染)

const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

1. 返回值：返回一个 memoized 回调函数

1. 接受参数：

• 参数1:：内联函数
• 参数2：依赖项数组

说明：

1. 只有当依赖项发生改变时，内联回调函数中的值才会得到最新值。否则，内联回调函数中的变量都是之前时侯的值。
2. 当传入空数组时，该返回的 memoized 回调函数一直不会发生改变。

四. useMemo【优化避免在每次渲染时都进行高开销的计算逻辑】

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a,    b]);

1. 返回值：返回一个 memoized 值
2. 接受参数：

• 参数1:：“创建”函数
• 参数2：依赖项数组

说明：

1. 若没有提供依赖项，useMemo 在每次渲染时都会计算新的值
2. 若提供依赖项数组，当某个依赖项改变时才会重新计算 memoized 值
3. 不要在该“创建”函数内部执行与渲染无关的操作【如副操作等适合使用在其它 hook 中的逻辑】
   五. useRef
   const refContainer = useRef(initialValue);
4. 返回值：返回一个可变的 ref 对象，返回的该 ref 对象在组件的整个生命周期内保持不变
5. 返回可变的 ref 对象的 current 属性初始化值为 useRef 传入的参数值initialValue

作用：

• 获取组件实例对象或 DOM 对象
• 可以跨渲染周期保存数据

说明：

1. 当 ref 对象内容发生变化时，useRef 并不会通知你
2. 变更 .current 属性不会引发组件重新渲染
3. useRef的值不能直接用于页面数据渲染,需要和useState配合使用
4. 想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现、