react 无状态组件 如何赋值
无状态组件赋值方法
无状态组件（Stateless Functional Component）本身是纯函数，不维护内部状态。若需要动态数据，可通过以下方式实现：
父组件传递props 父组件通过props向无状态组件传递数据，当父组件状态更新时，无状态组件会重新渲染：
const ChildComponent = (props) => <div>{props.value}</div>;
class ParentComponent extends React.Component {
state = { value: 0 };
render() {
return <ChildComponent value={this.state.value} />;
}
}使用Hooks转换 将无状态组件改为函数组件并使用useState Hook管理状态：
import { useState } from 'react';
const StatefulComponent = () => {
const [value, setValue] = useState(0);
return <div onClick={() => setValue(v => v+1)}>{value}</div>;
};通过ref转发 结合forwardRef和useImperativeHandle实现外部控制：
const ChildComponent = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
updateValue: (newVal) => console.log(newVal)
}));
return <div>{props.value}</div>;
});
// 父组件通过ref调用方法
parentRef.current.updateValue(123);上下文传递 通过useContext Hook获取全局状态：
const ValueContext = createContext();
const ChildComponent = () => {
const { value, setValue } = useContext(ValueContext);
return <div>{value}</div>;
};注意事项
- 无状态组件设计初衷是作为纯展示组件，若需复杂交互建议改为class组件或使用Hooks
- 直接修改props属性会违反React单向数据流原则
- 性能敏感场景应配合React.memo进行优化
