Usememo简介

React.memo()是一个高阶函数，它与 React.PureComponent类似，是一个函数组件而非一个类。 React.memo()可接受2个参数，第一个参数为纯函数的组件，第二个参数用于对比props控制是否刷新，与shouldComponentUpdate()功能类似

  1. //parent.jsx
  2. import React, { useState} from "react";
  3. import Child from "../Child"
  4. const Index = () => {
  5.     const [count,setCount] = useState(0);
  6.     return (
  7.         <div>
  8.             <div>数量为{count}</div>
  9.             <button onClick={()=>{setCount(count+1)}}>点我加1</button>
  10.            <Child count={count}></Child>
  11.         </div>
  12.     )
  13. }
  15. export default Index

没有useMemo的问题

//案例存在的问题：每点击一次按钮，会重新渲染一次时间，但是每一次点击按钮的时候，父组件给子组件传递的都是相同的obj对象，为什么子组件还是会刷新呢?//原因是每一次点击按钮的时候，会重新刷新父组件，父组件中的obj会重新被实例化，所以新实例化的obj和上一次实例化的obj不是同一个对象

  1. import React,{useState} from 'react'
  2. import  Child from "./Childs"
  3. const Parent=()=>{
  4.     const [count,setCount]=useState(0);
  5.     const obj={
  6.         name:'zhangsan'
  7.     }
  8.     return (
  9.         <div>
  10.             <div>数量为:{count}</div>
  11.             <button onClick={()=>{setCount(count+1)}}>点我加一</button>
  12.             {/* 点击按钮改变的是count,向子组件传递的是obj，此时的obj没有发生变化，但是子组件也发生了页面渲染 */}
  13.             <Child obj={obj}> </Child>
  14.         </div>
  15.     )
  16. }
  17. export default Parent
  1. //修改前的child.jsx,这里修改count，这个子组件会发生渲染
  2. const Child=(props)=>{
  3.     const date=new Date()
  4.     return <div>
  5.         {date.toLocaleString()}
  6.     </div>
  7. }
  8. export default Child
  11. //修改后的jsx，这里修改count，这个子组件不会发生渲染
  12. import React,{memo} from "react"
  13. const Child=memo((props)=>{
  14.     const date=new Date()
  15.     return <div>
  16.         {date.toLocaleString()}
  17.     </div>
  18. },
  19. (prev,next)=>{
  20.     return prev.obj!==next.obj
  21. }
  22. )
  23. export default Child

useMemo的作用

  1. useMemo可以用来缓存一些变量，并指定哪些条件变化后重新计算缓存的变量。
  1. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  1. useMemo第一个参数是一个 factory 函数，该函数的返回结果会通过useMemo缓存下来
  3. 第二个参数是factory函数的依赖(deps)，当依赖(deps)改变时才重新执行 factory 函数，memoizedValue 才会被重新计算