为什么 React/Redux 重置所有事件处理程序，即使 `state` 未更改

Question

要创建记录组件 ID 的 onClick 事件，我使用此函数：

const onClick = (e) => {
  console.log(e);
};

const Bar = ({id, text}) => (<div onClick={onClick.bind(null,id)}>{id}: {text}</div>);

这已经可以正常工作，它记录了我单击的项目的 id。

然而，根据 Perf.printDOM()，React 显然会使用此处理程序接触每个节点，并在 state 更新时创建一个新节点，即使它没有变化。

这是故意设计的还是我的设计有误？我误解了发生了什么吗？找到一种方法来跳过这个会不会是过早的优化？

Here is a Jsbin for demonstration

Answer 1

您在每次呈现组件时创建一个新的事件处理程序（每次处理事件或状态更改等时都会发生）。仅出于这个原因，我建议不要在功能组件内部调用 bind()，而是使用使用 React.createClass 定义的标准组件或使用继承自 Component 的 ES6 class .

基本上你应该设计你的组件假设 render() 将被多次调用，并尽可能避免在该方法中分配或绑定。

React 也有它自己的事件处理系统，它模仿原生的 DOM 系统，但在幕后的工作方式有点不同。它在根组件级别处理所有事件，并根据事件源确定触发哪个组件的处理程序。 official docs are a great place to dig in to how this system works, and of course there always the source code.

为什么 React/Redux 重置所有事件处理程序，即使 `state` 未更改

Why does React/Redux reset all event handlers, even if `state` is unchanged

javascript

reactjs

redux