反应状态 - JavaScript

在 JavaScript 中，我们使用 state 来记录组件的状态 (state)。状态是组件内部状态的一个对象，当该状态变化时，组件就会被重新渲染。

创建状态

我们可以使用 useState hook 来创建一个 state:

import React, { useState } from 'react';

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

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

在这个例子中，我们创建了一个叫 count 的状态 (state)，它的初始值为 0。我们同时使用了 setCount 来更新状态。

使用状态

我们可以通过花括号来使用状态，例如：

function MyComponent() {
  const [name, setName] = useState('John');
  return <h1>Hello {name}!</h1>;
}

当状态 (state) 发生变化时，组件将自动重新渲染。

状态钩子 (hook)

状态钩子 (hook) 是一种特殊的函数，它可以在函数组件中使用状态 (state)。在 React v16.8 中，引入了一些状态钩子 (hook)，useState 就是其中之一。

我们可以使用多个状态钩子 (hook) 来管理多个状态。例如：

function MyComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(32);
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

在这个例子中，我们创建了两个状态 (state)：name 和 age。

总结

• 状态 (state) 是组件内部的状态对象。
• 我们使用 useState 钩子来创建和管理状态。
• 当状态 (state) 发生变化时，组件会被重新渲染。