在shouldComponentUpdate中使用下划线/ lodash是值得的吗?

时间:2018-03-19 20:28:02

标签: javascript reactjs

我的项目中有一个情况,我需要检查props是否相等,以防止多余的render方法调用并提高性能。问题是我不能使用 React.PureComponent ,因为属性没有平坦的结构。

{
  "header": "HeaderName",
  "data": [{...}, {...}],
  "configuration": {....}
}

我用lodash实现了 shouldComponentUpdate 方法。

shouldComponentUpdate({data: newData, configuration: newConfiguration}) {
  const {data, configuration} = this.props;
  return !_.isEqual(data, newData) || !_.isEqual(newConfiguration,  configuration);
}

值得使用lodash / underscore isEqual方法来检查React组件中的属性是否相等?它是否显着降低了应用程序性能?这个问题的最佳解决方案是什么(我无法改变属性的结构)?

1 个答案:

答案 0 :(得分:0)

下划线和lodash会变慢。

我尝试尽可能地保持状态属性为基元,以提高性能和可维护性。有什么方法可以从数据中抽象出一些能够识别传递给子组件所需数据的东西吗?例如,在此sandbox中,数据不是on状态,而是其中一个键是state属性。实际数据只是一个实例成员,但要传递的数据仍会随着用户操作而改变,因为标识符正在发生变化。

这可能听起来令人困惑 - 查看sandbox中的代码会澄清。