react的hooks笔记

React Hooks 是 React 16.8 版本引入的一个重要特性，它允许你在不编写 class 的情况下使用 state 以及其他 React 特性。Hooks 提供了一种更直接的方式来使用 React 的特性，如状态管理、副作用、上下文（Context）、引用（Refs）等，使得函数组件的功能更加强大和灵活。

以下是一些基本和常用的 React Hooks：

基本 Hooks

1. useState

   • 用于在函数组件中添加状态。
   • 示例：const [count, setCount] = useState(0);

2. useEffect

   • 用于在函数组件中执行副作用（例如，数据获取、订阅或手动修改 DOM）。
   • 示例：useEffect(() => { document.title = \You clicked ${count} times`; });`

3. useContext

   • 用于让你在函数组件中访问 React 的 Context。
   • 示例：const value = useContext(MyContext);

额外的 Hooks

1. useReducer

   • 用于状态逻辑复杂时替代 useState，接收一个形式为 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。
   • 示例：const [state, dispatch] = useReducer(reducer, initialArg, init);

2. useCallback

   • 返回一个记忆化的回调函数。
   • 示例：const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

3. useMemo

   • 返回一个记忆化的值。
   • 示例：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4. useRef

   • 用于获取 DOM 元素的引用，或者存储任何可变值。
   • 示例：const myRef = useRef(initialValue);

5. useImperativeHandle

   • 用于在使用 ref 时自定义暴露给父组件的实例值。
   • 示例：useImperativeHandle(ref, () => ({focus: () => { myRef.current.focus(); }}), [myRef]);

6. useLayoutEffect

   • 其作用和 useEffect 相似，但它在所有的 DOM 变更之后同步调用，可以用来读取 DOM 布局并同步重新渲染。
   • 示例：useLayoutEffect(() => { /* 更新 DOM */ });

7. useDebugValue

   • 可用于在 React 开发者工具中显示自定义的 hook 标签。
   • 示例：useDebugValue(isOnline ? 'Online' : 'Offline');

Hooks 提供的是一种使你的组件更为纯净和逻辑清晰的方式，通过组合这些 Hooks，可以构建出复杂且易于管理的组件。它们改变了 React 组件的编写方式，使得功能更加模块化，代码更加简洁。