react钩子函数

在 React 中，钩子函数（Hooks）是在函数式组件中引入状态和其他 React 特性的方法。以下是一些常见的钩子函数：

1.  useState ：用于在函数式组件中添加状态。它返回一个数组，其中第一个元素是当前状态值，第二个元素是用于更新状态的函数。

javascript格式：

import React, { useState } from'react';

function MyComponent() {

  const [count, setCount] = useState(0);

 

  const increment = () => {

    setCount(count + 1);

  };

 

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={increment}>Increment</button>

    </div>

  );

}

2.  useEffect ：用于处理副作用，比如数据获取、订阅事件、手动修改 DOM 等。它接受一个回调函数和一个依赖数组作为参数。

javascript格式：

import React, { useState, useEffect } from'react';

 

function MyComponent() {

  const [data, setData] = useState(null);

 

  useEffect(() => {

    fetch('https://example.com/api/data')

    .then(response => response.json())

    .then(setData);

  }, []);

 

  return (

    <div>

      {data && <p>{data}</p>}

    </div>

  );

}

3.  useContext ：用于在函数式组件中访问上下文（Context）提供的值。

4.  useReducer ：类似于  useState ，但更适合处理复杂的状态逻辑。

5.  useCallback ：用于缓存函数，以避免不必要的重新创建。

6.  useMemo ：用于缓存计算结果，只有当依赖项发生变化时才重新计算。

钩子函数使函数式组件能够具备类组件的功能，同时使代码更简洁、可维护和可复用。