React 中的 useState 和 setState 是如何运作的？

2023-12-01 07:10:56

useState 和 setState 的基本原理

在 React 中，状态是一个对象，它包含了组件的数据。当组件的状态发生变化时，React 将重新渲染该组件。

useState 和 setState 是两个用于管理状态的函数。useState 用于声明组件的状态，而 setState 用于更新组件的状态。

useState 的语法如下：

const [state, setState] = useState(initialState);

其中，state 是组件的状态，setState 是更新组件状态的函数，initialState 是组件的初始状态。

setState 的语法如下：

setState(newState);

其中，newState 是组件的新状态。

useState 和 setState 在函数式组件中的使用

在函数式组件中，可以使用 useState 和 setState 来管理组件的状态。

例如，以下是一个使用 useState 和 setState 来管理计数器状态的函数式组件：

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

useState 和 setState 在类组件中的使用

在类组件中，可以使用 this.state 和 this.setState 来管理组件的状态。

例如，以下是一个使用 this.state 和 this.setState 来管理计数器状态的类组件：

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default Counter;

useEffect 钩子

useEffect 钩子允许我们在组件渲染后执行某些操作。

例如，以下是一个使用 useEffect 钩子来在组件渲染后将计数器状态保存到本地存储中的函数式组件：

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

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

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;