mobx-react装饰的React.PureComponent报shouldComponentUpdate警告问题

嘿，这个问题我之前也踩过坑！明明自己根本没定义shouldComponentUpdate方法，怎么就弹出这个警告了？其实问题的根源确实和mobx-react的observer装饰器有关，听我给你掰扯清楚：

为什么会出现这个警告？ #

React的PureComponent本身内置了一个基于浅比较的shouldComponentUpdate逻辑，用来避免不必要的重渲染。而mobx-react的observer装饰器为了实现基于Mobx依赖追踪的精准更新，会自动给你的组件注入一个自定义的shouldComponentUpdate方法。

当你同时使用React.PureComponent和@observer时，就相当于组件同时拥有了两个shouldComponentUpdate逻辑——React内置的和Mobx注入的，这就触发了React的警告：它不允许继承PureComponent的组件再自定义（包括装饰器自动添加的）shouldComponentUpdate。

怎么解决？ #

其实很简单，只需要做一个小改动：

• 把组件的继承从React.PureComponent改成React.Component就行。

因为observer装饰器已经帮你实现了比PureComponent更高效的更新判断——它只会在组件依赖的Mobx状态发生变化时才触发重渲染，比浅比较的粒度更精准，完全不需要依赖PureComponent的浅比较逻辑。

举个例子，你的组件代码可以改成这样：

import { observer, inject } from 'mobx-react';

@inject('store') @observer 
class Body extends React.Component<BodyProps> {}

这样改完之后，警告就会消失，而且组件的更新效率反而会更高哦～

内容的提问来源于stack exchange，提问作者zmii