Javascript 如何决定在React中调用处理函数的最有效方式？_Javascript_Reactjs_Typescript

Javascript 如何决定在React中调用处理函数的最有效方式？

javascript reactjs typescript

Javascript 如何决定在React中调用处理函数的最有效方式？,javascript,reactjs,typescript,Javascript,Reactjs,Typescript,我还不太熟悉如何反应，但我意识到有两种常见的方法来定义回调函数： // Method 1 private handleInputChange = (event) => { this.setState({name: event.target.value}); } // Method 2 private handleInputChange(event){ this.setState({name:event.target.value}); } 在DOM元素内部（在本例中，我们

我还不太熟悉如何反应，但我意识到有两种常见的方法来定义回调函数：

// Method 1
private handleInputChange = (event) => {
    this.setState({name: event.target.value});
}
// Method 2
private handleInputChange(event){
    this.setState({name:event.target.value});
}

在DOM元素内部（在本例中，我们使用

），可以通过以下不同方法调用处理程序：

// Method 1
<input
    type="text"
    onChange={this.handleInputChange}
/>

// Method 2
<input
    type="text"
    onChange={(e) => this.handleInputChange(e)}
/>

// Method 3 (assume the function don't have parameters)
<input
    type="text"
    onChange={this.handleNewThing()}
/>

//方法1
//方法2
this.handleInputChange（e）}
/>
//方法3（假设函数没有参数）

我的问题是，应该使用哪种方法？我真的很困惑所有这些方法。然后我看到人们出于某种原因包括了

bind（）

。

你是对的，有很多方法可以处理处理程序（ba-dum-tss）。React已经存在了一段时间，JavaScript的面貌在这段时间里发生了相当大的变化

React文档中有一整页内容，但是这里比较了一些处理回调的方法：

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具） this.boundHandleClick=this.boundHandleClick.bind（this） } arrowHandleClick=（event）=>{this.props.onClick（event.target.id）} boundHandleClick（事件）{this.props.onClick（event.target.id）} boundInRenderHandleClick（事件）{this.props.onClick（event.target.id）} unboundHandleClick（事件）{this.props.onClick（event.target.id）} 渲染（）{ 返回( {this.props.onClick（event.target.id）}/> ) } } 单击时：

```
#zero
```
将正确调用
```
道具。onClick
```
。问题在于，在渲染方法中创建的匿名函数将在每次渲染时重新创建。这对性能不好
```
#一个
```
将正确调用
```
道具。单击
```
。由于回调被定义为类方法，因此只有在实例化（并装入）MyComponent时才会创建回调。这是一种可以接受的定义回调的方法，但在我看来，这也是最整洁的
```
#两个
```
将正确调用
```
props.onClick
```
。这与
```
arrowHandleClick
```
基本相同，只是它是一个与arrow函数相反的函数。无论出于什么目的，它们都是一样的
```
#三个
```
将正确调用
```
道具。onClick
```
，其结果与
```
#二个
```
相同，但对性能有负面影响，因为
```
#零
```
-不应在渲染方法中创建或绑定函数
```
#four
```
将无法正常工作，并将抛出错误。运行时，
```
此
```
将引用元素（在本例中为
```
#four
```
），而不是类实例。在所有其他处理程序中，
```
这个
```
引用React类实例，它有一个
```
props.onClick
```

现在有一种新的被接受的编写组件的方法：使用普通函数和钩子<代码>这已成为过去

const MyComponent=（道具）=>{
const handleClick=event=>props.handleClick（event.target.id）
const memorizedHandleClick=React.useCallback(
event=>props.handleClick（event.target.id），
[道具.把手舔]
)
返回(
props.handleClick（event.target.id）}/>
)
}

这里所有回调都正常工作-唯一的区别是不会在每次渲染时重新创建

memorizedHandleClick

，除非

props.handleClick

发生更改。根据我自己的经验，这两种方法都是可以接受的，而且人们似乎不再介意在功能组件中重新创建回调，而是更加务实，在遇到回调时解决性能问题。

你是对的，有很多方法可以处理处理程序（ba dum tss）。React已经存在了一段时间，JavaScript的面貌在这段时间里发生了相当大的变化

React文档中有一整页内容，但是这里比较了一些处理回调的方法：

```
#zero
```
将正确调用
```
道具。onClick
```
。问题在于，在渲染方法中创建的匿名函数将在每次渲染时重新创建。这对性能不好
```
#一个
```
将正确调用
```
道具。单击
```
。由于回调被定义为类方法，因此只有在实例化（并装入）MyComponent时才会创建回调。这是一种可以接受的定义回调的方法，但在我看来，这也是最整洁的
```
#两个
```
将正确调用
```
props.onClick
```
。这与
```
arrowHandleClick
```
基本相同，只是它是一个与arrow函数相反的函数。无论出于什么目的，它们都是一样的
```
#三个
```
将正确调用
```
道具。onClick
```
，其结果与
```
#二个
```
相同，但对性能有负面影响，因为
```
#零
```
-不应在渲染方法中创建或绑定函数
```
#four
```
将无法正常工作，并将抛出错误。运行时，
```
此
```
将