将props展平传到DOM上
当我们将展平(spread)的props传入子组件时我们便引入了风险, 因为我们可能往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对于对象使用的是浅比较