react调用api等待返回结果_9102 年的 React 组件要怎么定义

目前为止，根据组件的定义方式，React 的自定义组件可以分为类组件和函数组件。类组件可以继承自 React.Component，也可以继承 React.PureComponent（React.createClass 的写法已经被完全淘汰了，我们就不讲了）。函数组件就很简单了，跟普通的函数没啥区别，只不过这个函数需要返回一个合法的 React 节点。

所以我们写组件的时候要用哪种方式？

先说结论

总是优先使用函数组件，如果需要用到 getSnapshotBeforeUpdate 或 componentDidCatch 就用类组件来继承 React.Component，如果你发现类组件有性能问题，那么可以尝试改成继承 React.PureComponent 优化。

为什么优先使用函数组件？

从 React 的设计哲学上来讲，函数组件是最贴合 ui = f(state) 这个模型的。由于没有了 this， 函数组件会比类组件更容易让人理解。你要定义一个函数组件需要的代码也更少。而从实用角度来讲，直接调用一个函数会比实例化一个类后再调用其方法更快，React 本身也计划对函数组件有更好的优化。

This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. https:// reactjs.org/blog/2015/1 0/07/react-v0.14.html#stateless-function-components

另外由于 Hooks 的引入，函数组件也不再是以前的“无状态组件”了，类组件能做的事函数组件也几乎都能做。因为目前 getSnapshotBeforeUpdate 和 componentDidCatch 这两个 API 还没有对应的 Hooks 实现，所以要用这两个 API 还需要类组件。而实际使用中，使用这两个 API 的情况是比较少的。所以从现在开始你写的 React 组件，绝大部分都应该是函数组件。

为什么定义类组件的时候不优先考虑 PureComponent？

React.PureComponent 是由官方提供来优化 React 组件，减少组件 render 次数用的。其原理是 React 在调用组件的 render 前会对组件的新 props 和 state 跟当前的 props 和 state 做一次浅比较，如果比较结果相同，React 就会跳过 render。

但在实际使用中，要确定一个组件是否 pure 是有很多条件的，即使你的组件组件已经是 pure 组件了，你在使用这个组件的时候也要很小心。所以，只有在你确实碰到了性能问题，才应该去考虑是否使用 PureComponent，并且应该用性能分析工具去比较优化的结果，因为有时候对 props 的比较并不一定比组件树的比较更快，如果你的 props 会经常变化的，就像缓存一样，这个优化的命中率会很低。同样的道理适用于 shouldComponentUpdate 和 React.memo 的使用。

In pathological cases (shallow equality checks often failing) PureComponents can be slower. So the only rule of thumb is to only add one when you know you have a perf problem and you can verify adding it solves that problem. https:// github.com/facebook/rea ct/issues/7379#issuecomment-270117281

最后，除了上面说的，9102 年你应该用 TypeScript 来写你的 React 应用了！