如何在ReactJS中组成父子组件以最大程度地减少重新渲染?

时间:2018-10-17 18:50:55

标签: javascript reactjs

我只使用没有Flux或Redux的ReactJS。 App组件存储状态并定义onClick,onChange事件等的处理程序。 为了尽量减少通过组件树的数据传递,我尝试将组件作为道具传递,例如

<Parent 
    childone={<ChildOne 
        some_prop={this.state.a}
        some_prop_2={this.state.b}
        childtwo={<ChildTwo some_prop={this.state.c} />}
    >}
/>

渲染功能如下

render() {
    return (
        <div>
            <span>lorem</span>{this.props.childone}<span>ipusm</span>{this.props.childtwo}
        <div>

    );
}

这有点奏效,但我认为这是错误的方法。 如果ChildOne是React.PureComponents,则浅比较将无法进行,因为childtwo属性并不简单,并且会触发重新渲染。

我应该如何在ReactJS中组成父子组件以最小化重新渲染?

0 个答案:

没有答案