hooks之useMemo和memo

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


/**
 * useMemo有返回值可以直接参与渲染
 */
function UseMemoAPI() {
  const [count, setCount] = useState(0)
  const [clickCount, setClickCount] = useState(0)

  const double = useMemo(() => {
    return count * 2
    // 此时运行2次,count等于3一次 count等于4一次,从false>true true>false
  }, [count == 3])

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click ({count})</button>
      double: {double}
      <Counter count={double} click={click} />
    </div>
  )
}

/**
 * memo
 * 只要父组件的值不变化,子组件就没必要渲染,
 * 如果父组件传递函数情况下,可以考虑useMemo来作为优化手段
 */

const Counter = memo(function (props) {
  console.log(1111)
  return (
    <h1 onClick={props.click}>{props.count}</h1>
  )
})

export default UseMemoAPI

memo和useMemo可以作为性能优化的手段