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

有人遇到过这个问题吗？

我有一个在特定选项卡中呈现组件的函数。其中一个 Prop 是 this.setTab.bind(this, tab) 它每次都会返回一个新函数。如果有某种不变性助手允许它根据绑定(bind)值相等，那就真的很酷了......

请您参考如下方法:

我直接从 eslint 插件文档中提取它 "jsx-no-bind" ，并且它提到了一种可能的减少数量的解决方案:

渲染中绑定(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); 
  } 
}); 

这将加快渲染速度，因为它避免了在每次渲染时创建新函数(通过绑定(bind)调用)的需要。