react如何声明变量
在 React 中声明变量的方式与 JavaScript 一致，但根据使用场景（组件内、全局、状态管理等）有不同的推荐方法。以下是常见的变量声明方式：
组件内局部变量
在函数组件或类组件内部，可以直接使用 let 或 const 声明局部变量，这些变量仅在当前渲染周期有效：
function MyComponent() {
const name = "React"; // 推荐使用 const 声明不可变值
let count = 0; // 使用 let 声明可能变化的值
return <div>{name}</div>;
}组件状态管理
需要响应式更新的变量应使用 React 的状态钩子（Hooks）：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 状态变量
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}类组件中的变量
类组件中可通过 this.state 管理状态变量，或直接定义实例属性：
class MyClassComponent extends React.Component {
state = { count: 0 }; // 状态变量
instanceVar = "Hello"; // 实例属性（非响应式）
render() {
return <div>{this.state.count}</div>;
}
}全局变量
跨组件共享的变量可通过上下文（Context）或全局对象实现，但不推荐滥用：
// 方式1：通过 Context 共享
const MyContext = React.createContext();
function App() {
return (
<MyContext.Provider value={{ globalVar: 123 }}>
<ChildComponent />
</MyContext.Provider>
);
}
// 方式2：全局对象（慎用）
window.globalConfig = { apiUrl: "https://example.com" };注意事项
- 避免直接修改状态（如
count = 1），始终使用setState或状态更新函数。 - 对于派生数据，可使用
useMemo缓存计算结果：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
以上方法覆盖了 React 中大部分变量声明场景，根据具体需求选择合适的方式即可。
