react 备忘.md.18022871

useState

useState 是 React 中一个基本的钩子（Hook），用于在函数组件中添加状态。这个钩子让你能够在不编写类组件的情况下保持组件的内部状态。

useCallback

useCallback 是 React 的一个钩子（Hook），它返回一个记忆化（memoized）的回调函数。这个钩子在某些场景下非常有用，特别是当你需要传递回调函数给优化过的子组件时，或者当回调函数依赖于组件的状态和属性时。

为什么使用 useCallback
当你将一个回调函数作为 prop 传递给子组件时，如果这个函数在每次父组件渲染时都创建一个新的引用，那么子组件可能会进行不必要的重新渲染。为了防止这种情况，你可以使用 useCallback 来记住回调函数，这样只有当函数的依赖发生变化时，函数才会重新创建。

基本用法
useCallback 接受两个参数：一个是创建函数的内联函数，另一个是依赖项数组。它的基本用法如下：

import React, { useCallback } from 'react';

function MyComponent({ someProp }) {
  // 使用 useCallback 记住回调函数
  const memoizedCallback = useCallback(
    () => {
      // 这里是你的回调函数的逻辑
      doSomething(someProp);
    },
    [someProp], // 依赖数组
  );

  // 使用 memoizedCallback ...
}

在这个例子中，memoizedCallback 仅在 someProp 发生变化时重新创建。如果 someProp 在渲染之间保持不变，即使 MyComponent 重新渲染，memoizedCallback 也会保持相同的引用。这对于避免因为传递了新的回调函数实例而导致子组件不必要的渲染是非常有用的。

注意事项
过度使用 useCallback 可能会导致性能问题。记住函数也是有成本的，因为它需要在内存中保持函数的引用。所以，只在有明确性能优化需求时使用它。

在依赖数组中正确地指定所有外部依赖项是非常重要的。如果你错过了任何依赖项，你可能会遇到使用陈旧变量的问题。

useCallback 通常与 React.memo 配合使用，后者用于记住组件本身，以避免不必要的渲染。

总的来说，useCallback 是一个用于优化 React 应用性能的强大工具，但应谨慎使用，以确保它实际上对性能有所帮助。

useLayoutEffect

useLayoutEffect 是 React 的一个钩子（Hook），与 useEffect 非常相似，但它在组件生命周期中的调用时机不同。useLayoutEffect 和 useEffect 都允许你在函数组件中执行副作用，但它们的主要区别在于它们执行副作用的时间点。

useLayoutEffect 的特点和用途
执行时机：useLayoutEffect 在 DOM 更新完成后立即同步执行，但在浏览器绘制之前。这意味着你可以在浏览器绘制之前读取 DOM 布局并同步地做出更改，这对于处理 DOM 布局和动画非常有用。

防止闪烁：由于 useLayoutEffect 是在浏览器绘制之前执行的，因此它可以用于在视觉上修改 DOM 之前进行计算，以避免视觉上的闪烁或不连贯。

和 useEffect 的比较：与 useEffect 相比，useLayoutEffect 发生在更新生命周期的更早阶段。如果你的副作用涉及到 DOM 的布局或者修改，可能会需要 useLayoutEffect 来保证同步更新，避免闪烁问题。但对于不涉及 DOM 的场景，一般推荐使用 useEffect，因为它不会阻塞浏览器的绘制过程，有助于提升性能。

注意事项

虽然 useLayoutEffect 在某些场景下是必需的，但它应该谨慎使用，因为如果处理不当，可能会导致性能问题。因为它会在每次组件渲染后同步执行，可能会延迟浏览器的绘制过程。
在服务器端渲染（SSR）中，由于没有 DOM，useLayoutEffect 会导致警告。在这种情况下，如果可能，最好使用 useEffect。