React - 如何正确传递和调用接受参数到组件的函数

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来自何处。

如果你有几个固定的字符串，并希望避免创建一个新的匿名功能的“开销”一旦每个渲染，那么你可以在构造函数中创建多个装订复印件：

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')} /> 

是不引发不必要的重新渲染。它唯一可能被视为“不好的做法”的做法是每次触发重新呈现时创建一个新函数。这将创建一些开销，但在假定它会导致问题之前，你应该真的做一些分析。

Answer 2

很抱歉，这是一个有点不回答，但我想答案是这样的：

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

或本

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

是“正确“做到这一点的方法。

最佳实践是好的，理论是健全的，但是这是不成熟的优化？还是非量化优化？

这是我的性能调整清单。 （TL：DR，时间一切，解决什么有差别。）

1. 安装和运行React's perf tools来标识渲染不必要的组件。
2. 如果您有很多组件，则会在不需要时渲染一些组件，但可能只花费一两毫秒。你可以忽略它们，除非你设想它们的数量增长一个数量级，或者没有别的事情要做。
3. 对于浪费几十毫秒（或可能一天）的组件，请执行shouldComponentUpdate检查以确保只在需要更改时才运行render()。确保你正在检查小孩可能使用的所有道具。记住，如果您稍后将数据添加到模型中，这些可能是一个陷阱，您需要将其添加到检查以确保render运行。

复杂性是虫子隐藏的地方，所以如果你做的事情感觉笨重，不能确切地说出原因，我建议你不要做笨重的事情。