解构赋值是ES2016特性,在处理无状态函数的props时很方便
下面两个例子是等价的:
const Greeting = props => <div>Hi {props.name}!</div>;
const Greeting = ({ name }) => <div>Hi {name}!</div>;
…允许收集对象所有剩下的属性到新的对象中
const Greeting = ({ name, ...props }) => <div>Hi {name}!</div>;
可以使用JSX扩展属性给当前组件添加props
const Greeting = ({ name, ...props }) => <div {...props}>Hi {name}!</div>;
避免传递非DOM属性到组合组件。解构可以轻松生成除了组件特有props之外的一个新的props
Avoid forwarding non-DOM props to composed components. Destructuring makes this very easy because you can create a new props object without component-specific props.