React 状态 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 React 状态存储随时间变化的数据，以及控制组件的行为。

React 状态简介

状态是随时间变化的数据。

通常，React 组件具有控制其行为的状态。为了管理组件的状态，您使用 React 状态系统。

以下展示了在 React 组件中定义状态步骤

首先，从 react 库中导入 useState 函数

import { useState } from 'react';Code language: JavaScript (javascript)

其次，使用组件中的 useState() 函数定义状态

const App = () => {
  const [state, setState] = useState(0);
  // ...
};Code language: JavaScript (javascript)

useState() 函数返回一个包含两个变量的数组

状态 (state)。
用于更改状态的函数 (setState)。

由于 useState() 函数返回一个包含两个元素的数组，我们可以使用数组解构将返回值分配给变量。

按照惯例，如果状态是 name，那么设置状态的函数就是 setName。

0 是组件初始化时状态的默认值。

如果状态是一个数组，您可以将默认值设置为一个空数组 []。类似地，如果状态是一个对象，您可以将状态的默认值设置为一个空对象 {}。

第三，使用 setState() 函数更改状态

setState(newValue);Code language: JavaScript (javascript)

在 React 中，您不能像这样直接更改状态

state = newValue;Code language: JavaScript (javascript)

而是，您使用 setState() 函数更改状态

setState(newValue);Code language: JavaScript (javascript)

使用 setState() 函数更改状态。永远不要通过直接修改其值来更改状态。

当状态发生变化时，React 将通过执行创建组件的函数来重新渲染组件。

如果您在不使用 setState() 函数的情况下直接修改状态，React 将无法重新渲染组件，这将导致意外的行为。

通常，当您与组件交互（例如单击按钮）时，组件的状态会发生变化。为了处理 React 中的事件，您使用 React 事件系统。

计数器应用程序

我们将构建以下计数器 React 应用程序

如果您单击 + 按钮，数字将递增。如果您单击 - 按钮，数字将递减。

设置新项目

首先，打开终端并运行 npx create-react-app 创建计数器应用程序

npx create-react-app counterCode language: JavaScript (javascript)

其次，导航到 counter 项目目录

cd counterCode language: JavaScript (javascript)

第三，删除项目目录下 src 目录中的所有文件。

最后，在 src 目录中创建 index.js 和 App.js 文件。

index.js 文件显示 App 组件
App.js 文件存储 App 组件。

index.js

index.js 文件在屏幕上显示 App 组件

import ReactDOM from 'react-dom/client';
import App from './App.js';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

App.js

import { useState } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <>
      <header>
        <h1>Counter</h1>
      </header>
      <main>
        <p>{counter}</p>
        <div>
          <button type="button" onClick={increment}>
            -
          </button>
          <button type="button" onClick={decrement}>
            +
          </button>
        </div>
      </main>
    </>
  );
};

export default App;Code language: JavaScript (javascript)

它是如何工作的。

首先，从 react 库中导入 useState 函数

import { useState } from 'react';Code language: JavaScript (javascript)

其次，创建 App 组件

const App = () => { 
   // ...
}Code language: JavaScript (javascript)

第三，为 App 组件定义一个名为 counter 的状态

const [counter, setCounter] = useState(0);Code language: JavaScript (javascript)

我们将计数器的默认值设置为零。

第四，定义两个处理点击事件的函数

const increment = () => setCounter(counter + 1);
const decrement = () => setCounter(counter - 1);Code language: JavaScript (javascript)

increment() 函数将在单击增加按钮时执行，而 decrement() 函数将在单击减少按钮时执行。

第五，将 decrement() 函数连接到减少按钮 (-) 的 onClick 事件，并将 increment() 函数连接到增加按钮 (+) 的 onClick 事件。此外，在 <p> 标签中显示计数器状态。

return (
  <>
    <header>
      <h1>Counter</h1>
    </header>
    <main>
      <p>{counter}</p>
      <div>
        <button type="button" onClick={decrement}>
          -
        </button>
        <button type="button" onClick={increment}>
          +
        </button>
      </div>
    </main>
  </>
);Code language: JavaScript (javascript)

最后，导出 App 组件

export default App;Code language: JavaScript (javascript)

为了使代码更加简洁，您可以在 onClick 属性中直接使用箭头函数，而不是定义两个额外的函数 increment() 和 decrement()

import { useState } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <header>
        <h1>Counter</h1>
      </header>
      <main>
        <p>{counter}</p>
        <div>
          <button type="button" onClick={() => setCounter(counter - 1)}>
            -
          </button>
          <button type="button" onClick={() => setCounter(counter + 1)}>
            +
          </button>
        </div>
      </main>
    </>
  );
};

export default App;Code language: JavaScript (javascript)

为 App 组件设置样式

首先，在 src 目录中创建一个名为 App.css 的文件，其中包含以下代码

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > p {
  font-size: 5rem;
  color: gray;
}

main > div {
  display: flex;
  gap: 1rem;
}

h1 {
  color: lightgray;
}

button {
  padding: 1rem;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f9dc5c;
}
Code language: JavaScript (javascript)

其次，将 App.css 文件导入到 App.js 文件中

import { useState } from 'react';
import './App.css';

// ....Code language: JavaScript (javascript)

第三，运行应用程序并单击减少和增加按钮查看效果

npm run

摘要

使用 useState() 函数创建一个状态和一个更改状态的函数。
始终使用 setState() 函数更改状态。
当组件的状态发生变化时，React 会重新渲染组件。

本教程是否有帮助？