Question

我正在使用react，我已经阅读了很多关于如何正确使用它并避免不必要的重新渲染的文章，其中一个主题是将函数传递给组件的方式。所以基本上我们需要避免传递一个像这样的函数的不同实例：

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

或

<Component onClick={this.method.bind(this)} />

你应该在构造函数中绑定函数，然后传递如下：

this.method = this.method.bind(this);

<Component onClick={this.method} />

这很有道理，但现在，我有一个接受参数的方法：

onPropertyChange(field, event) {
    ...
}

我希望每当值发生变化时，输入都会调用此方法，我设法做到的唯一方法是：

<input onChange={this.onPropertyChange.bind(this, 'id')} />

完美无缺，因为它将函数绑定到我的组件，传递字段和事件。但是这样每次都会传递一个不同的实例，这将导致不必要的重新渲染。

那么我该如何正确地做到这一点并避免不必要的重新渲染。

Answer 1

您的问题的答案实际上取决于id的来源。

如果你有几个固定的字符串，并希望避免＆＃34;开销＆＃34;每次渲染创建一个新的匿名函数，然后您可以在构造函数中创建几个绑定副本：

this.onIdChange = this.onPropertyChange.bind(this, 'id');
this.onNameChange = this.onPropertyChange.bind(this, 'name');

然后使用：

<input onChange={this.onIdChange} />

但是，在这种情况下，我会对过早优化保持警惕。如果你还没有确定在渲染方法中创建匿名函数会破坏你的应用程序的性能，那么我就不会认为它就是这种情况。

请注意您的代码：

<input onChange={this.onPropertyChange.bind(this, 'id')} />

不触发不必要的重新渲染。它唯一能做的就是被视为＆＃34;糟糕的做法＆＃34;每次触发重新渲染时都会创建一个新函数。这将创建一些开销，但在假设它会导致问题之前，你应该做一些分析。

Answer 2

对不起，这有点不回答，但我认为答案是：

<input onChange={this.onPropertyChange.bind(this, 'id')} />

或者

<input onChange={() => this.onPropertyChange('id')} />

＆＃34;正确＆＃34;这样做的方法。

最佳实践是好的，理论是合理的，但这是不成熟的优化吗？还是无量化的优化？

这是我的绩效调整核对清单。（TL：DR，时间一切，解决有什么不同。）

安装并运行React's perf tools以识别不必要渲染的组件。
如果你有很多组件，会有一些组件在他们不需要的时候进行渲染，但可能只花费一到两毫秒。你可以忽略它们，除非你设想它们的数量增长了一个数量级，或者别无他法。
对于浪费数十毫秒（或可能一天）的组件，请执行shouldComponentUpdate检查以确保仅在需要更改时运行render()。确保您正在检查孩子可能使用的所有道具。请记住，如果您以后向模型添加数据，这些可能会很困难，您需要将其添加到检查中以确保render运行。

复杂性就是虫子隐藏的地方，所以如果你做的事情让人觉得笨拙并且不能确切地说出原因，我建议你不应该做那些笨重的事情。