将props展平传到DOM上

当我们将展平（传播）的属性设置子组件时，我们会引入风险，因为我们可能会往 HTML 标签上添加它不支持的属性。

坏实践

下面这个例子会在 DOM 元素上增加一个该元素本身不支持的属性flag。

const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = (props) => (<div {...props}>Test</div>);

良好实践

如果将 HTML DOM 元素需要接受的 props 分离出来再展开，会是一种更安全的做法。

const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
const Spread = (props) => (<div {...props.domProps}>Test</div>);

或者我们也可以使用...rest去过滤掉那些HTML DOM不支持的属性。

const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = ({ flag, ...domProps }) => (<div {...domProps}>Test</div>);

需要注意的是

在这种情况下，当我们使用了PureComponent的时候，即使domProps没有变化的时候，组件还是会被重新渲染。因为PureComponent对于对象使用来说比较浅