React的性能调优 - 通过Chrome工具正确打开useMeno的使用方法

前言

最近开始学习React，跟着Kent学，有很多干货，这里分享一个检测性能的方法，并且利用此方法介绍useMeno的使用方法

---

一、background

1.1 performance bottleneck

React可以让我们把所有的逻辑以及state management都放在一个function下面管理，但是这也带来一个limitation，那就是每次render所有的计算都需要执行一遍，不管组件内的计算是否有必要执行，比如

function Distance({
   x, y}) {
   
  const distance = calculateDistance(x, y)
  return (
    <div>
      The distance between {
   x} and {
   y} is {
   distance}.