React

以下是 React 提供的一些常见的 Hooks。请注意，React 生态系统可能会有新的更新，因此建议查阅React 官方文档以获取最新信息。

1. useState:

   • 用于在函数组件中添加状态。它返回一个状态变量和一个更新函数，可以通过更新函数来改变状态。

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

2. useEffect:

   • 用于在组件渲染后执行副作用操作，例如数据获取、DOM 操作等。类似于类组件的生命周期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount。

   useEffect(() => {
     // Effect code
     return () => {
       // Cleanup code (optional)
     };
   }, [dependencies]);
   

3. useContext:

   • 用于在函数组件中访问 React 上下文。

   const contextValue = useContext(MyContext);
   

4. useReducer:

   • 用于在组件中管理复杂的状态逻辑。它返回当前状态和一个 dispatch 函数，通过 dispatch 函数可以发送 action 来更新状态。

   const [state, dispatch] = useReducer(reducer, initialState);
   

5. useCallback:

   • 用于缓存回调函数，避免在每次渲染时都创建新的回调函数。

   const memoizedCallback = useCallback(() => {
     // Callback code
   }, [dependencies]);
   

6. useMemo:

   • 用于缓存计算结果，避免在每次渲染时都重新计算。

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

7. useRef:

   • 创建一个可变的 ref 对象，该对象的 current 属性可以保存任意可变值。

   const myRef = useRef(initialValue);
   

8. useImperativeHandle:

   • 用于在父组件中自定义暴露给子组件的实例值。

   useImperativeHandle(ref, () => ({
     // Custom methods or properties
   }), [dependencies]);
   

这些 Hooks 使得在函数组件中可以更方便地处理状态、副作用、上下文等方面的逻辑，而无需使用类组件。请注意，Hooks 的使用可能随着 React 的版本更新而有所变化，因此查阅最新的官方文档是获取最准确信息的方法。