Reactjs 作出反应，避免使用浅色QUAL重新招标

我开始发现性能问题，并尝试对其进行优化

作为第一步，我将处理

Perf.printWasted（）

也就是说，我试图消除不必要的渲染

我的一个组件因为两个道具而被重新招标

新的日期对象

新创建的

[todo]

数组

假设您正在为todo创建日历。
对于每个日期，我都会传递一个日期和当天到期的待办事项列表。
我在做一些类似（简化）的事情

react的Shallewequal不会认为这两种情况是相同的，我应该如何继续

对于#1，我可以将传递

时刻（date）.format（）

作为道具，并在每次传递日期时将其转换回日期对象。

---

但这会变得非常烦人，因为有太多的子组件需要访问日期

您是否尝试过实施

shouldComponentUpdate

生命周期方法？您可以检查传入的日期属性和todos数组的不相等性，如下所示：

class MyComponent extends Component {
  shouldComponentUpdate(prevProps) {
    const { 
      date,
      todos,
    } = this.props;
    const {
      date: prevDate,
      todos: prevTodos,
    } = prevProps;

    return (
      date.getTime() !== prevDate.getTime() ||
      !_.isEqual(todos, prevTodos)
    );
  }

  render() {
    // render...
  }
}  

isEqual方法对两个

TODO

数组执行深度相等比较。如果您想更具体一些，还可以使用

\uuiQualWith

方法定义您自己对这些数组的相等概念

或者，您可以研究类似Immutable.js的内容，因为它允许您更轻松地执行

todos！==prevTodos

比较，但这对于您的需求来说可能有些过分（取决于您处理的数据量）

如果您已经在做类似的事情，也许可以提供更多的代码（您实现的

shouldComponentUpdate

方法，以便我们可以建议其他替代方法）。

对于#1，您不需要转换道具。您只需将日期与

shouldComponentUpdate（）

中的

getTime（）

进行比较即可：

对于#2，不幸的是，它看起来像一个包含对象的数组，我认为在这里进行深度相等比仅仅渲染更昂贵

请注意，执行

render（）

并不意味着DOM将得到更新。如果正确设置

键

，则速度应足够快。（如果todo可能会更改其顺序，或者新添加的todo被添加到顶部，则不要使用索引作为键。在这种情况下，真正的唯一键更好）

您应该尽量避免不必要的设置状态（如果您没有使用状态管理库）。还可以尝试将组件拆分为小块。与其每次更新都重新呈现一个巨大的组件，只更新应用程序的最小部分应该更快

另一种可能是重组你的国家。但这是基于你的要求。如果您不需要每个todo的完整日期时间，您可以将您的状态分组如下：

todos: {
  '2017-04-28': ['Watch movie', 'Jogging'],
  '2017-04-29': ['Buy milk']
}

这样你甚至不需要过滤器。你可以轻松掌握你想要的日期

在需要更多信息的更复杂的情况下，您可以尝试规范化您的状态，例如：

{
  todos: {
    1: { text: 'Watch movie', completed: true, addedTime: 1493476371925 },
    2: { text: 'Jogging', completed: true, addedTime: xxxxxxxxxx},
    3: { text: 'Buy milk', completed: false, addedTime: xxxxxxxxxx}
  },
  byDate: {
    '2017-04-28': [1, 2],
    '2017-04-29': [3]
  }
}

---

现在，如果将新todo添加到

todo

，它不会影响引用

byDate

的组件，因此您可以确保没有不必要的重新渲染。

我正在共享我的解决方案

对于基于日历的待办事项列表，我希望避免为日历日的每个子组件实现

shouldComponentUpdate

因此，我寻找一种方法来缓存我为日历创建的日期。（除非更改月份，否则会看到相同的日期范围）

所以这是一个伟大的适合

我也通过重新选择解决了#2

---

它将记忆（缓存）函数结果，直到函数参数更改

当我试图优化React性能时，我发现本文非常有用：

todos: {
  '2017-04-28': ['Watch movie', 'Jogging'],
  '2017-04-29': ['Buy milk']
}

{
  todos: {
    1: { text: 'Watch movie', completed: true, addedTime: 1493476371925 },
    2: { text: 'Jogging', completed: true, addedTime: xxxxxxxxxx},
    3: { text: 'Buy milk', completed: false, addedTime: xxxxxxxxxx}
  },
  byDate: {
    '2017-04-28': [1, 2],
    '2017-04-29': [3]
  }
}