将对象传递给子组件的最佳方法

Question

非常有趣的是 -

之间的性能存在差异

<Child data={{...// some props here}}/>

和

render() {
    const data = {...}
    return <Child data={data}/>
}

我读到了关于功能的内容。最好替换内联函数 从：

<button
    onClick={() => {
        ...
    }}
/>

要：

handleClick = () = {...}

...

<button
    onClick={this.handleClick}
/>

那么传递物体呢？

Answer 1

render() {
    const data = {...}
    return <Child data={data}/>
}

data应该在render()之外，因为当某些状态发生变化时，render()方法将被撤回，data将被反复设置。因此，对于性能，最好在render()

之外声明它

Answer 2

如果对象不是从state或props派生而且始终是常量，那么最好在render方法之外声明它，以避免每次调用render方法时将值赋给数据。

相比之下，为了将对象传递给组件，两个选项（内联和分配给变量）在性能方面都是等效的。

Answer 3

如果你想将所有道具传递给来自父母的子组件，那么你可以这样做：

<Child data={...this.props} />

但是如果你想将一些道具传递给那个子组件，那么你可以在某些常量中取出那些道具并将该常量传递给孩子，如：

const data = {data1: this.props.data1, data2: this.props.data2};
return <Child data={data}/>