渲染中的React.js事件绑定？

Question

将你的render函数中的用户交互事件（例如“点击”功能）绑定到html标记，真的是反应方式吗？是否还有一种“反应方式”，用于绑定（html）元素交互事件，以便在每次调用render时都不会重新定义它们？

我会假设在例如性能影响时涉及动画。

问题是一般的，但示例代码如下（在此上下文中，onClick事件绑定）。

  render() {
        return (
            <Animate
              start={() => ({
                x: this.state.x,
                y: this.state.y
              })}

              update={() => ({
                x: [this.state.selected ? this.setX(true) : this.setX(false)],
                y: [this.state.selected ? this.setY(true) : this.setY(false)],
                timing: { duration: 1500, ease: easeCubicInOut },
              })}
            >
              {(state) => {
                const { x, y } = state;
                return (
                    <div onClick={this.reverseSelection} className={this.state.style}
                      style={{
                        WebkitTransform: `translate3d(${x}px, ${y}px, 0)`,
                        transform: `translate3d(${x}px, ${y}px, 0)`,
                      }}
                    >
                    {this.props.name}
                  </div>
                );
              }}
            </Animate>
        )

      }
    }

如果这是某种真正推荐的方式，有没有办法减少假设的性能影响，如果你假设动画正在发生并且我们想在动画期间变得轻量级？