memo && useMemo && useCallBack

import React,{useState,memo} from 'react'



function App(){
  const [n,setN] = useState(0)
  const [m,setM] = useState(11)

  const onClick = () => {
    setN(n+1)
  }

  return (
    <div className="App">
      <button onClick={onClick}>update n {n}</button>
      <Child data={m}/>
    </div>
  )
}


function Child(props) {
  console.log('这里有很多很多的代码')
  return <div>child:{props.data}</div>
}

export default App

数据没有更新但是被渲染了，浪费性能

import React,{useState,memo} from 'react'



function App(){
  const [n,setN] = useState(0)
  const [m,setM] = useState(11)

  const onClick = () => {
    setN(n+1)
  }

  return (
    <div className="App">
      <button onClick={onClick}>update n {n}</button>
      <Child data={m}/>
    </div>
  )
}

const Child = memo((props) => {
  console.log('这里有很多很多的代码')
  return <div>child:{props.data}</div>
}
)

export default App

但是这里还是有个bug

import React,{useState,memo} from 'react'



function App(){
  const [n,setN] = useState(0)
  const [m,setM] = useState(11)

  const onClick = () => {
    setN(n+1)
  }

  const onClickChild = () => {}

  return (
    <div className="App">
      <button onClick={onClick}>update n {n}</button>
      <Child onClick={onClickChild} data={m}/>
    </div>
  )
}

const Child = memo((props) => {
  console.log('这里有很多很多的代码')
  return <div onClick={props.onClick}>child:{props.data}</div>
}
)

export default App

我们可以使用useMemo && useCallBack :注释代码为useMemo

import React,{useState,memo,useMemo,useCallback} from 'react'



function App(){
  const [n,setN] = useState(0)
  const [m,setM] = useState(11)

  const onClick = () => {
    setN(n+1)
  }

  const onClickChild = useCallback(()=>{
    console.log('ssss')
  },[m])

  // const onClickChild = useMemo(()=>{
  //   return ()=>{
  //     console.log(m)
  //   }
  // },[m])

  return (
    <div className="App">
      <button onClick={onClick}>update n {n}</button>
      <Child onClick={onClickChild} data={m}/>
    </div>
  )
}

const Child = memo((props) => {
  console.log('这里有很多很多的代码')
  return <div onClick={props.onClick}>child:{props.data}</div>
}
) 

export default App