react框架如何赋值
赋值方法
在React中，赋值操作通常涉及组件的状态（state）和属性（props）。React推崇不可变数据流，因此直接修改状态或属性是不推荐的。以下是常见的赋值方式：
状态赋值（State）
使用useState钩子或setState方法更新状态。状态更新是异步的，需通过函数式更新确保准确性。
const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1); // 函数式更新属性传递（Props） 父组件通过props向子组件传递数据，子组件通过解构或直接访问props接收。
function Parent() {
const data = "Hello";
return <Child message={data} />;
}
function Child({ message }) {
return <div>{message}</div>;
}表单输入赋值
使用受控组件管理表单输入值，通过onChange事件更新状态。
const [inputValue, setInputValue] = useState("");
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>对象或数组状态更新 需创建新对象/数组而非直接修改原值，以遵循不可变原则。
const [user, setUser] = useState({ name: "Alice", age: 25 });
setUser({ ...user, age: 26 }); // 合并更新Context API赋值
通过useContext钩子或Context.Provider传递全局数据。
const ThemeContext = createContext("light");
<ThemeContext.Provider value="dark">
<ChildComponent />
</ThemeContext.Provider>Ref赋值
通过useRef直接操作DOM元素或存储可变值（不触发渲染）。
const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus(); // 直接操作DOM注意事项
- 避免直接修改
state或props，始终使用更新函数（如setState）。 - 深层次对象更新时，考虑使用
immer等库简化不可变更新逻辑。 - 表单处理推荐使用受控组件，非受控组件仅在特定场景下使用。
