时间戳

首页 > 解决方案 > 在反应样板中绑定事件处理程序

javascript - 在反应样板中绑定事件处理程序

问题描述

我知道有 4 种绑定事件处理程序的方法。第一个是通过在 DOM 元素中绑定render()：

<button onClick = {this.clickHandler.bind(this)}>Event</button>

第二个是在 DOM 元素中使用箭头函数render()：

<button onClick = {() => this.clickHandler()}>Event</button>

第三个是在类构造函数中绑定：

constructor(props) {
        super(props)
        this.state = {
             message: "Click"
        }
        **this.clickHandler = this.clickHandler.bind(this);**
    }
render() {
        return (
            <div>
                <div>{this.state.message}</div>
                **<button onClick = {this.clickHandler}>Event</button>**
            </div>
        )
    }

第四种方法是将类属性更改为箭头函数：

clickHandler = () => {
        this.setState({
            message: 'Goodbye!'
        })
    }

那么哪种方式最好呢？

标签： javascriptreactjsreact-boilerplate

解决方案

据我所知：-

  • 在第一种情况下，将在您的 React 应用程序的每个渲染上创建一个新的绑定。 clickHandler
  • 在第二种情况下，将创建一个新的匿名箭头函数，它在 React 应用程序的每次渲染clickHandler时内部调用（执行时） 。
  • 第 3 次和第 4 次都更好，因为它们会一次性创建clickHandler. 它们在渲染流程之外。

推荐阅读