React组件中解构props可提升简洁性与可读性：函数组件推荐参数直接解构并设默认值；支持重命名避免冲突；可用剩余属性透传；类组件宜在render内解构。
在 React 组件中，用解构获取 props 是非常常见的写法，能让你的代码更简洁、可读性更强。核心就是把传入的 props 对象直接在函数参数或组件体内解构出需要的属性。
函数组件中直接在参数里解构
这是最推荐、最常用的方式。你不需要先接收整个 props 对象，而是直接从参数中解构出要用的字段：
function UserCard({ name, age, email, isActive = true }) {
return (
<div>
<h2>{name}</h2>
<p>年龄：{age}，邮箱：{email}</p>
<p>状态：{isActive ? '在线' : '离线'}</p>
</div>
);
}
- 解构时可以设默认值（如
isActive = true），避免undefined导致渲染异常 - 如果传入的 props 没有某个字段，解构后对应变量就是
undefined，加默认值更安全 - 不使用的 props 不用解构，也不会出现在作用域里，减少干扰
解构时重命名避免命名冲突
当 props 名和已有变量名重复，或想用更语义化的本地名，可以用别名解构：
function Button({ type: btnType, onClick: handleClick, children }) {
return (
<button type={btnType} onClick={handleClick}>
{children}
</button>
);
}
-
type: btnType表示把 props 中的type赋给本地变量btnType - 这样就能避开和原生
button.type或其他同名变量冲突
需要访问全部 props 时再解构剩余属性
有时你既要解构几个常用字段，又想把其他所有 props 透传给子元素（比如给 <div> 加上所有自定义 HTML 属性）：
立即学习“Java免费学习笔记（深入）”；
function Card({ title, children, className, ...restProps }) {
return (
<article className={`card ${className}`} {...restProps}>
<h3>{title}</h3>
{children}
</article>
);
}
-
...restProps会收集所有未被解构的 props 属性 -
{...restProps}再把这些属性展开传给底层 DOM 元素，适合做高阶封装 - 注意：剩余属性不能包含 React 特殊属性（如
key、ref），它们不会出现在props对象里
类组件中也可以解构，但通常在 render 里
类组件不支持在构造函数或参数中直接解构 this.props，但你可以在 render 方法内部解构，提升可读性：
class UserProfile extends React.Component {
render() {
const { name, avatar, bio, onFollow } = this.props;
return (
<div>
<img src={avatar} alt={name} />
<h3>{name}</h3>
<p>{bio}</p>
<button onClick={onFollow}>关注</button>
</div>
);
}
}
- 避免在每次 render 中重复写
this.props.xxx - 解构放在 render 开头，逻辑清晰，也方便加默认值或处理
