react hooks 에서 useMemo 와 useCallback 의 차이 점

react hooks 가 제공 하 는 두 개의 API 는 캐 시 데이터 로 성능 을 최적화 합 니 다.
useMemo
데 이 터 를 캐 시 하 는 데 사용 합 니 다. 구성 요소 내부 에 있 는 렌 더 링 데 이 터 는 계산 을 통 해 계산 해 야 합 니 다. 이 계산 은 특정한 state, props 데이터 에 의존 하 는 것 입 니 다. 우 리 는 useMemo 로 이 데 이 터 를 캐 시 합 니 다. 그래서 우 리 는 그들 이 의존 하지 않 는 데이터 원본 을 수정 한 상황 에서 이 계산 함 수 를 여러 번 호출 하여 계산 자원 을 낭비 합 니 다.
직접 코드

import React, {
      useState, useMemo } from 'react';

function Info(props) {
     
  let [personalInfo , setPersonalInfo] = useState({
     
    name: 'kevin kang',
    gender: 'male'
  })

  function formatGender(gender) {
     
    console.log('---          ---')
    return gender === 'male' ? ' ' : ' '
  }


  // BAD 
  //    useMemo    ，      ，      formatGender  ，      
  // let gender =  formatGender(personalInfo.gender)

  // GOOD
  let gender = useMemo(()=>{
     
    return formatGender(personalInfo.gender)
  }, 
  [personalInfo.gender])

  return (
    <>
        <div>
            ： {
     personalInfo.name} --   :  {
      gender } <br/>
          <button onClick={
      
            ()=> {
      
              setPersonalInfo({
     
                ...personalInfo,
                name: 'Will Kang'
              }) 
            }  
          }>       </button>
        </div>
    </>
  )
}

export default Info

useCallback
캐 시 함수 입 니 다. 이 함 수 는 부모 구성 요소 가 하위 구성 요소 에 전달 하거나 hooks 안의 함 수 를 사용자 정의 합 니 다. [일반적으로 hooks 안의 함 수 를 사용자 정의 합 니 다. 구성 요소 의 데 이 터 를 참조 하 는 데 의존 하지 않 습 니 다] 이 때 우 리 는 캐 시 함수 의 장점 을 고려 할 수 있 습 니 다.
1. 매번 새로운 함 수 를 다시 설명 하지 않 아 도 메모리 방출, 메모리 할당 의 계산 자원 낭비 2 를 피 할 수 있 습 니 다. 하위 구성 요 소 는 이 함수 의 변동 으로 다시 과장 되 지 않 습 니 다.[React. memo 와 함께 사용]

import React, {
      Component, useState, useEffect, useCallback } from 'react';

// BAD
// function ListItem(props) {
     
//   let addItem = props.addItem
//   useEffect(()=>{
     
//     console.log('   ListItem   ')
//   },[])
//   useEffect(()=>{
     
//     console.log('   render')
//   })
//   return (
//     
 { props.children } 
//   )
// }

// GOOD shouldComponentUpdate
const ListItem = React.memo((props)=> {
     
  let addItem = props.addItem
  useEffect(()=>{
     
    console.log('   ListItem   ')
  },[])
  useEffect(()=>{
     
    console.log('   render')
  })
  return (
    <div onClick={
      addItem }> {
      props.children } </div>
  )
})

let count = 0
function List(props) {
     

  let [list, setList] = useState([])

  let [name, setName] = useState('Kevin')
  useEffect(()=>{
     
    setList([
      '6   ',
      '7   ',
      '8   '
    ])
  }, [])

  const addI = useCallback(()=>{
     
    list.push('   '+ count)
    setList([...list])
  }, [list])

  const modifyName = () => {
     
    setName('K3VIN' + (++count))
  }
  
  return (
    <>
      {
     
        list.map((item, index) => {
     

            return <ListItem key={
     index} addItem = {
      addI }> 
                    {
     item} 
                </ListItem>

        })
      }
           ： {
     name}  <button onClick={
     modifyName}>        </button>
    </>
  )
}

export default List

연습 집합: 창고 주소