React Hooks 用法大揭秘，助你轻松玩转 React 状态管理！

2023-10-02 03:53:05

React Hooks 是一种全新的 API，它允许我们在函数组件中使用状态和生命周期方法。这使得函数组件更加强大和灵活，并且更容易编写和维护。

useState

useState 钩子允许我们在函数组件中创建和更新状态。它接受一个初始状态作为参数，并返回一个包含当前状态和一个更新状态的函数的数组。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

在这个示例中，我们使用 useState 钩子创建了一个名为 count 的状态变量，并将其初始化为 0。然后，我们使用 setCount 函数来更新 count 的值。当用户点击按钮时，setCount 函数将 count 的值增加 1。

useEffect

useEffect 钩子允许我们在函数组件中执行副作用。副作用是指任何可以在组件生命周期中执行的操作，例如与 API 通信或设置计时器。

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

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

  useEffect(() => {
    console.log(`Count is now ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

在这个示例中，我们使用 useEffect 钩子来记录 count 的值每次更改时的情况。我们使用第二个参数 [] 来指定 useEffect 钩子应该在哪些情况下执行。在本例中，我们指定它应该在 count 更改时执行。

useLayoutEffect

useLayoutEffect 钩子与 useEffect 钩子非常相似，但它有一个主要区别：useLayoutEffect 钩子会在浏览器更新 DOM 之前执行，而 useEffect 钩子则会在浏览器更新 DOM 之后执行。

这使得 useLayoutEffect 钩子非常适合执行需要在 DOM 更新之前完成的操作，例如测量元素的大小或位置。

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

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

  useLayoutEffect(() => {
    console.log(`Count is now ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}