react 组件传递函数

<MyComponent onClick={this.handleClick}>

In React, there are several cases where you may want to pass a function (like

onClick

) as a prop from a container to a child component — usually in order to let the child notify the parent of some event.

在React中，在某些情况下，您可能希望将作为道具的函数(如

onClick

)从容器传递给子组件-通常是为了让子组件将某些事件通知给父组件。

For example:

例如：

A scenario where you have a CustomButton component that needs to change the counter state of its parent container component. 您有一个CustomButton组件，需要更改其父容器组件的计数器状态的方案。

Assuming that you will probably need to have access to the parent component’s

state

or

props

from the child component, you will need to somehow bind the function to the parent component instance.

假设您可能需要从子组件访问父组件的

state

或

props

，则需要以某种方式将函数绑定到父组件实例。

While there are a few ways to do that, some are better solutions.

虽然有几种方法可以做到这一点，但有些是更好的解决方案。

如何将功能绑定到组件实例？ (How Do I Bind a Function to a Component Instance?)

Depending on the syntax and build steps involved, there are many ways to ensure that functions have access to component attributes such as

props

and

state

.

根据涉及的语法和构建步骤，有很多方法可以确保函数可以访问组件属性(例如

props

和

state

。

1.绑定到构造函数 (1. Bind in constructor)

While this a widely used method, it is a somewhat strange one that involves the use of the obscure word

bind

and requires an unnecessary line of code (we will discuss that later).

尽管这是一种广泛使用的方法，但它有点奇怪，它涉及使用晦涩的单词

bind

并且需要不必要的代码行(我们将在后面讨论)。

In my opinion, it is not the best way.

我认为这不是最好的方法。

2.绑定渲染 (2. Bind in render)

Although we supposedly save a line of code with this approach compared to the previous one, this method is still somewhat unclear and I do not recommend using it.

虽然我们比前一个假想保存一行代码，使用这种方法，这种方法还是有些不清楚，我不建议使用它。

In addition, and perhaps more importantly:

另外，也许更重要的是：

“Using

.bind(this)

inside render, creates a new function each time the component renders, which may have performance implication.” — React’s documentation

“ 在渲染器内部 使用

.bind(this)

，每次渲染组件时都会创建一个新函数，这可能会对性能产生影响。” — React的文档

3.箭头功能 (3. Arrow function)

An arrow function expression has a shorter syntax than a function expression and does not have its own

this

. For this reason, you can pass it to the child component and still access the parent’s

props

and

state

.

箭头函数表达式的语法比函数表达式短，并且没有它自己的

this

。 因此，您可以将其传递给子组件，并仍然访问父组件的

props

和

state

。

In my opinion, this is the best way:

我认为这是最好的方法：

Note: According to React’s documentation, “This syntax is experimental and not standardized yet.”

注意：根据 React的文档 ，“此语法是实验性的，尚未标准化。”

将参数传递给事件处理程序 (Passing Parameters to an Event Handler)

Examine carefully if you really need to pass parameters through the function prop to the child.

请仔细检查是否确实需要通过功能道具将参数传递给孩子。

Check if you have other options, such as passing the parameter as a prop or figuring out that you don’t really need the parameter in the child component.

检查您是否还有其他选择，例如将参数作为道具传递或确定您在子组件中确实不需要该参数。

我为什么这么说？ (Why am I saying this?)

As mentioned before, using syntax like bind in render or an anonymous function (like in the next example) will cause the child component to re-render after each and every render of the parent — regardless of whether was changed is relevant to its child or not. That means poor performance.

如前所述，使用诸如render中的bind或匿名函数之类的语法(如下例所示)将导致子组件在父项的每次渲染后重新渲染-无论更改是否与其子项有关或不。 这意味着性能不佳。

As the child component receives an anonymous function as a prop, it cannot compare with the previous anonymous function (because both are anonymous). However, passing a reference to the method like

onClick={this.handleClick}

lets React know that nothing has changed, so it does not re-render unnecessarily.

由于子组件接受匿名函数作为道具，因此它无法与先前的匿名函数进行比较(因为两者都是匿名的)。 但是，传递对诸如

onClick={this.handleClick}

类的方法的引用可使React知道没有任何更改，因此不会不必要地重新呈现。

Example of what you shouldn’t do if you do not have to:

不必执行以下操作的示例：

<button onClick={() => this.handleClick(id)} />

Note, however, that the anonymous function is sometimes inevitable (e.g. when we only need to pass an argument in the context).

但是请注意，匿名函数有时是不可避免的(例如，当我们只需要在上下文中传递参数时)。

生活证明 (Living proof)

Check out the next CodeSandbox example. It demonstrates two ways of passing a function to a component as props. The first passes a function by reference, and the second passes an anonymous function.

查看下一个CodeSandbox示例。 它演示了将函数作为道具传递给组件的两种方法。 第一个通过引用传递一个函数，第二个传递一个匿名函数。

When you click the button, the number near each of the components indicates how many times it was rendered.

当您单击该按钮时，每个组件附近的数字表示渲染次数。

Can you guess which one would render more times unnecessarily?

您能猜出哪一个会不必要地渲染更多次吗？

最后，确保在将其传递给组件时不调用该函数 (Finally, Make Sure You Aren’t Calling the Function When You Pass It to the Component)

Don’t do this:

不要这样做：

React.React的代码片段。

Instead, pass the function itself (without parentheses):

而是传递函数本身(不带括号)：

React.React的代码片段。

结论 (Conclusion)

I hope this article helped you to understand how you can — and should — pass functions between components in a simple and efficient way.

我希望本文能帮助您了解如何以及应该如何以简单有效的方式在组件之间传递函数。

Have a great day! Thanks for reading!

祝你有美好的一天！ 谢谢阅读！

翻译自: https://medium.com/better-programming/passing-functions-to-react-components-2a02d1b2b806

react 组件传递函数