react中hooks使用useMemo

react中memo指针的是一个组件是否重复渲染

useMemo针对的是定义了一段函数逻辑是否重复执行

useMemo和useEffect两者语法是一致的，两者区别是useEffect执行的是副作用，一定是在渲染后执行的，useMemo是需要返回值的，返回值直接参与渲染，因此useMemo是在渲染时执行的，

const Couter = memo(function Couter(props) {
  console.log('Couter render')

  return (
    <div onClick={props.clickHandle}>{props.count}</div>
  )
})
function App2() {
  const [count, setCount] = useState(0);

  const db = useMemo(() => {
    return count * 2;

  }, [count])

  return (
    <div>
      <Couter count={count}></Couter>
      <div>{db}</div>
      <button onClick={() => { setCount(count + 1) }}>点击</button>
    </div>
  )
}

【count】只有在count变量发声了变化，才会重新计算，返回新的值

如果不传第二个参数，那么每次useMeom都会执行，传入变量，则是变量变化了才会执行useMemo中的逻辑

如果传入空数组useMemo只会运行一次

  const db = useMemo(() => {
    return count * 2;

  }, [count === 3])

如果传入的是一个逻辑判断，则是在满足条件的情况下，useMemo中的代码才会执行，然后子组件才会重新渲染

如果我们给子组件传入了一个事件，会导致每次子组件都会重新渲染

const Couter = memo(function Couter(props) {
  console.log('Couter render')

  return (
    <div onClick={props.clickHandle}>{props.count}</div>
  )
})

function App2() {
  const [count, setCount] = useState(0);

  const db = useMemo(() => {
    console.log(count)
    return count * 2;

  }, [count === 3])
  const clickHandle = () => {
    console.log('click')
  }
  return (
    <div>
      <Couter count={db} clickHandle={clickHandle}></Couter>
      <div>count is :{count}</div>
      <button onClick={() => { setCount(count + 1) }}>点击</button>
    </div>
  )
}

以上代码每次点击的时候都会触发子组件的渲染，就是因为传入了函数，(个人理解：因为每次点击的时候都创建了新的函数，以为发声了新的变化，然后触发了子组件的重新渲染)，解决办法

const clickHandle = useMemo(() => {
    return () => {
      console.log('click')
    }
  }, [])

以上代码等价于：

 const clickHandle = useCallback(() => {
    console.log('click')

  }, [])

第二个参数[]也就是让useCallback函数只运行一次