zoukankan      html  css  js  c++  java
  • React Hook 初学

    1. react: "^16.13.1" 
       React 16.8 的新增特性,取消原先class 类写法
       配合react 开发的库有antd UI 库,ramda 对react 相对友好的 js 工具类库。此项目用到 antd: "^3.26.16"   ramda: "^0.26.1"
       react hook 采用新的函数式组件写法,通过在不同的时机调用不同的hook来实现。
    2.  基础hook
     -  useState
         const [ num, setNum ] = useState(0);
         声明了一个state num初始化值为0,通过setNum() 来更新num 的值。此处有es6中的解构赋值,num 对应值为 0;
         声明多个state 的时候只需要多写几次useState就可以了,const [ num, setNum ] = useState({num: 1, age: 12 });  const [ num, setNum ] = useState([0,1,2,3 ]);  感觉有些麻烦。
     -  useEffect
        useEffect 该hook 接收一个函数,在该函数主体内,进行的一系列操作是不被允许的,如:改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作,会产生莫名奇妙的bug,什么鬼。useEffect 内的函数会在每      次渲染结束之后在执行,也可以自己选择性的在某些值发生变化时进行执行。此处含义类似vue2 里面的mounted 生命周期。
        定时器、延迟期、会造成内存泄漏需要在组件卸载之前就进行销毁的操作也可以在useEffect 函数主体内通过return 出对应的操作进行实现。此处含义类似vue2 里面的 beforeDestroy 生命周期。
        useEffect 默认是需要被延迟执行,有些特殊的需要在下次渲染更新的时候同步执行,react 提供了一个额外的useLayoutEffect
        每次在useEffect 的依赖发生变化的时候,都会执行useEffect 的函数体,可能不要过多的执行,只在一些特定的props 发生变化的时候进行操作,只需要在useEffect 接受的第二个参数进行指定就可以。 此处含义类似vue2 里面的watch 监听进行指定执行。 如果只需要被执行一次,可以在第二个参数传递一个空数组就可以。
     
     
    解决问题:
    解决方法: 删除node_modules包下载对应的关联依赖包之外,还可以在项目里面创建.env 的文件,skip_preflight_check=true添加到.env文件中。
     
  • 相关阅读:
    洛谷.3254.圆桌问题(最大流ISAP)
    BZOJ.2639.矩形计算(二维莫队)
    BZOJ.2724.[Violet 6]蒲公英(静态分块)
    BZOJ.4241.历史研究(回滚莫队 分块)
    BZOJ.4542.[HNOI2016]大数(莫队)
    SPOJ.COT2 Count on a tree II(树上莫队)
    BZOJ.3757.苹果树(树上莫队)
    洛谷.2325.[SCOI2005]王室联邦(贪心)
    BZOJ.1299.[LLH邀请赛]巧克力棒(博弈论 Nim)
    HDU.2516.取石子游戏(博弈论 Fibonacci Nim)
  • 原文地址:https://www.cnblogs.com/PengZhao-Mr/p/15047486.html
Copyright © 2011-2022 走看看