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

如何解决在反应样板中绑定事件处理程序

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

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

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

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

那么哪种方式最好？

解决方法

据我所知:-

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