react如何声明变量
在React中声明变量的方式取决于变量的用途和作用域。以下是几种常见的方法：
使用useState声明状态变量
在函数组件中，可以使用useState钩子声明状态变量。状态变量在组件重新渲染时会保留其值。
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0); // 声明状态变量count，初始值为0
return <div>{count}</div>;
}使用useRef声明可变引用
useRef用于声明一个可变引用，其值在组件重新渲染时不会丢失，且变更不会触发重新渲染。
import React, { useRef } from 'react';
function Example() {
const inputRef = useRef(null); // 声明一个引用变量
return <input ref={inputRef} />;
}直接在组件内声明普通变量
在函数组件内部直接声明的变量会在每次渲染时重新初始化。
function Example() {
const message = 'Hello'; // 普通变量，每次渲染都会重新声明
return <div>{message}</div>;
}使用let或const声明模块级变量
在组件外部声明的变量是模块级变量，其作用域为整个模块。
const globalVar = 'Global'; // 模块级变量
function Example() {
return <div>{globalVar}</div>;
}类组件中的实例变量
在类组件中，可以通过this声明实例变量，这些变量在组件的生命周期内持续存在。
class Example extends React.Component {
instanceVar = 'Instance'; // 实例变量
render() {
return <div>{this.instanceVar}</div>;
}
}根据需求选择合适的变量声明方式：
- 需要响应式更新时使用
useState； - 需要跨渲染保存值但不触发更新时使用
useRef； - 仅在渲染周期内使用的变量可直接声明；
- 跨组件共享的变量可声明为模块级变量。
