React Hook 入门：彻底了解 useState 和 useEffect

2024-02-16 15:55:54

React Hook 是 React 16.8 版本中引入的一项重要特性，它允许我们在函数组件中使用状态和其它 React 特性。在本文中，我们将介绍 React Hook 的入门知识，重点讲解 useState 和 useEffect 这两个最常用的 Hook。

什么是 React Hook？

React Hook 是一种特殊函数，它允许我们在函数组件中使用状态和其它 React 特性。函数组件是 React 中的一种组件类型，它与类组件不同，函数组件没有自己的 state 和生命周期方法。但是，通过使用 Hook，我们可以让函数组件具有与类组件类似的功能。

useState Hook

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

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

例如，我们可以使用 useState Hook 来管理一个计数器组件的状态：

import React, { useState } from 'react';

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

  const incrementCount = () => {
    setCount(count + 1);
  };

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

export default Counter;

useEffect Hook

useEffect Hook 用于在组件挂载、更新和卸载时执行某些副作用。它接受一个函数作为参数，该函数将在组件挂载时执行。如果第二个参数是一个空数组，则该函数只会在组件卸载时执行。如果第二个参数是一个非空数组，则该函数将在组件挂载时执行，并在数组中的每个值发生变化时再次执行。

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 组件挂载时执行
  }, []);

  useEffect(() => {
    // 组件挂载时执行，并在值发生变化时再次执行
  }, [value]);

  useEffect(() => {
    // 组件卸载时执行
    return () => {
      // 清理工作
    };
  }, []);

  return (
    <div>
      {/* ... */}
    </div>
  );
};

export default MyComponent;

例如，我们可以使用 useEffect Hook 来在组件挂载时获取数据：

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

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://example.com/data')
      .then(res => res.json())
      .then(data => setData(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {/* ... */}
    </div>
  );
};

export default MyComponent;