Props
下面，我们来系统的梳理关于 Props 的基本知识点：
一、Props 基础概念
1.1 什么是 Props？
Props（Properties 的缩写）是 React 中组件之间传递数据的主要方式。它们是从父组件传递给子组件的只读数据，具有以下核心特性：
- 单向数据流：数据只能从父组件流向子组件
- 只读性：子组件不能直接修改接收到的 props
- 任意数据类型：可以传递字符串、数字、对象、数组、函数甚至 JSX
- 动态性：父组件可以随时更新传递给子组件的 props
1.2 Props 与 State 的区别
| 特性 | Props | State |
|---|---|---|
| 所有权 | 外部传入 | 组件内部创建 |
| 可变性 | 不可变（只读） | 可变（通过 setState） |
| 作用范围 | 父子组件间通信 | 组件内部状态管理 |
| 更新触发 | 父组件重新渲染 | setState 调用 |
| 初始化 | 由父组件设置 | 在构造函数中初始化 |
二、Props 基本用法
2.1 传递 Props
// 父组件
function ParentComponent() {const user = {name: 'Alice',age: 28,isAdmin: true};return (<div><ChildComponent username={user.name} userAge={user.age}isAdmin={user.isAdmin}onLogin={() => console.log('用户登录')}/></div>);
}
2.2 接收 Props
// 子组件 - 函数组件接收方式
function ChildComponent(props) {return (<div><h2>欢迎, {props.username}</h2><p>年龄: {props.userAge}岁</p>{props.isAdmin && <p>管理员权限</p>}<button onClick={props.onLogin}>登录</button></div>);
}// 更推荐的解构写法
function ChildComponent({ username, userAge, isAdmin, onLogin }) {return (<div><h2>欢迎, {username}</h2><p>年龄: {userAge}岁</p>{isAdmin && <p>管理员权限</p>}<button onClick={onLogin}>登录</button></div>);
}
2.3 默认 Props
// 类组件设置默认 Props
class Button extends React.Component {static defaultProps = {variant: 'primary',size: 'medium',disabled: false};render() {// ...}
}// 函数组件设置默认 Props
function Button({ variant, size, disabled, children }) {// ...
}Button.defaultProps = {variant: 'primary',size: 'medium',disabled: false
};// ES6 默认参数写法（更推荐）
function Button({ variant = 'primary', size = 'medium', disabled = false, children
}) {// ...
}
三、Props 高级用法
3.1 传递子元素 (Children Prop)
function Card({ title, children }) {return (<div className="card"><h2>{title}</h2><div className="card-content">{children}</div></div>);
}// 使用
<Card title="用户信息"><p>姓名: Alice</p><p>邮箱: alice@example.com</p><ProfileImage src="avatar.jpg" />
</Card>
3.2 传递组件作为 Props
function Layout({ header, sidebar, content }) {return (<div className="app-layout"><header>{header}</header><div className="main-container"><aside>{sidebar}</aside><main>{content}</main></div></div>);
}// 使用
<Layout header={<Header title="我的应用" />}sidebar={<NavigationMenu />}content={<Dashboard />}
/>
3.3 批量传递 Props
function UserProfile(props) {return (<div><Avatar {...props.avatar} /><UserInfo {...props.info} /></div>);
}// 使用
const userData = {avatar: {src: 'avatar.jpg',size: 100,alt: '用户头像'},info: {name: 'Alice',email: 'alice@example.com',joinDate: '2023-01-15'}
};<UserProfile {...userData} />
四、Props 验证
4.1 PropTypes 基础
import PropTypes from 'prop-types';function Product({ name, price, inStock }) {// ...
}Product.propTypes = {name: PropTypes.string.isRequired,price: PropTypes.number,inStock: PropTypes.bool,onAddToCart: PropTypes.func,details: PropTypes.shape({weight: PropTypes.number,dimensions: PropTypes.string}),tags: PropTypes.arrayOf(PropTypes.string)
};Product.defaultProps = {price: 0,inStock: false
};
4.2 常用 PropTypes 验证器
| 验证器 | 说明 |
|---|---|
PropTypes.array | 数组 |
PropTypes.bool | 布尔值 |
PropTypes.func | 函数 |
PropTypes.number | 数字 |
PropTypes.object | 对象 |
PropTypes.string | 字符串 |
PropTypes.element | React 元素 |
PropTypes.node | 可渲染节点（字符串、元素等） |
PropTypes.instanceOf(Class) | 类的实例 |
PropTypes.oneOf(['a', 'b']) | 枚举值 |
PropTypes.arrayOf(PropTypes.number) | 特定类型数组 |
PropTypes.shape({ ... }) | 特定形状的对象 |
五、Props 与 TypeScript
5.1 类型注解基础
interface UserCardProps {name: string;age: number;isAdmin?: boolean; // 可选属性onSelect: (userId: number) => void;
}function UserCard({ name, age, isAdmin = false, onSelect }: UserCardProps) {return (<div onClick={() => onSelect(1)}><h2>{name} {isAdmin && '(管理员)'}</h2><p>年龄: {age}</p></div>);
}
5.2 高级类型技巧
// 泛型组件
interface ListProps<T> {items: T[];renderItem: (item: T) => React.ReactNode;
}function List<T>({ items, renderItem }: ListProps<T>) {return (<ul>{items.map((item, index) => (<li key={index}>{renderItem(item)}</li>))}</ul>);
}// 使用
const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }
];<List items={users} renderItem={user => <span>{user.name}</span>}
/>
六、Props 设计模式
6.1 受控组件模式
function SearchInput({ value, onChange }) {return (<input type="text" value={value} onChange={e => onChange(e.target.value)} placeholder="搜索..." />);
}// 父组件
function SearchPage() {const [searchTerm, setSearchTerm] = useState('');return (<div><SearchInput value={searchTerm} onChange={setSearchTerm} /><SearchResults query={searchTerm} /></div>);
}
6.2 渲染属性模式 (Render Props)
class MouseTracker extends React.Component {state = { x: 0, y: 0 };handleMouseMove = (e) => {this.setState({ x: e.clientX, y: e.clientY });};render() {return (<div onMouseMove={this.handleMouseMove}>{this.props.render(this.state)}</div>);}
}// 使用
<MouseTracker render={({ x, y }) => (<p>鼠标位置: ({x}, {y})</p>
)} />
6.3 组件组合模式
function Form({ children, onSubmit }) {return (<form onSubmit={onSubmit} className="form">{children}</form>);
}function FormItem({ label, children, error }) {return (<div className="form-item"><label>{label}</label>{children}{error && <div className="error">{error}</div>}</div>);
}// 使用
<Form onSubmit={handleSubmit}><FormItem label="用户名" error={errors.username}><input value={username} onChange={e => setUsername(e.target.value)} /></FormItem><FormItem label="密码"><input type="password" value={password} onChange={e => setPassword(e.target.value)} /></FormItem>
</Form>
七、Props 性能优化
7.1 避免传递不必要 Props
// 反例：传递整个对象
function UserCard({ user }) {return (<div><h2>{user.name}</h2><p>{user.email}</p></div>);
}// 正例：仅传递需要的数据
function UserCard({ name, email }) {return (<div><h2>{name}</h2><p>{email}</p></div>);
}
7.2 防止引用变化导致重渲染
function Parent() {const [count, setCount] = useState(0);// 每次渲染都会创建新函数（不推荐）const handleClick = () => console.log('Click');// 使用 useCallback 优化（推荐）const memoizedHandleClick = useCallback(() => {console.log('Click');}, []);return <Child onClick={memoizedHandleClick} />;
}React.memo(Child);
7.3 使用 React.memo 优化
const Child = React.memo(function Child({ data }) {// 仅当 props 变化时重新渲染return <div>{data}</div>;
});// 自定义比较函数
const Child = React.memo(function Child({ items }) {// ...},(prevProps, nextProps) => {// 返回 true 表示不需要重新渲染return prevProps.items.length === nextProps.items.length;}
);
八、Props 最佳实践
-
命名规范：
- 使用 camelCase 命名 props
- 事件处理函数以
on开头（onClick、onChange） - 布尔属性以
is或has开头（isActive、hasError）
-
保持 Props 最小化：
- 只传递组件需要的数据
- 避免传递整个大对象
-
文档化 Props：
/*** 按钮组件* @param {string} variant - 按钮类型 (primary | secondary | danger)* @param {boolean} disabled - 是否禁用* @param {function} onClick - 点击事件处理函数* @param {ReactNode} children - 按钮内容*/ function Button({ variant, disabled, onClick, children }) {// ... } -
使用默认值：
- 为可选 props 提供合理的默认值
- 避免在组件内部处理 undefined
-
避免 Props Drilling：
- 对于深层嵌套组件，使用 Context API
- 考虑组件重构或状态管理库
九、常见问题与解决方案
9.1 Props Drilling（Props 钻取）
问题：多层组件传递 props
<App><Header user={user}><Nav user={user}><UserMenu user={user}><Avatar user={user} /></UserMenu></Nav></Header>
</App>
解决方案：
// 使用 Context API
const UserContext = createContext();function App() {return (<UserContext.Provider value={user}><Header /></UserContext.Provider>);
}function Avatar() {const user = useContext(UserContext);return <img src={user.avatarUrl} alt="Avatar" />;
}
9.2 修改 Props 的陷阱
错误做法：
function Child(props) {// 错误：直接修改 propsprops.count = 10;// 错误：修改对象属性props.user.name = 'Bob';
}
正确模式：
- 通过回调函数通知父组件修改
- 使用内部 state 派生自 props（慎用）
function Counter({ initialCount }) {// 使用 props 初始化 stateconst [count, setCount] = useState(initialCount);// ... }
9.3 异步 Props 问题
function UserProfile({ userId }) {const [user, setUser] = useState(null);useEffect(() => {fetchUser(userId).then(setUser);}, [userId]);// 处理加载状态if (!user) return <LoadingSpinner />;return <ProfileCard user={user} />;
}
十、实战案例
10.1 可复用表单组件
function FormField({ label, name, type = 'text', value, onChange,error,...props
}) {return (<div className="form-field"><label htmlFor={name}>{label}</label><inputid={name}name={name}type={type}value={value}onChange={onChange}{...props}/>{error && <div className="error">{error}</div>}</div>);
}// 使用
<FormFieldlabel="电子邮件"name="email"type="email"value={email}onChange={(e) => setEmail(e.target.value)}error={errors.email}placeholder="输入您的邮箱"
/>
10.2 高阶组件注入 Props
function withAuth(WrappedComponent) {return function(props) {const [user, setUser] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {fetchCurrentUser().then(user => {setUser(user);setLoading(false);});}, []);if (loading) return <Loading />;return <WrappedComponent {...props} user={user} />;};
}// 使用
const ProfilePageWithAuth = withAuth(ProfilePage);
总结
- Props 是 React 组件通信的基石：掌握 props 是构建可复用组件的基础
- 遵循单向数据流：数据从父组件流向子组件，子组件通过回调函数与父组件通信
- 类型安全至关重要：使用 PropTypes 或 TypeScript 确保 props 正确传递
- 合理设计组件接口：保持 props 简洁、明确，提供默认值和文档
- 性能优化意识：避免不必要的重新渲染，合理使用 React.memo 和 useCallback
- 高级模式应用：掌握渲染属性、组件组合等高级模式解决复杂问题
- 避免常见陷阱：不直接修改 props，妥善处理异步 props