为子组件分配道具的正确方法

Question

我想知道哪种分配将要传递给子组件的 props 的方式是正确的(在 React 正确性(语法、常见做法)和效率方面)，如果有更好的方法来实现这一目标，请告诉我。

因此，目前在我的项目中，我有一个父组件，它获取一些数据并将其传递给一个孩子(我实际上将进一步封装它并让孩子获取数据，但我仍然对正确的解决方案感到好奇)。

我的代码是这样的：

class Dashboard extends Component {
constructor(props) {
super(props)
this.state = {
a: 'foo',
b: 'bar',
stats: {
c: 'c',
d: 'd'
}
}
}
someFunction = () => {
}
render() {
let childData = this.state.stats
childData.function = this.someFunction
return (
<div>
<ChildComponent {...childData}/>
</div>
)
}
}

如您所见，我为render()中的子组件分配了所有数据，实际上没有具体的原因。我在Lynda的一个视频中看到过这个，当时我正在观看React的东西，我喜欢它。我相信我可以这样做：

constructor(props) {
super(props)
this.state = {
a: 'foo',
b: 'bar',
stats: {
c: 'c',
d: 'd'
}
}
let childData = this.state.stats
childData.function = this.someFunction 
}

我想知道其中哪一种(如果有的话)是更"反应"的方式，或者有更好的方法吗？我是否正确认为可能存在性能问题，每次呈现父组件时都会分配这些数据？如果是这样，如果我将逻辑移动到构造函数，这是否会最小化，因此赋值只发生一次？

感谢您的帮助！

Answer 1

所以我会说这两个选项都不是"反应方式"。以您的确切组件为例，我会说以下几种是最常见的：

class Dashboard extends Component {
constructor(props) {
super(props)
this.state = {
a: 'foo',
b: 'bar',
stats: {
c: 'c',
d: 'd',
},
}
}
someFunction = () => {}
render() {
return (
<div>
<ChildComponent
stats={this.state.stats}
handleSomeEvent={this.someFunction}
/>
</div>
)
}
}

但是，这只是版本 16.8 之前最常见的方式。现在最常见的方法是：

function Dashboard() {
const [state, setState] = useState({
a: 'foo',
b: 'bar',
stats: {
c: 'c',
d: 'd',
},
})
const someFunction = () => {}
return (
<div>
<ChildComponent 
stats={state.stats} 
handleSomeEvent={someFunction} 
/>
</div>
)
}

Answer 2

是的，这可能是一种正确的方法。

昂贵的部分是操纵 DOM。React 减轻了性能影响，您可以通过使用PureComponent或memo函数来声明您的子组件来提供帮助。

纯组件和记忆功能组件执行浅层比较，并且仅在浅层比较失败时才重新渲染。浅层比较是在shouldComponentUpdate中为PureComponent完成的。您还可以在"普通"Component中实现自己的shouldComponentUpdate功能。如果返回 false，则子组件将不会重新渲染。

所以重申一下。 将属性分配给子组件是否会产生开销 - 是的，但是，与应用程序将面临的其他开销相比，这并不多。

至于非 React 的具体答案。代码应该是可读和可理解的。创建一个中间对象只是为了解构它并没有多大意义。

所以这个：

let childData = this.state.stats
childData.function = this.someFunction

不是真的需要。而是直接分配给组件