react-hooks

努力的工作者
44 阅读4分钟

一. 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 回调函数

  2. 接受参数：

  • 参数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

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

const refContainer = useRef(initialValue);

  1. 返回值：返回一个可变的 ref 对象，返回的该 ref 对象在组件的整个生命周期内保持不变

  2. 返回可变的 ref 对象的 current 属性初始化值为 useRef 传入的参数值initialValue

作用：

  • 获取组件实例对象或 DOM 对象

  • 可以跨渲染周期保存数据

说明：

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