React 中的 UseState 和 UseEffect Hook

在 React 中，useState 和 useEffect 是两个基本的钩子，用于管理功能组件中的状态和处理副作用。

1.useState钩子

useState 钩子允许您向功能组件添加状态。它返回一个包含两个元素的数组：

1. 当前状态值。
2. 更新状态值的函数。

示例：

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

在此示例中：

• useState(0) 将计数状态变量初始化为 0。
• setCount 用于在单击按钮时更新状态。

2.useEffect钩子

useEffect 钩子允许您在组件中执行副作用，例如数据获取、订阅或手动更改 DOM。它需要两个参数：

1. 包含副作用逻辑的函数。
2. 可选的依赖项数组，用于确定效果何时运行。

示例：

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

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

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;

在此示例中：

• 每当计数发生变化时，useEffect 就会更新文档标题。
• 如果计数发生变化，效果会在每次渲染后运行，因为计数包含在依赖项数组中。
• 可选的清理函数在效果再次运行之前或组件卸载时运行，这对于清理订阅或计时器非常有用。

这两个钩子都有助于有效管理功能组件中的状态和副作用，使 React 开发更加简洁和强大。
.
.
.

让我们总结一下......
.
.
.

以下是 React 中 useState 和 useEffect 钩子的摘要：

使用状态钩子

• 用途：管理功能组件中的状态。
• 语法： const [state, setState] = useState(initialValue);
• 参数：
  • 初始值：初始状态值。
• 返回：
  • 包含两个元素的数组：
  • state：当前状态值。
  • setState：更新状态的函数。

用法示例：

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

使用效果钩子

• 用途：处理功能组件中的副作用，例如数据获取、订阅或手动 DOM 更新。
• 语法： useEffect(() => { /* 效果逻辑 */ }, [依赖项]);
• 参数：
  • 效果函数： 包含作为副作用运行的代码。
  • 依赖项数组（可选）： 更改时触发效果的依赖项列表。如果为空，则效果仅在初始渲染后运行一次。如果省略，效果将在每次渲染后运行。
• 清理函数（可选）：效果函数返回的函数，用于清理资源。

用法示例：

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

要点：

• useState 简化了功能组件中的状态管理。
• useEffect 处理副作用，并且可以选择自行清理。
• 两个钩子协同工作，在 React 中创建动态、有状态的功能组件。

以上是React 中的 UseState 和 UseEffect Hook的详细内容。更多信息请关注PHP中文网其他相关文章！