优化渲染 React 组件依赖于 props答案

【问题标题】：Optimize render React Components depends on props优化渲染 React 组件依赖于 props
【发布时间】：2018-07-01 04:53:44
【问题描述】：

我有一个组件，它的渲染取决于我传递给它的道具。以前我使用逻辑运算符 OR，但是当更多的 props 看起来很难看时，我使用 Array.prototype.some 方法将所有这些转换为数组。你知道如何做得更好或一些最佳实践吗？

之前：

<Wrapper>
{(props1 || props2 || props3 || props4) && <Component/>}
</Wrapper>

之后：

<Wrapper>
{[props1, props2, props3, props4].some(x => x) && <Component/>}
</Wrapper>

【问题讨论】：

【解决方案1】：

根据道具的传递方式，您可以使用传播操作员

<Wrapper>
{...this.props.someArray.some(x => x) && <Component/>}
</Wrapper>

这个问题没有唯一的解决方案，但是您可以使用 Redux（及其替代品）通过全局存储来管理组件的全局渲染。如果您更关心必须使用道具数组进行渲染，那么最好查看其他数据结构，例如地图。

React 哲学试图推动可重用组件是可能的。最好的方法是尽可能使用无状态组件，并在一个智能父组件中处理所有的渲染逻辑。所以也许看看把逻辑放在父组件中。

【讨论】：