React Hooks复习：进阶学习，让你的项目更便捷

2024-01-02 06:37:31

前言

React Hooks是React 16.8版本引入的一组新的API，用于在函数组件中使用状态和其他React特性，而无需编写类组件。Hooks的出现使React应用的开发更加简单和高效，也让函数组件变得更加强大。

useState Hook

useState Hook用于在函数组件中创建和更新状态。它接受一个初始状态值作为参数，并返回一个数组。数组的第一个元素是当前的状态值，第二个元素是更新状态值的函数。

例如，以下代码使用useState Hook创建了一个名为count的状态变量，并将其初始值设置为0：

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

要更新count的值，可以使用setCount函数。例如，以下代码将count的值增加1：

setCount(count + 1);

useState Hook还支持函数式更新。函数式更新允许您在更新状态值时使用前一个状态值。例如，以下代码将count的值增加1，但它使用函数式更新来确保count的值始终是正确的：

setCount((prevState) => prevState + 1);

useEffect Hook

useEffect Hook用于在组件挂载、更新和卸载时执行某些副作用。副作用是指对组件外部产生影响的操作，例如在DOM中添加或删除元素、发起网络请求或更新本地存储。

useEffect Hook接受两个参数：一个函数和一个依赖项数组。函数是在组件挂载、更新或卸载时执行的代码块。依赖项数组是一个包含影响函数执行的变量的数组。

例如，以下代码使用useEffect Hook在组件挂载时向服务器发送一个网络请求：

useEffect(() => {
  fetch("https://example.com/api/data")
    .then((response) => response.json())
    .then((data) => {
      setData(data);
    });
}, []);

依赖项数组为空，这意味着useEffect Hook只会在组件挂载时执行一次。

如果我们想在组件每次更新时都发送网络请求，我们可以将依赖项数组设置为[data]：

useEffect(() => {
  fetch("https://example.com/api/data")
    .then((response) => response.json())
    .then((data) => {
      setData(data);
    });
}, [data]);

进阶用法

useState和useEffect是两个最常用的Hooks，但还有很多其他的Hooks可以用于构建React应用。一些常用的Hooks包括：