reactjs - React，避免使用shallowEqual重新渲染

Question

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

作为第一步，我正在处理 Perf.printWasted()

也就是说，我正在尝试消除不必要的渲染。

由于两个 Prop ，我的一个组件正在重新渲染

1. 一个新日期对象。

2. 新创建的[todo]数组

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

todoForDay = _.filter(todos, (todo) => {return todo.dueDate == today})

react 的shallowEqual 不会将这两种情况视为相等，我应该如何进行？

对于#1，我可以考虑将 moment(date).format() 作为 props 传递，并在每次传递日期时转换回日期对象。
但这会变得非常烦人，因为有很多子组件需要访问日期。

Answer 1

您是否尝试过实现 shouldComponentUpdate 生命周期方法？您可以检查传入的 date 属性和 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 方法对两个 todos 数组执行深度相等比较。如果您想更具体，还可以使用 _.isEqualWith 方法为这些数组定义自己的相等概念。

或者，您可以研究类似 Immutable.js 的东西，因为它可以让您进行更简单的 todos !== prevTodos 比较，但这对于您的需求来说可能有点过头了(取决于多少)您正在使用的数据)。

如果您已经在做类似的事情，也许可以提供更多代码(您实现的 shouldComponentUpdate 方法，以便我们建议其他替代方案)。