为你的 React 项目赋能：巧用 state 属性管理组件内部状态！

2023-09-27 02:08:42

React 的 state 属性简介

React 中，每个组件都有一个 state 对象，用于管理组件的内部状态。state 对象存储了组件的当前状态，当状态发生变化时，React 会重新渲染组件。这意味着你可以通过改变组件的 state 对象来控制组件的显示内容。

常见的 state 属性应用场景

处理用户输入 ：React 中可以通过事件处理程序来监听用户输入，如点击、输入或选择等。当用户进行输入时，你可以通过更新组件的 state 对象来响应用户的输入。
组件生命周期 ：React 组件在从出生到死亡的过程中会经历一系列的生命周期。这些生命周期方法允许你执行一些特定的操作，例如在组件挂载或卸载时进行一些清理工作。
React Hooks ：React Hooks 是一种新的 API，允许你以函数式组件的形式编写 React 组件。React Hooks 中提供了useState() 和 useEffect() 等钩子函数，可以直接访问和修改组件的 state 对象。

React state 属性的应用实例

使用 state 属性处理用户输入

import { useState } from "react";

const MyComponent = () => {
  const [input, setInput] = useState("");

  const handleChange = (event) => {
    setInput(event.target.value);
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleChange} />
      <p>You entered: {input}</p>
    </div>
  );
};

export default MyComponent;

这段代码演示了如何使用 state 属性处理用户输入。当用户在文本框中输入内容时，handleChange() 函数会被调用，该函数将文本框中的值设置给 state 对象中的 input 属性。每次 state 对象中的 input 属性发生变化时，组件都会重新渲染，并显示用户输入的内容。

使用 state 属性管理组件生命周期

import { useState, useEffect } from "react";

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

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

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

export default MyComponent;

这段代码演示了如何使用 state 属性管理组件的生命周期。useEffect() 钩子函数会在组件挂载时运行，并且每当 count 状态发生变化时都会再次运行。useEffect() 钩子函数中的第二个参数是一个数组，它告诉 React 在哪些状态发生变化时才重新运行该钩子函数。在这个例子中，useEffect() 钩子函数只会在 count 状态发生变化时重新运行。