来源 memo,PureComponent,shouldComponentUpdate

0 .主要是用来处理子组件,子组件中某个计算特别复杂的时候,这样重复渲染做重复的计算,即时他前后计算的结果是一致的
1 .以下例子

import React from 'react'

  class Children extends React.Component {
    render () {
      console.log(' Children render ')
      return (<div>Children Component </div>)
    }
  }

  export default class Parnet extends React.Component {
    state = {
      count: 0
    }
    render () {
      return (
        <div> 
          <button onClick={() => { this.setState({ count: this.state.count + 1})}}>button</button>
          <Children></Children>
          count: { this.state.count }
        </div>
      )
    }
  }

1 .例如我们每次改变父组件，父组件的数据发生了变化，他进行重新渲染是理所当然的。但是奇怪的是子组件也会每次都渲染
2 .每次count改变，子组件都会重新渲染一遍

3 .或者对组件的某一块进行优化

const Demo2 = (props)=>{
    
        const {count} = props;   
        const countCom = useMemo(()=>  <div>count: {count}</div>, [count]);

        return(
            <div>
                <div className="content">
                    <div>demo2</div>
                {countCom}
                </div>
            </div>
        )
    }

react提供的方法

1 .shouldComponentUpdate

1 .这个生命周期如果返回false,那么对应组件就不会重新渲染
class Children extends React.Component {
    // 利用生命周期 shouldComponentUpdate 对 xia
    shouldComponentUpdate (nextProps, nextState) {
      if (nextProps.name === this.props.name) return false
      return true
    }
    render () {
      console.log(' Children render ')
      return (<div>Children Component name { this.props.name }</div>)
    }
  }

2 .PureComponent

1 .如果传入的值，层次比较复杂。就需要我们深层次对比。
// 子组件直接继承 PureComponent， 我们就不需要写 shouldComponentUpdate。 react 会自动帮我们做对比//// 优化
    class Children extends PureComponent {
      render () {
        console.log(' Children render ')
        return (<div>Children Component name { this.props.name }</div>)
      }
    }
2 .PureComponent 只会比对传入值的属性，如果传入的值内部发生变化，会出现数据更新，试图不更新的例子
export default class Parnet extends React.Component {
    state = {
      count: 0,
      human: {
        name: 'jake',
        age: 100
      }
    }
    render () {
      const human = this.state.human
      return (
        <div> 
          <button onClick={() => { 
            human.age++
            this.setState({ count: this.state.count + 1, human})}
          
          }>button</button>
          <Children human={this.state.human}></Children>
          count: { this.state.count }
        </div>
      )
    }
  }
//这种情况不会检测到胡数据变化，试图也不会发生变化

3 .memo

1 .使用class去创建组件的时候，可以使用PureComponent，但是使用函数组件的时候，没法继承PureComponent，这个时候就需要使用memo

function ChildrenFunc (props) {
    return (
      (<div>Children Component name { props.human.name} age { props.human.age}</div>)
    )
  }

  const Children = memo(ChildrenFunc)

useMemo

1 .memo就是函数组件的PureComponent,用来做性能优化的手段，useMemo也是，有点类似于Vue的计算属性，根据依赖的值计算出结果，当依赖的值不发生变化的时候，不触发状态改变
2 .useMemo会在渲染的时候执行，而不是渲染之后执行，这是和useEffect的本质区别，所以不建议在useMemo里面写副作用相关的逻辑
3 .useMemo的第二个参数

1 .不传数组，每次更新都会重新计算，任意一个state发生变化
2 .空数组，只会计算一次
3 .依赖对应值，只有当这个值发生变化的时候，才会重新计算

4 .避免每次渲染时都进行高开销的计算的优化策略。针对当前组件高开销的计算，具有记忆功能，只有依赖属性发生变化，才会重新计算
5 .当使用useContext的时候,只能用useMemo来执行优化

注意

1 .不要过渡依赖useMemo，useMemo本身也有开销，useMemo会记住一些值，然后在后续的render中，将依赖数组中的值取出来和上一次记录的值进行比较，只有不相等的时候才会重新执行回调函数，否则直接返回记住的值
2 .使用的时候思考的问题

1 .传递给memo的函数开销到底大不大，只有很大的时候，我们才需要记住他的返回值
2 .不要太早的进行性能优化
3 .返回的值是原始值吗？如果计算出来的是基本类型的值，那么每次比较都是相等的，下游组件就不会重新渲染，如果返回的是复杂类型的值，那么尽管值不会变化，地址发生了变化，也会导致组件重新渲染，所以我们需要记住这个值
4 .编写自定义hook时，返回值一定要保持引用的一致性。如果自定义的值是object,array类型，那么就应该使用useMemo，确保值相同时，引用不会发生变化

3 .在使用 useMemo 或者 useCallback 时，确保返回的函数只创建一次。也就是说，函数不会根据依赖数组的变化而二次创建

export const useCount = () => {
  const [count, setCount] = useState(0);

  const [increase, decrease] = useMemo(() => {
    const increase = () => {
      setCount(count + 1);
    };

    const decrease = () => {
      setCount(count - 1);
    };
    return [increase, decrease];
  }, [count]);

  return [count, increase, decrease];
};

unction Counter() {
  const [count, increase] = useCount();

  useEffect(() => {
    const handleClick = () => {
      increase(); // 执行后 count 的值永远都是 1
    };

    document.body.addEventListener("click", handleClick);
    return () => {
      document.body.removeEventListener("click", handleClick);
    };
  }, []); 

  return <h1>{count}</h1>;
}
//useCount中，count状态变化之后，会让useMemo中的increase和decrease函数被重新创建，但是闭包的特性，如果这两个函数被其他hook用到了，我们应该将这个两个函数也添加到依赖数组中去

react.memo

1 .只会比较props,不会比较state

useMemo进行组件优化

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

state只会被创建一次:当传入的是一个函数的时候

function Table(props) {
  // ✅ createRows() 只会被调用一次
  const [rows, setRows] = useState(() => createRows(props.count));
  // ...
}

补充

1 .useMemo 类似于 useCallback，除了它允许你将 memoization 应用于任何值类型（不仅仅是函数）。 它通过接受一个返回值的函数来实现这一点，然后只在需要检索值时调用该函数（通常这只有在每次渲染中依赖项数组中的元素发生变化时才会发生一次）
2 .不想每次渲染都初始化某个数组

 const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']
const initialCandies = React.useMemo(
 () => ['snickers', 'skittles', 'twix', 'milky way'],
 [],
+ )

性能优化不是免费的。 它们总是带来成本，但这并不总是带来好处来抵消成本

···
import React,{useEffect,useState,useCallback,useMemo} from "react";

const Child = (props) => {
console.log('更新了外面',props);
useEffect(()=>{
console.log('更新了count')
},[props.count])
//这里想要的结果是当传入的props发生变化，才执行这个操作

// 但是useEffect将对每次渲染中对props进行引用相等性检查，由于react和js的机制，每次渲染的props（如果是对象object类型）都是新的
// 所以当react检测是否发生了变化的时候，必然是每次都是true，所以这里的优化其实跟没做一样

// 而且也不能直接比较props，props是一个内置的对象，肯定是变化的，或者传入的props里面的结构是一个非常复杂的结构
// {
//     obj:{name:"lala"},
//     arr:[1,2,3,4]
// }

// 所以这个时候就需要在父组件对传入的东西进行useMemo，useCallback包装,或者说分别对这俩个进行包装

return (
    <>
    <hr/>
    </>
)

}

export default function App() {
const [count, setCount] = useState(1);
const [val, setVal] = useState('');

const callback = useCallback(() => {
    return count;
}, [count]);

const useMemoCount=useMemo(()=>count,[count])

return <div>
    <h4>{count}</h4>
    <Child count={useMemoCount}></Child>
    {/* 这个是没有包装的 */}
    {/* <Children /> */}
    <div>
        <button onClick={() => setCount(count + 1)}>count</button>
        <input type="text" onChange={(e)=>setVal(e.target.value)}/>
    </div>
</div>;

}

同样的事情也适用于传递给 useEffect, useLayoutEffect, useCallback, 和 useMemo 的依赖项数组。
···

惰性取值

useMemo 的好处是你可以采用如下值：优化针对于当前组件高开销的计算，具有记忆功能

1
const a = {b: props.b}
然后惰性获取：

1
const a = React.useMemo(() => ({b: props.b}), [props.b])

useMemo 返回值.类似于Vue的computed

1 .返回一个 memoized 值。在依赖参数不变的的情况返回的是上次第一次计算的值
2 . 注意 每当依赖参数发生改变useMemo就会自动重新计算返回一个新的 memoized值

注意事项

1 .继承VS组合.class和实现.
2 .useMemo 的粒度是原子性的，useMemo 中用到其他引用类型也要做 memo，否则在某些场景下 useMemo 可能会失效。比较复杂的业务场景建议配合 useWhatChanged 和 Profile 一起食用。

image.png

3 .useMemo返回的事一个函数,目的是存储一段jsx.

image.png

1 .这种写法,每次 getStyleByColor 都会重新执行返回新的 props，即使第 1 点做对了也无法达到预期效果

使用场景

1 .开销大的场景都要使用memo.虽然渲染计算不需要大量的重绘渲染,但是渲染前会做的一些大量计算也会导致这种浪费,所以还是直接memo包起来比较好

const Counter = React.memo(({ count }) => {
  console.log('Counter 重新执行了！', count);

  // ...进行了一堆很复杂的计算！
  
  return <span>{count}</span>;
});

2 .和React.memo的区别:useMemo 的用例与 React.memo / shouldComponentUpdate / PureComponent 不同。这不是为了防止整个组件重新渲染，而是简单地记住一些数据。在使用上非常不相关。唯一的相似之处是 React.memo() 和 useMemo() 都涉及“如果您看到与上次相同的输入，请不要做任何额外的工作 - 返回您之前拥有的内容”，但 React.memo 用于结束整个组件，并且 useMemo() 用于您想从回调中返回的任何内容
3 .具有内联生成道具的组件将始终重新渲染（如style={{width: 100%}}.
4 .优化内联生成的 props 以确保组件不会总是重新渲染有其开销（代码可读性、资源

调试技巧

1 .字元素不一定是由父元素渲染而来,要在工具里面看他的render by属性

image.png

function App() {
  console.log("App - start render");
  React.useEffect(() => console.log("App - rendered"));
  return (
    <Parent>
      <Child />
      <Child />
      <Child />
    </Parent>
  );
}
1 .这样的代码,我们想当然会以为Child属性是由父组件创建出来的
2 .实际,子元素是被app创建出来,并且作为子道具"传递"给了父元素来渲染出来

return React.createElement(
    Parent,
    null,
    React.createElement(Child, null),
    React.createElement(Child, null),
    React.createElement(Child, null)
  );
//可以看出,是先创建出来,然后再传给父元素

3 .父元素代码

function Parent({ children }) {
  console.log("Parent - start render");
//一进来就执行,也就是render函数执行的时候
  React.useEffect(() => console.log("Parent - rendered"));
//这里是在渲染之后才会执行的
  const [count, setCount] = React.useState(0);
  return (
    <div className="parent">
      <button onClick={() => setCount(count + 1)}>increase {count}</button>
      {children}
    </div>
  );
}

4 .子元素代码

function Child() {
  console.log("Child - start render");
  React.useEffect(() => console.log("Child - rendered"));
  return <div className="child">child</div>;
}

5 .所以最后-render函数执行顺序,app,parent,child
6 .mount顺序,/child-redererd/,parent-rendered/,app-renderd

image.png

7 .因为child不是由parent创建的,所以点击父元素的事件,父元素重新渲染,但是子元素不会渲染,其根本原因就是这俩其实看起来是父子关系,实际上一点关系没有,相反,如果我们更新app里面的逻辑,就一定会导致child发生渲染
8 .其实这里最关键的是子元素的 render by,parent元素的根本区别

image.png