react如何声明变量
在React中声明变量的方式取决于变量的用途（如状态管理、组件间共享等）和组件的类型（函数组件或类组件）。以下是常见的变量声明方法：
使用 useState 声明状态变量
在函数组件中，通过 useState Hook 声明响应式状态变量。当变量值变化时，组件会重新渲染。
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0); // 声明状态变量count，初始值为0
}使用 useRef 声明可变引用
useRef 创建的变量在组件重新渲染时保持引用不变，适合存储与渲染无关的可变值或DOM引用。
import { useRef } from 'react';
function Example() {
const intervalRef = useRef(null); // 声明一个可变引用
}类组件中的状态变量
在类组件中，通过 this.state 声明状态变量，并通过 this.setState 更新。
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 }; // 声明状态变量
}
}普通变量声明
在组件内部直接通过 const、let 或 var 声明普通变量，但注意这些变量不会触发重新渲染。
function Example() {
const message = 'Hello'; // 普通常量
let temporaryValue = 0; // 普通变量
}上下文变量（Context）
通过 React.createContext 声明全局共享的变量，跨组件层级传递数据。
const ThemeContext = React.createContext('light'); // 声明上下文变量注意事项
- 状态变量：需要触发UI更新的数据应使用
useState或类组件的state。 - 引用变量：避免直接修改
useRef的.current属性，除非明确不需要重新渲染。 - 作用域：普通变量的作用域仅限于当前渲染周期，每次渲染会重新初始化。
