react如何接收数据
React 接收数据的常见方法
使用 props 传递数据
父组件通过 props 将数据传递给子组件。子组件通过 props 参数接收数据。
// 父组件
<ChildComponent data={someData} />
// 子组件
const ChildComponent = (props) => {
return <div>{props.data}</div>;
};使用状态管理（如 useState）
通过 useState Hook 在组件内部管理数据状态，适合组件私有数据。
const [data, setData] = useState(initialValue);
// 更新数据：setData(newValue);通过 Context API 共享数据
跨层级组件共享数据时，使用 createContext 和 useContext。
const DataContext = createContext();
// 父组件
<DataContext.Provider value={sharedData}>
<ChildComponent />
</DataContext.Provider>
// 子组件
const data = useContext(DataContext);从 API 获取数据（useEffect + fetch）
通过 fetch 或 axios 从后端接口获取数据，结合 useEffect 处理副作用。
const [data, setData] = useState([]);
useEffect(() => {
fetch('api/url')
.then(res => res.json())
.then(data => setData(data));
}, []);使用 Redux 或 Zustand 全局状态
复杂应用可通过 Redux 等库集中管理状态，通过 useSelector 获取数据。
// Redux 示例
const data = useSelector(state => state.data);选择依据
- 父子组件通信：优先用
props。 - 跨层级共享：使用
Context。 - 异步数据：
useEffect+fetch。 - 全局状态：考虑 Redux/Zustand。
