react深度理解更新流程

因为其中考虑考虑到render不可能每次数据一变就去生成新的dom树，所以分节点更新就出现了，解决方法是：

        使用react给我们提供的生命周期方法shouldComponentUpdate（SCU） 这个方法来调取render函数的，react在每个class上面都继承了这个方法，很大的优化了整个程序的流程。

        同时react也提出来高级组件memo，当使用memo组件的时候可以使用在props 没有变化时不重新渲染，提高性能

import React, { memo } from 'react';

// 普通的函数式组件
const MyComponent = ({ name }) => {
  console.log('Component render');
  return <div>Hello, {name}!</div>;
}

// 使用 memo 包裹函数式组件
const MemoizedComponent = memo(MyComponent);

// 父组件
const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <MemoizedComponent name="Alice" />
    </div>
  );
}