将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对于对象使用的是浅比较

参考资料:

• React Design Patterns and best practices by Michele Bertoli.
• In React, children are just props: Kent C. Dodds’ Tweet