Question

React组件将props与对象引用相等进行比较，当您部分应用函数时，您将获得一个具有不同引用的新函数，这会导致react组件每次都触发重新呈现。

有没有人遇到过这个问题？

我有一个在特定标签中呈现组件的功能。其中一个道具是this.setTab.bind(this, tab)，它每次都会返回一个新函数。如果有某种不变性帮助器允许它根据约束值相等，那真的很酷......

Answer 1

我直接从eslint插件文档"jsx-no-bind"中提取此内容，并提出了一种可能的解决方案来减少数量：

渲染中的一个常见用例是渲染列表时，每个列表项都有一个单独的回调：

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}>
            ...
          </li>
        )}
      </ul>
    );
  }
});

不是这样做，而是将重复的部分拉到自己的组件中：

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} />
        )}
      </ul>
    );
  }
});

var ListItem = React.createClass({
  render() {
    return (
      <li onClick={this._onClick}>
        ...
      </li>
    );
  },
  _onClick() {
    this.props.onItemClick(this.props.item.id);
  }
});

这将加快渲染速度，因为它避免了在每个渲染上创建新函数（通过绑定调用）的需要。

Answer 2

如果您的render函数仅依赖仅依赖 <{1}}和this.props的数据，则可以实施shouldComponentUpdate method来比较新旧道具因此告诉React何时处理程序没有改变，以防止这些不必要的重新渲染。

请注意这一点：如果this.state中的逻辑不正确（因此当实际发生变化时它返回shouldComponentUpdate），您的组件将停止更新。这些错误以后很难找到，所以要小心。（使用分析器来确定您是否真的需要这种特定的性能提升。）

用函数局部应用优化反映渲染

2 个答案: