react hook介绍

Posted 2023-05-12

参考技术A react hook是react中引入新特性，它可以让react函数组件也拥有状态；
通过自定义hook可以实现在组件间公用状态操作；

react提供了useState、useEffect两个hook函数来创建stack hook和effect hook

在函数组件内使用useState可以给组件使用状态；
useState的入参为初始状态，出参为当前state以及更新state的函数；

useState第一次执行时将创建一个状态，之后执行都是使用这个状态；

使用useEffect可以给组件添加副作用逻辑；
所谓副作用个人理解是与react范围外的世界产生的交互，如dom操作、网络请求等(说实话，副作用具体是啥我还没完全弄明白)；
useEffect入参有两个第一个参数是副作用函数、第二个参数是个用于判断是否执行副作用的数组；

副作用有一个执行过程和一个可选的清除过程，副作用函数定义了执行过程，它的返回值函数定义了清除过程；
在组件函数中定义的副作用像是渲染结果的一部分，副作用在每次渲染后都会执行，在渲染前、组件销毁前清除之前的副作用；这样做使得我们的副作用可以读到每次的props、state；

如果不想每次渲染都执行副作用，可以给useEffect第二个参数传一数组，当数组中的元素没有变化时，不会触发副作用；

自定义hook其实就是个内部使用了useState、useEffect的普通函数，并且函数名以use开头；
使用自定义hook可以将组件逻辑提取到可重用的函数中；

TODO
render props、高阶组件、effect性能优化的注意事项

react-hook的简单的动画插件react-simple-animate（其实是react插件，但是这里只介绍react-hook的简单用法）

1、useAnimate（普通anima动画的形式）

（1）js

  const animate = useAnimate({
    complete: { display: ‘none‘ },  //动画完成的css
    easeType: "linear", //动画的表现
    duration: 5,  //动画时长
    start: { opacity: 0 },  //动画开始
    end: { opacity: 1 },  //动画结束
    onComplete: () => { //动画结束的方法
      console.log(‘complete‘)
    }
  })

（2）dom

  <div style={animate.style}>123</div>

（3）动画播放方法

animate.play(true)

2、useAnimateKeyframes（关键帧动画的形式）

（1）js

  const animateFrames = useAnimateKeyframes({
    iterationCount: ‘infinite‘, //动画循环方式
    direction: ‘alternate‘, //动画方向
    duration: 5,  //时长
    keyframes: [    
      ‘transform: rotateX(0) rotateY(0) rotateZ(0)‘,
      ‘transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)‘,
    ]
  })

（2）其余与上面相同，只是在原来就有play方法的前提下多了一个pause的方法

3、useAnimateGroup（数组的形式）

（1）js

  const items = [‘R‘, ‘E‘, ‘A‘, ‘C‘, ‘T‘]
  const animateGroup = useAnimateGroup({
    sequences: items.map(() => ({
      start: { opacity: 1, transform: ‘translateY(0)‘ },
      end: { opacity: 0, transform: ‘translateY(-10px)‘ }
    }))
  })

（2）整体与anima方式相同，就是以数组的形式，就是变为"styles"

 

注意：在方法中包装了isPlaying和setIsPlaying，所以如果一个方法中包含多个动画，会产生互相影响（关键帧动画同理，isPaused和setIsPaused）