react Hooks ：useMemot的使用

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


function Counter(props) {

  return (
    <h1>{props.count}</h1>
  )
}

function APP(props) {

  const [count, setCount] = useState(0)

  const double = useMemo(() => {
    return count * 2
  }, [count === 3])
  //count === 3一开始等于false,当count为3的时候count === 3变成了true，发生改变触发函数，当count为4的时候count === 3变成了false，发生改变触发函数
  //useMemo和useEffect类似，只不过useMemo是在渲染期间完成的
  //useMemo是可以有返回值的，返回值可以直接参与渲染
  //当useMemo 返回的是一个函数的时候，就可以用useCallbck代替
  // useMemo(()=>fn) 等价于 useCallbck(fn)
  return (
    <div>
      <button
        type="button"
        onClick={() => { setCount(count + 1) }}
      >
        Click({count}),double:{double}
      </button>
      <Counter count={count} />
    </div>
  )
}

export default APP