通过代码示例掌握React Hooks - useEffect、useState和useContext

2023-01-03 00:38:33

React Hooks 指南：理解 useEffect、useState 和 useContext

前言

React Hooks 是一款强大的工具，它允许您在函数组件中使用状态和生命周期方法。通过使用 Hooks，您可以编写更简洁、更具可维护性的 React 代码。在本文中，我们将深入探讨三个最常用的 React Hooks：useEffect、useState 和 useContext。

useEffect Hook

什么是 useEffect Hook？

useEffect Hook 允许您在组件挂载、更新或卸载时执行某些操作。它非常适合在组件挂载时获取数据、在卸载时清理计时器或事件监听器，以及在更新时更新状态。

用法示例

import React, { useEffect } from 'react';

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

  useEffect(() => {
    // 在组件挂载时获取数据
    fetch('https://example.com/data.json')
      .then(res => res.json())
      .then(data => {
        setCount(data.count);
      });
  }, []);

  return (
    <div>
      <h1>{count}</h1>
    </div>
  );
};

export default MyComponent;

useState Hook

什么是 useState Hook？

useState Hook 允许您在组件中创建和更新状态。它接受两个参数：

初始状态
更新状态的函数

用法示例

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default MyComponent;

useContext Hook

什么是 useContext Hook？

useContext Hook 允许您在组件中访问 Context 对象。这对于在组件之间共享数据非常有用。

用法示例

import React, { useContext } from 'react';

const MyContext = React.createContext({
  count: 0
});

const MyComponent = () => {
  const context = useContext(MyContext);

  return (
    <div>
      <h1>{context.count}</h1>
    </div>
  );
};

export default MyComponent;