对于useEffect，useCallback，useMemo的疑问

Question

useEffect，useCallback，useMemo分别在什么情形下使用

在写一个checkbox的组件，但是不确定应该把handleChange方法放在哪？？

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './index.scss'


export default function Checkbox ({
  checked,
  onChange,
  disabled,
  type,
  children
}) {

  const handleChange = e => {
    //
  }

  const classes = classNames({
    'checkbox__icon': true,
    'checkbox--disabled': disabled,
    'checkbox--checked': checked
  });

  return (
    <div data-checkbox-type={type}>
      <p className="checkbox" onClick={handleChange}>
        <i name="success" className={classes}></i>
        <span className="checkbox__label">
            {children}
        </span>
      </p>
    </div>
  )
}

Checkbox.defaultProps = {
  checked: false,
  onChange: () => {},
  disabled: false,
  type: ''
}

Checkbox.propTypes = {
  checked: PropTypes.bool,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  type: PropTypes.string
}

Answer 1

handleChange 就是一个方法，用不到这三个。

很难几句话讲的好这三个用处。
给你推荐一篇blog。多看几遍，多看几遍，多看几遍。
react hook

useHook

Answer 2

附上一点个人在开发过程中的理解吧，
这三个区别还是挺明显的，
useEffect是在函数组件中实现像类组件中的生命周期那样某个阶段做某件事情(主要是componentDidMount，componentDidUpdate 和 componentWillUnmount)，比如

useEffect(() => { getStuInfo({ id: stuId }); }, [getStuInfo, stuId]); //依赖项改变时调用getStuInfo函数

而useCallback和useMemo都是性能优化的手段，区别是
useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次都去重新渲染这个子组件，

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

useMemo返回的的是一个值，用于避免在每次渲染时都进行高开销的计算

const text = useMemo(() => (type === '1' ? '成功' : '失败'), [type]);

所以你这个可以用useCallback包裹或者都不用