reactive 变量赋值

在响应式编程中，我们可以使用 Reactive 变量来存储数据，并且在变量的值发生变化时自动更新所有依赖该变量的组件或方法。React 中常用的 Reactive 变量有 useState 和 useReducer。

使用 useState 定义一个 Reactive 变量：

import { useState } from 'react';

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

  // ...

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

在上面的代码中，我们使用 useState 方法定义了一个名为 count 的 Reactive 变量，并将其初始值设为 0。然后在组件中使用这个变量，并通过 setCount 方法来更新变量的值。

使用 useReducer 定义一个 Reactive 变量：

import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // ...

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Click me
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Click me
      </button>
    </div>
  );
}

在上面的代码中，我们使用 useReducer 方法定义了一个名为 state 的 Reactive 变量，并将其初始值设为 initialState。然后我们定义了一个 reducer 函数，用于根据不同的 action 更新 state 变量的值。最后在组件中使用 state 变量，并通过 dispatch 方法来触发 reducer 函数来更新变量的值。