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

我们知道，最好避免在

render

中使用箭头函数/bind/creating函数，因为这些函数将在每次渲染时重新创建

给定以下可能内存效率低下的组件：

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

constmycomponent=（{ItemId，onSomeEvent}）=>
{
返回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 } />
  };
});

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（）{
};
});

---

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

您不需要在

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 } />
  };
});

const MyComponent=React.createClass({
道具类型：{
itemId:React.PropTypes.number.isRequired
onSomeEvent:React.PropTypes.func.isRequired
},
someHandler（emittedValue）{
this.props.onSomeEvent（this.props.itemId，emittedValue）；
}
render（）{
};
});

---

还记得使用道具类型，你未来的自己会感谢你：）

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