React非继承Component类中更新变量的方法咨询

嘿，你说的用const定义的应该是React的函数组件哦（不是类组件，类组件是用class关键字声明的）！这种场景下不用继承React.Component，React给我们准备了更轻便的Hook来处理可变变量，分两种常用场景给你说明：

一、需要触发UI更新的变量（状态） #

如果这个变量更新后需要让组件重新渲染、在页面上展示最新值，那必须用useState Hook，用法比类组件的state更简洁：

举个贴合你场景的示例代码：

import { useState } from 'react';

// 用const定义的函数组件
const MyComponent = () => {
  // 定义状态变量和对应的更新函数，初始值可以按需设置
  const [targetValue, setTargetValue] = useState('初始值');

  const updateValue = () => {
    // 调用更新函数设置新值，React会自动触发组件重新渲染
    setTargetValue('更新后的新值');
    // 如果新值依赖旧值，推荐用函数式更新，避免异步更新的问题：
    // setTargetValue(prevValue => `${prevValue} - 追加内容`)
  };

  return (
    <div>
      <p>当前值：{targetValue}</p>
      <button onClick={updateValue}>点击更新值</button>
    </div>
  );
};

export default MyComponent;

简单说下关键点：

• useState接收一个初始值，返回一个数组：第一个元素是当前状态值，第二个是专门用来更新状态的函数
• 只要调用这个更新函数，React就会重新渲染组件，页面上就能看到最新的变量值了

二、不需要触发UI更新的局部可变变量 #

如果你的变量只是在组件内部用来存个临时值，更新后不需要同步到页面上，那用useRef Hook更合适：

示例代码如下：

import { useRef } from 'react';

const MyComponent = () => {
  // 创建一个ref对象，用current属性存储可变值
  const tempValueRef = useRef('初始临时值');

  const updateTempValue = () => {
    // 直接修改current属性，不会触发组件重新渲染
    tempValueRef.current = '更新后的临时值';
    console.log('更新后的临时值：', tempValueRef.current);
  };

  return (
    <div>
      {/* 注意：这里的内容不会自动更新，因为组件没重新渲染 */}
      <p>临时值（不会自动更新）：{tempValueRef.current}</p>
      <button onClick={updateTempValue}>更新临时值</button>
    </div>
  );
};

export default MyComponent;

划重点：

• useRef创建的对象在组件整个生命周期里都会保持不变，current属性可以自由修改
• 修改current不会触发组件重新渲染，所以适合存那些不需要在UI上展示的可变数据

快速总结 #

• 变量需要影响页面展示 → 用useState
• 只是组件内部的临时可变值、不需要同步UI → 用useRef

内容的提问来源于stack exchange，提问作者tomphilps