具有shouldComponentUpdate与无状态组件的组件.性能？

Question

我知道无状态组件使用起来要舒服得多(在特定情况下),但由于你不能使用shouldComponentUpdate,这是否意味着组件将为每个props更改重新渲染？我的问题是,使用具有智能的shouldComponentUpdate的类组件比使用无状态组件更好(性能方面).

就性能而言,无状态组件是否是更好的解决方案？考虑这个愚蠢的例子:

const Hello =(props) =>(
       <div>
           <div> {props.hello}</div>
           <div>{props.bye}</div>
       </div>);

VS

class Hello extends Component{
    shouldComponentUpdate(nextProps){
        return nextProps.hello !== this.props.hello
    };
    render() {
        const {hello, bye} = this.props;
        return (
            <div>
               <div> {hello}</div>
               <div>{bye}</div>
           </div>
        );
    }
}

让我们假设这些组件都有2个道具,只有其中一个我们想要跟踪和更新(如果是常见的用例),使用无状态功能组件或类组件会更好吗？

UPDATE

在做了一些研究之后我同意明确的答案.尽管类组件(使用shouldComponentUpdate)的性能更好,但似乎简单组件的改进可以忽略不计.所以我的看法是这样的:

• 对于复杂组件,使用由PureComponent或Component扩展的类(取决于您是否要实现自己的shouldComponentUpdate)
• 对于简单组件使用功能组件,即使它意味着重新运行
• 尝试从最接近的类基本组件中减少更新量,以使树尽可能静态(如果需要)

Answer 1

我认为你应该阅读无状态功能组件和 shouldComponentUpdate #5677

\n\n

\n

对于复杂的组件，定义shouldComponentUpdate（例如纯渲染）通常会超过无状态组件的性能优势。文档中的句子暗示了我们计划的一些未来优化，即我们不会为无状态功能组件分配内部实例（我们将只调用该函数）。我们也可能不会继续持有道具等。微小的优化。我们不讨论文档中的细节，因为优化尚未实际实现（无状态组件为这些优化打开了大门）。

\n

\n\n

https://github.com/facebook/react/issues/5677#issuecomment-165125151

\n\n

\n

目前还没有对函数进行特殊的优化，尽管我们将来可能会添加此类优化。但目前，它们的表现与课堂完全一样。

\n

\n\n

https://github.com/facebook/react/issues/5677#issuecomment-241190513

\n\n

我还建议检查https://medium.com/missive-app/45-faster-react-function-components-now-3509a668e69f

\n\n

\n

为了衡量变化，我创建了这个基准，结果相当惊人！从仅仅将基于类的组件转换为函数式组件，我们获得了 6% 的加速。但通过将其作为简单函数调用而不是挂载，我们获得了约 45\xef\xb9\xaa 的总速度提升。

\n

\n\n

回答这个问题：这取决于。\n如果您有复杂/繁重的组件，您可能应该实现shouldComponentUpdate. 否则使用常规功能应该没问题。我不认为实现shouldComponentUpdate像你这样的组件Hello会有很大的不同，它可能不值得花时间实现。\n你还应该考虑PureComponent从Component.

\n