【问题标题】:Differences between not rendering a component from within the parent's render method and not rendering the component from its own render method?不从父级的渲染方法中渲染组件与不从自己的渲染方法渲染组件之间的区别?
【发布时间】:2017-07-19 05:26:08
【问题描述】:

我的直觉是,选择不从父级的 render 方法中渲染组件与选择不从其自己的 render 方法中渲染相同的组件有所不同;至少从幕后的角度来看,因为感知的最终结果是相同的。

有人可以解释是否确实存在差异以及它们是什么?

对不起,缺少代码示例,我会在有普通计算机可用时添加一些。

更新:

例如,从父组件的render 方法内部:

...
render() {
    return(
        <ParentComponent>
            {(this.state.renderSpecificChild) ? <SpecificChild /> : null}
            <SomeOtherChild />
        </ParentComponent>
    );
}
...

VS

从子组件的渲染方法内部

...
render() {
    return(
        {(this.props.renderSelf) ? <div></div> : null}
    );
}
...

当父级的render 方法看起来像这样时

...
render() {
    return(
        <ParentComponent>
            <SpecificChild />
            <SomeOtherChild />
        </ParentComponent>
    );
}
...

【问题讨论】:

    标签: performance reactjs components render


    【解决方案1】:

    这取决于你想要什么。如果您有可在其他地方重用的子组件并且需要进行非渲染检查,那么您可以将其放在子组件中,否则如果您不希望在应用程序的另一部分中为该子组件进行此检查,您会使其更具体,只需将其放在父级中即可。

    如果您目前没有这种情况,那么您将其放入哪个场景并不重要。如果您需要更改它,应该很容易在以后重构它。

    【讨论】:

    • 我明白了。然而,我的问题更多的是“幕后发生了什么,这两种方法在幕后有什么区别”?例如,组件的生命周期方法是否在一种情况下保存在内存中,而在另一种情况下不保存?我希望我澄清一点
    【解决方案2】:

    要回答我自己的问题,主要区别在于,当父级控制是否渲染子级时,而不是子级本身,组件会被卸载,并且在内部,React 会清理一切。如果孩子自己决定是否渲染某些东西,它的所有方法等都会保留在内存中。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-06-20
      • 2021-05-10
      • 1970-01-01
      • 2018-08-12
      • 2020-03-26
      • 2020-08-18
      • 1970-01-01
      • 2021-12-01
      相关资源
      最近更新 更多