为什么在 React 中使用 useState 而不是仅仅使用变量-js教程-PHP中文网

为什么在 react 中使用 usestate 而不是仅仅使用变量

你有没有想过为什么我们在 react 中使用 usestate 而不仅仅是变量？让我们用一个简单的反例来探讨这个概念。

一个简单的计数器示例

想象我们有一个带有两个按钮的基本计数器：一个用于增加计数，一个用于减少计数。如果我们使用 usestate 创建这个计数器，它就可以完美地工作。但是，如果我们尝试仅使用常规变量，则它不会按预期工作。

import react, { usestate } from 'react';

function counter() {
  // using usestate to create a state variable
  const [count, setcount] = usestate(0);

  return (
    
      count: {count}
      
      
    
  );
}

export default counter;

什么是 usestate？

usestate 是 react 中的一个钩子，可让您向功能组件添加状态。状态就像组件用来记住事物并随着时间的推移更新它们的存储器。

为什么变量不起作用

使用变量不起作用的原因是 react 不会像使用 usestate 管理的状态那样跟踪常规变量的更改。当你点击增加或减少按钮时，usestate 让 react 知道状态已经改变。然后 react 重新渲染组件并更新计数。

老年康养健身协会网站源码1.7.2

老年康养健身协会源码是基于易优cms开发，适合企业进行老年康养业务使用。程序内核为Thinkphp5.0开发，后台简洁，为老年康养企业而设计，这是一套安装就能建站的程序，不定期更新程序BUG，更新网站功能。我们提供的不仅是模板这么简单，我们还提供程序相关咨询、协助安装等服务。默认不包含小程序插件，需要另外单独购买插件。模板安装步骤 1、请将安装包ZIP上传到你的网站根目录，在

下载

但是，对于常规变量，react 不知道这些变化，因此它不会更新计数。

import React from 'react';

function Counter() {
  // Using a regular variable
  let count = 0;

  const increase = () => {
    count += 1;
  };

  const decrease = () => {
    count -= 1;
  };

  return (
    
      Count: {count}
      
      
    
  );
}

export default Counter;