useCallback, useEffect, useRef, useState 区别及用法

useCallback, useEffect, useRef, useState 区别 及用法

useRef 相当于绑定元素 然后获取值 然后对元素操作

 const imgRef = useRef<HTMLImageElement>(null);
  <img
        src={data.avatar || require('@/assets/img/headimg.png')}
        alt=""
        ref={imgRef}
    />

useCallback :使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新

  const onFormChange = useCallback(
    (key: string, value: string) => {
      setFormData({
        ...formData,
        [key]: value,
      });
    },
    [formData]
  );

useState 应用场景 就是相当于就是给项目一个初始值 然后通过初状态 改变

  const [visible, setVisible] = useState<boolean>(false);
    const openImg = (index: number) => {
    indexNumber(index);
    setVisible(true);
  };

useEffect 用法 页面加载 就渲染此方法 跟vue的created 的道理 还可以做信息依赖

  useEffect(() => {
    if (isAccount) {
      pick();
    }
    if (isCdk) {
      pickCdk();
    }
  }, [isAccount, isCdk]);