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 类型
| 类型 | 用途 | 示例 |
|---|---|---|
| string | 展示文字内容 | title="标题" |
| number | 计数、评分等 | count={5} |
| boolean | 控制显示/开关 | isOpen={true} |
| function | 绑定事件 | onClick={() => {}} |
| children | 嵌套组件内容 | <Comp>内容</Comp> |
| array | 列表/选项 | items={[1, 2, 3]} |
| object | 配置项、用户信息等 | user={{ name: '张三' }} |
| ...props | 展开传递给 HTML 元素 | <button {...props}>按钮</button> |
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：区别对比
| 项目 | props | useContext |
|---|---|---|
| 数据传递方式 | 父组件手动一层一层传递 | 提供一次，全局可用 |
| 灵活性 | 更灵活，每个组件单独定义 | 更全局，统一管理 |
| 代码复杂度 | 嵌套层级多时变复杂 | 跨层更简单，避免“prop drilling” |
| 场景 | 大多数局部传值场景 | 全局状态，如登录用户、主题、权限、多语言等 |
| 性能影响 | 精细控制每一层渲染 | 变更会导致所有消费组件重新渲染（需 memo 优化） |
✅ 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）。
✅ 总结一下
| 方式 | 说明 |
|---|---|
| props | 用于组件直接传递数据，一层层传 |
| useContext | 用于全局或跨层组件数据共享（主题/用户/语言） |
| 混合使用 | 最常见写法：context 提供环境，props 控制行为 |