react框架如何赋值
React 框架中的赋值操作
在 React 中，赋值操作通常涉及状态管理、属性传递和变量声明。以下是常见的赋值方式：
状态赋值（useState Hook）
使用 useState Hook 可以声明状态变量并更新其值：
const [count, setCount] = useState(0);
// 直接赋值
setCount(5);
// 基于前一个值赋值
setCount(prevCount => prevCount + 1);类组件中的状态赋值
在类组件中，使用 this.setState 方法更新状态：
this.setState({ count: 5 });
// 基于前一个状态赋值
this.setState(prevState => ({
count: prevState.count + 1
}));直接变量赋值
在函数组件或类组件中，可以直接声明和赋值变量：
let name = 'John';
const age = 25;属性传递（Props）
父组件通过属性向子组件传递值：
// 父组件
<ChildComponent name="Alice" age={30} />
// 子组件
function ChildComponent({ name, age }) {
return <div>{name} is {age} years old.</div>;
}引用赋值（useRef Hook）
使用 useRef 创建可变引用：
const inputRef = useRef(null);
// 赋值
inputRef.current = newValue;上下文赋值（Context）
通过 Context API 共享值：
const ThemeContext = createContext('light');
// 提供值
<ThemeContext.Provider value="dark">
<ChildComponent />
</ThemeContext.Provider>
// 消费值
const theme = useContext(ThemeContext);表单输入赋值
处理表单输入时，通常将输入值与状态绑定：
const [inputValue, setInputValue] = useState('');
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>注意事项
- 避免直接修改状态（如
this.state.count = 5），应使用setState或 Hook 的更新函数。 - 对于对象或数组的状态更新，确保使用不可变更新方式（如展开运算符
...或concat）。
