如何更新状态以重新渲染 ReactJS 中的组件？

react 中的 useState() 钩子允许我们声明一个在重新渲染周期中持续存在的状态变量。如果我们想要重新渲染组件，那么我们可以通过调用 setState()函数来轻松实现，该函数是通过解构调用 useState() 钩子返回的数组而获得的。每当我们使用 setState() 方法更新状态时，它都会重新渲染当前组件及其子组件。

句法：

const [state, setState] = useState(initialState)

当我们调用 setState函数时，它会收到最新的状态快照。然后我们可以在 setState()函数中使用它并返回我们想要更新新状态值的新值。

句法：

setState((latestState) => {
    // code logic
    return newState;
})

项目设置

要创建新的反应项目，请在命令行上使用以下命令

npx create-react-app name_of_project

运行此命令后，将创建一个新项目，您的项目结构将如下所示。

App.js

import { useState } from 'react';
  
function App() {
  const [counter, setCounter] = useState(0);
  
  const handleIncrease = () => {
    setCounter((prev) => prev + 1);
  };
  
  const handleDecrease = () => {
    setCounter((prev) => prev - 1);
  };
  
  console.log('Rendering!!!');
  
  return (
    

      
         decrease
      
       {counter} 
      
         increase
      
    
  );
}
  
export default App;

运行应用程序的步骤：要启动您的应用程序，请在命令行上使用以下命令。

npm start

输出：打开浏览器并转到http://localhost:3000 ，您将看到以下输出。

解释：当我们点击增加或减少按钮时，handleIncrease或handleDecrease函数被调用。在这两个函数中，我们使用 setState()函数更新状态，因此我们的 App 组件再次呈现并在控制台上打印一条消息。