react中为什么用箭头函数来定义事件处理函数

举例：
这里在点击li的时候我的写法是这样的（错误写法）

 <ul className="sort-container">
              {this.state.tabs.map((tab) => (
                <li
                  onClick={ this.switchTab}
                  key={tab.id}
                  className={tab.type === this.state.active ? 'on' : ''}>
                  按{tab.name}排序
                </li>
              ))}
            </ul>

如果像这样处理函数，那么问题是，事件处理函数在渲染时立即执行，而不是在点击事件发生时执行。这意味着 this.switchTab 会在渲染期间立即执行，并且无法传递事件对象 e，因为它只在点击时才会创建。
为了解决这个问题，可以使用箭头函数，它会在点击事件发生时才执行，因此可以传递正确的参数和事件对象。
正确写法(使用箭头函数)

 <ul className="sort-container">
              {this.state.tabs.map((tab) => (
                <li
                  onClick={() => this.switchTab(tab.type)}
                  key={tab.id}
                  className={tab.type === this.state.active ? 'on' : ''}>
                  按{tab.name}排序
                </li>
              ))}
            </ul>

这里的箭头函数在点击事件发生时会调用 this.switchTab(tab.type)，并且它可以正常传递事件对象 e（如果需要的话，你可以在函数内部访问事件对象 e）。这种方式确保了事件处理函数在需要时才执行，而不是在渲染时执行。