React 中 props 的最常用用法精选+useContext

✅ React 最常用 props 用法 10 例

✅ 1. 传递字符串 / 数字 / 布尔值

function UserCard({ name, age, isVip }) {return (<div>{name} - {age} - {isVip ? 'VIP' : '普通用户'}</div>);
}<UserCard name="张三" age={18} isVip={true} />

✅ 2. 传递函数（事件）

function Button({ onClick }) {return <button onClick={onClick}>点我</button>;
}<Button onClick={() => alert('你好！')} />

✅ 3. 传递 children（嵌套内容）

function Layout({ children }) {return <div className="layout">{children}</div>;
}<Layout><p>这是页面内容</p>
</Layout>

✅ 4. 解构 props

function Welcome({ name }) {return <h1>欢迎 {name}</h1>;
}

✅ 5. 设置默认值

function Title({ text = "默认标题" }) {return <h2>{text}</h2>;
}<Title /> // 显示“默认标题”

✅ 6. 传递数组 / 对象

function List({ items }) {return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;
}<List items={['苹果', '香蕉']} />

✅ 7. props 展开传递（...props）

function Input(props) {return <input {...props} />;
}<Input type="text" placeholder="请输入..." />

✅ 8. props 类型校验（开发时用）

import PropTypes from 'prop-types';function User({ name }) {return <div>{name}</div>;
}User.propTypes = {name: PropTypes.string.isRequired,
};

✅ 9. 使用函数+参数（如事件传参）

function Item({ id, onDelete }) {return <button onClick={() => onDelete(id)}>删除</button>;
}<Item id={1} onDelete={(id) => console.log('删除', id)} />

✅ 10. 父传子 + 子组件回调

function Child({ onLogin }) {return <button onClick={onLogin}>登录</button>;
}function Parent() {const handleLogin = () => console.log("登录成功！");return <Child onLogin={handleLogin} />;
}

✅ 补充：ref 转发（略高阶）

const Input = React.forwardRef((props, ref) => (<input ref={ref} {...props} />
));function App() {const ref = React.useRef();return (<><Input ref={ref} /><button onClick={() => ref.current.focus()}>聚焦</button></>);
}

✅ 小结：最常见的 props 类型

useContext —— 它是 React 中用于跨组件传递数据的一个非常重要的方式，属于“替代 props 多层传递”的方案。

useContext 和 props 的关系、区别、使用场景与完整例子，并结合 props 的理解一并讲清楚。

✅ React 中 useContext 与 props 的配合与区别

🔍 一句话理解

• props：父 → 子逐层传递，显式、灵活但繁琐。

• context + useContext：全局/跨层传递，适合状态共享，如主题、语言、用户登录信息等。

✅ 1. useContext 基本使用步骤

🔧 第一步：创建 Context

import { createContext } from "react";const UserContext = createContext(null);

🔧 第二步：提供 Provider，在顶层注入值

function App() {return (<UserContext.Provider value={{ name: "张三", isVip: true }}><Page /></UserContext.Provider>);
}

🔧 第三步：在任意子组件中使用 useContext 获取值

import { useContext } from "react";function Page() {const user = useContext(UserContext);return <div>你好，{user.name}，VIP：{user.isVip ? "是" : "否"}</div>;
}

✅ 2. useContext vs props：区别对比

✅ 3. useContext + props 混用

const ThemeContext = createContext("light");function Button({ label }) {const theme = useContext(ThemeContext);return <button className={`btn-${theme}`}>{label}</button>;
}function App() {return (<ThemeContext.Provider value="dark"><Button label="点击我" /></ThemeContext.Provider>);
}

• label 是 props 传递的内容

• theme 是 context 提供的“全局数据”

二者结合用是常见写法。

✅ 4. useContext + props 高级配合场景举例

示例：显示用户名称并支持外部传递自定义 greeting

const UserContext = createContext({ name: "匿名用户" });function Welcome({ greeting = "你好" }) {const user = useContext(UserContext);return <h1>{greeting}，{user.name}</h1>;
}function App() {return (<UserContext.Provider value={{ name: "小红" }}><Welcome greeting="欢迎回来" /></UserContext.Provider>);
}

✅ 5. 注意事项

• 不推荐把所有数据都放在 context 中，会导致过度渲染。

• 用 context 的时候，推荐拆小组件 + memo 优化。

• 可以结合 useReducer + useContext 实现简易状态管理（类 Redux）。

✅ 总结一下