useEffect，useCallBack，useMemo 比较

useEffect

• useEffect(回调函数)

    没有传第二个参数时，在每次 render 之后都会执行 useEffect中的内容。
    这个回调函数 会在初次加载完成和更新完成之后触发,说白了就是类组件的 componentDidMount和componentDidUpdate的合体。

useEffect(() => {
  document.title = `点击了${count}次`
})

• useEffect(回调函数,[])  

    空数组 useEffect 只在第一次渲染时执行，由于空数组中没有值，始终没有改变，所以后续render不执行，相当于生命周期中的componentDidMount。

• useEffect(回调函数,[依赖]) 

    非空数组,无论数组中有几个元素，数组中只要有任意一项发生了改变，useEffect 都会调用

useEffect(() => {
  console.log('mounted')
  return function () {
    // 这个返回的回调函数 能执行多少次是根据上边的回调函数的执行次数决定的
  }
}, [count])

• 解决初始调用一次问题

// 只有setpositionInfo调用positionInfo变化的时候basicsLoadMore才会执行 解决初始positionInfo没有更改也会调用一次的问题
const [positionInfo, setpositionInfo] = useState({
  longitude: '',
  latitude: ''
})
useEffect(() => {
  basicsLoadMore()
}, [setpositionInfo])

useCallback 和 useMemo

• 相同点

    useCallback 和 useMemo 都是性能优化的手段，类似于类组件中的 shouldComponentUpdate，
    在子组件中使用 shouldComponentUpdate， 判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。

• 区别

    1.子组件memo处理 memo 处理过的组件 若传给组件的数据没有发生改变  那么组件就不会重新执行

function Child({ name }) {
    console.log('render')
    return <h1>{name}</h1>
}
Child = memo(Child)

    2.useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件。

const renderButton = useCallback(
  () => (
  <Button type="link">
    {buttonText}
  </Button>
),[buttonText]); // 当buttonText改变时才重新渲染renderButton

    3.useMemo返回的的是一个值，用于避免在每次渲染时都进行高开销的计算，类似于Vue里的计算属性。useMemo 一般用来缓存数据使用。useCallback 和 useMemo 的时候 都需要结合 memo函数进行优化。
 

// 只有依赖发生改变的时候  data才会被给成新的地址
let data = useMemo(() => {return 数据},[依赖]);
// 只有依赖发生改变的时候  minus才会被赋予一个新的函数地址
let minus = useCallback(函数体,[依赖]);

参考： useEffect，useCallBack，useMemo的区别 - 柠檬派的奇幻漂流 - 博客园

关于useEffect在组件结束销毁时使用记录_useeffect销毁_zhangzhuoz的博客-CSDN博客