useMemo

来源 memo,PureComponent,shouldComponentUpdate

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改变，子组件都会重新渲染一遍

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 .

注意

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值