react中常用的hooks在那种场景下面如何正确使用

第一个useState

 const [analysis, setAnalysis] = useState();

数组里面的第一个是你定义的属性名，数组里面的第二个参数是可以更改数组里面第一个属性的值 如何useState(“初始默认值或者是类型比如是一个空对象空数组或者null也可以”)

使用方法 setAnalysis(99)

这样analysis就是99了

第二个 useMemo

这个参数一般用于给子组件传递值的时候可以写一个函数用useMemo包裹一下返回注入监听参数，只有监听到值改变的时候才会取执行这个函数 这样可以减少子组件 render的更新次数减少性能的开支。把浏览器的线程让出来

具体用法

  const nameKeys = useMemo(() => {

    //可以在这里增加条件判断这里是根据你监听的参数变化需要返回的值

    return   defaultNameKeys;



  }, [这里就是你需要监听的参数可以是一个或者多个用逗号隔开就行]);

< Subassembly nameKeys ={nameKeys }>

第三个 useEffect
 useEffect(() => {
  	在这里执行你需要执行的方法和参数比如初始化的时候获取表格数据
  	return () => {
这里是销毁组件之前你可以执行你需要清除的方法比如定时器或者图表实例
      connection.disconnect();
  	};
  }, [注入监听的参数不传，默认的初始化只执行一次，]);

第三个 useCallback
这个和useMemo很像但是这个返回的是一个函数

  // 在多次渲染中缓存函数
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/', {
      orderDetails,
    });
  }, [productId, referrer]); // 只要这些依赖没有改变就会使用上一次的缓存改变了才会执行里面的函数
< Subassembly handleSubmit ={handleSubmit }>