React函数组件开发利器——useState和useEffect

2023-09-30 19:45:42

useState

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

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

上面的代码定义了一个名为count的状态变量，并将其初始化为0。然后，它定义了一个名为setCount的函数，该函数用于更新count的值。

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

setCount(count + 1);

useEffect

useEffect钩子用于在组件生命周期中执行副作用。它接受一个函数作为参数，该函数将在组件挂载、更新或卸载时执行。

useEffect(() => {
  // 副作用
}, [dependencies]);

上面的代码定义了一个useEffect钩子，它将在组件挂载或更新时执行副作用。副作用是任何对组件外部产生影响的操作，例如发出网络请求或更新DOM。

dependencies参数是一个数组，它指定了useEffect钩子应该在哪些状态或属性发生变化时执行。如果dependencies数组为空，则useEffect钩子只会在组件挂载时执行。

在React函数组件中使用useState和useEffect

useState和useEffect钩子可以用来构建复杂的React应用程序。例如，以下代码演示如何使用useState和useEffect钩子来构建一个简单的计数器应用程序：

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

export default Counter;