react常用hooks

useState
useEffect
useContext
useCallback
useMemo
useRef

1. useState
   用于在函数组件中声明和管理状态
   initialState：状态的初始值，支持任何类型的数据（如数字、字符串、对象、数组等）。
   state：当前的状态值。
   setState：用来更新状态的函数。

const [state, setState] = useState(initialState);

2. useEffect

• 第一个参数：是一个函数，包含需要执行的副作用代码。
• 第二个参数（可选）：是一个依赖数组，用来控制副作用函数的执行时机。如果没有传递该数组，副作用将在每次组件渲染后执行；如果传递了数组，副作用只会在数组中的某个值发生变化时才执行。

useEffect(() => {
  // 副作用代码
}, [...dependencies]);

3. useContext
   能够在组件树中传递数据，而不需要通过 props 层层传递。
   可参考之前写过的这篇 https://www.jianshu.com/p/dfd5d2d0fe89

4. useCallback
   它返回一个 memoized（记忆化的）回调函数，只有在依赖项发生变化时才会重新创建该函数。
   我们可以避免每次渲染时都重新创建函数，从而减少不必要的组件渲染和性能开销。
   使用它 React 还需要维护缓存的回调函数，因此只有在组件渲染较为复杂或传递回调函数给多个子组件时才需要使用。

• memoizedCallback：返回的 记忆化 回调函数。
• () => {}：你希望记忆化的回调函数。
• [dependencies]：依赖项数组。当依赖项发生变化时，memoizedCallback 会重新创建，否则会保持旧的引用。

const memoizedCallback = useCallback(() => {
  // your callback function
}, [dependencies]);

• useCallback 用于缓存函数，返回一个记忆化的函数。
• useMemo 用于缓存计算结果，返回一个记忆化的值。

5. useMemo
   用于优化性能，可以确保函数只在必要时重新计算，而不是在每次渲染时都重新执行计算。
   应该只用于那些计算昂贵且有明确性能需求的场景。

• memoizedValue：返回的记忆化值，只有在依赖项变化时才会更新。
• () => {}：执行的计算逻辑。
• [dependencies]：依赖项数组。当数组中的某些依赖项发生变化时，useMemo 会重新执行计算。否则，它会返回上次计算的结果。

const memoizedValue = useMemo(() => {
  // 计算逻辑
  return value;
}, [dependencies]);

6. useRef
   主要用于访问和操作 DOM 元素以及存储可变的值。
   用来存储不希望引起组件重新渲染的可变数据。更新 ref.current 的值不会导致组件的重新渲染。
   如： 函数、上次的props或state

• initialValue: 初始值，useRef 会返回一个包含 current 属性的对象。初始值会作为 current 的初始值。如果没有提供初始值，默认会是 undefined。
• ref: useRef 返回的对象，包含一个 current 属性，可以直接访问 DOM 或存储数据

const ref = useRef(initialValue);

7. useLayoutEffect
   在所有的 DOM 更新和渲染完成后，同步执行，以便在绘制到屏幕之前对 DOM 进行操作。

• 第一个参数是一个回调函数，它会在组件渲染后同步执行。你可以在这个回调中进行 DOM 操作、测量 DOM 尺寸等。
• 第二个参数是 dependencies，它表示该副作用依赖的状态或 props。当这些依赖项发生变化时，副作用会重新执行。如果不传递依赖项数组，副作用将会在每次渲染时执行。

useLayoutEffect(() => {
  // 在这里执行副作用操作
}, [dependencies]);

• useLayoutEffect 与 useEffect 的区别
• 执行时机：
  useLayoutEffect 会在 DOM 更新后、浏览器绘制之前执行。这意味着它会在页面渲染之前阻止页面的显示，直到执行完毕。
  useEffect 会在浏览器绘制之后异步执行，也就是说它不会阻塞浏览器渲染，能提高渲染性能。
• 何时使用：
  useLayoutEffect：当你需要在浏览器绘制之前执行副作用（如测量 DOM、进行动画、强制布局等），以确保布局计算的准确性。
  useEffect：一般用于异步操作、数据请求、订阅等任务，它不会阻塞页面渲染。