有没有更好的方法来避免在渲染时重新创建函数答案

【问题标题】：Is there a better way to avoid function re-creation on render有没有更好的方法来避免在渲染时重新创建函数
【发布时间】：2016-02-29 22:31:59
【问题描述】：

我们知道在render 中避免箭头函数/绑定/创建函数是个好主意，因为这些函数将在每次渲染时重新创建。

鉴于以下可能内存效率低的组件：

const MyComponent = ({ ItemId, onSomeEvent }) => 
{
  return <SomeOtherComponent onSomeEvent={ val => onSomeEvent(itemId, val) } />;
};

我可能会将其重写为：

const MyComponent = React.createClass({
  someItemId: 0,
  onSomeEvent: () => {},
  someHandler(emittedValue){
    this.onSomeEvent(this.someItemId, emittedValue);
  }
  componentDidMount() {
    const { itemId, onSomeEvent } = this.props;
    this.someItemId = itemId;
    this.onSomeEvent = onSomeEvent;
  },
  render() {
    <SomeOtherComponent onSomeEvent={ this.someHandler } />
  };
});

我这样做的唯一原因是避免在渲染方法中重新创建函数。有什么更好的方法来做到这一点？我这样做的方式似乎过于冗长。想法？

【问题讨论】：

实例化一个 Function 实例可能比几乎任何 DOM 操作都便宜得多。您是否有实际的分析器证据表明您的代码在浪费时间实例化函数？
绝对没有证据。这可能是一个根本不值得的优化。这确实是其中的一部分，想看看在最佳实践中的权衡是否真的值得。这不是我目前的解决方案。
函数（箭头或传统）字面量似乎会很昂贵，但如果您考虑一下，运行时只需要担心实际的 函数的代码 一次 - 因为它是不可变的，它可以被每个实例共享。所以一个新的 Function 对象可能相当便宜，可以与一个新的 Array 或其他东西相媲美。
编译器会做一些疯狂的事情，所以有时它可能是你认为让事情变得更快的优化让它变慢的方式，不要关心这样低级的事情，你浪费在这样的优化上的时间你可以用来编写很棒的程序。

标签： javascript reactjs

【解决方案1】：

您无需在componentDidMount 上分配函数。可以直接调用 props 函数。

const MyComponent = React.createClass({
  propTypes: {
    itemId: React.PropTypes.number.isRequired
    onSomeEvent: React.PropTypes.func.isRequired
  },
  someHandler(emittedValue){
    this.props.onSomeEvent(this.props.itemId, emittedValue);
  }
  render() {
    <SomeOtherComponent onSomeEvent={ this.someHandler } />
  };
});

还要记得使用道具类型，你未来的自己会感谢你的:)

【讨论】：