react 函数组件的生命周期有哪些

在 React 中，函数组件原本没有生命周期方法，因为它们是无状态的。然而，随着 React 16.8 版本的引入，Hooks 的出现使得函数组件可以具有类组件类似的生命周期功能。以下是使用 Hooks 时函数组件可能涉及的生命周期方法：

1. useState:

   • 作用： 用于在函数组件中添加状态。
   • 用法： const [state, setState] = useState(initialState);

2. useEffect:

   • 作用： 用于处理副作用操作，例如数据获取、订阅、手动操作DOM等。
   • 用法：

     useEffect(() => {
       // 副作用操作
       return () => {
         // 在组件卸载时执行的清理操作
       };
     }, [dependencies]);
     

3. useLayoutEffect:

   • 作用： 类似于 useEffect，但在浏览器 layout（布局）阶段之后同步执行。
   • 用法： useLayoutEffect(() => {}, [dependencies]);

4. useMemo:

   • 作用： 用于在渲染期间进行性能优化，缓存计算结果。
   • 用法： const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

5. useCallback:

   • 作用： 用于在渲染期间缓存回调函数，以防止它们在每次渲染时重新创建。
   • 用法： const memoizedCallback = useCallback(() => { /* callback */ }, [dependencies]);

6. useContext:

   • 作用： 用于访问 React 上下文。
   • 用法： const contextValue = useContext(MyContext);

7. useReducer:

   • 作用： 用于处理复杂的状态逻辑，替代 useState。
   • 用法：

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

8. useRef:

   • 作用： 创建一个可变的 ref 对象，其 .current 属性可以在渲染期间被赋值。
   • 用法： const myRef = useRef(initialValue);

这些 Hooks 使得函数组件具有了更丰富的生命周期特性，允许你在组件渲染和更新的不同阶段执行逻辑。每个 Hook 都有其特定的用途，根据需要选择使用。使用这些 Hooks 可以更方便地处理函数组件的状态、副作用和性能优化。