Question

我们知道在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 } />
  };
});

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

Answer 1

您无需在componentDidMount上分配该功能。你可以直接调用道具功能。

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

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

有没有更好的方法来避免渲染上的函数重新创建

1 个答案: