当前位置：首页 > React

react17如何声明state

2026-01-25 08:17:00React

在 React 17 中声明 state

React 17 仍然支持类组件和函数组件两种方式声明 state。以下是具体的实现方法：

类组件中声明 state

在类组件中，可以通过 this.state 初始化 state，并通过 this.setState 更新 state。

react17如何声明state

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: 'React 17'
    };
  }

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

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

export default MyComponent;

函数组件中声明 state

在函数组件中，可以使用 useState Hook 来声明和更新 state。

react17如何声明state

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('React 17');

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

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

export default MyComponent;

使用对象形式的 state

如果需要将多个 state 合并为一个对象，可以像以下示例操作：

import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState({
    count: 0,
    name: 'React 17'
  });

  const incrementCount = () => {
    setState({
      ...state,
      count: state.count + 1
    });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Name: {state.name}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default MyComponent;

使用函数式更新

在需要基于前一个 state 更新时，推荐使用函数式更新以避免竞态条件。

import React, { useState } from 'react';

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

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };

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

export default MyComponent;