如何在 React 中使用状态（State）

翻滚的胖子
2023-09-06 10:56:43
前端技术
JavaScript Java

如何在 React 中使用状态（State）

React 是一个流行的 JavaScript 库，用于构建用户界面。在 React 中，我们可以使用状态（State）来管理组件的数据。

什么是状态（State）

状态是组件中的一个数据对象，用于存储和管理组件的数据。当状态发生变化时，React 会自动重新渲染组件。

在函数组件中使用状态

在函数组件中，可以使用 useState 钩子函数来创建和使用状态。

import React, { useState } from 'react';

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

  return (
    
      Count: {count}
      
    
  );
}

export default App;

上述代码中，我们使用 useState 创建了一个名为 count 的状态，并使用 setCount 函数来更新状态的值。当点击按钮时，会触发 setCount 函数，并将 count 的值加 1。

在类组件中使用状态

在类组件中，可以通过继承 React.Component 类来创建和使用状态。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      
        Count: {this.state.count}
        
      
    );
  }
}

export default App;

上述代码中，我们在类组件的构造函数中初始化了一个名为 count 的状态，并通过 setState 方法来更新状态的值。当点击按钮时，会触发 setState 方法，并将 count 的值加 1。