react house MemoとuseCallbackの違い

15690 ワード

react Hook sが提供する2つのAPIは、データをキャッシュするために使用され、性能を最適化する.
use Memo
データをキャッシュするためには、コンポーネントの内部にレンダリングされたデータが必要です.計算によって、この計算は特定の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
一つの関数をキャッシュします.この関数が親のコンポーネントからサブコンポーネントに伝達される場合、またはユーザー定義のヤフーksの関数である場合、「一般的にユーザー定義のヤフーの中の関数は、そのコンポーネントの中のデータを参照することに依存しません.」
1,新しい関数を再声明しなくても、メモリを釈放し、メモリを分配する計算資源の浪費を避ける.【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
練習セット:倉庫住所