【React】关于hooks学习思考笔记

前言

• 以前一开始学react时候，看的视频比较老，都没有讲hooks的，然后学出来只会写类组件，并且完全不知道咋运作的，都是按套路写。后来越学越深入后自然也就会了hooks。并且对类组件有了另一层理解。
• 以前我们写类组件，都是class xxx extend React.component对吧，但是为什么写个class就能渲染到页面上？这肯定不正常啊。我们学了语法都知道class里面的render实际是加在这个class的原型对象上，那么class它不可能自己调自己的render方法啊（因为class上没render,prototype有）。但不调render怎么渲染的？这就是因为生成了实例，在有个地方new了我们做的class，实例上就继承了原型上的render方法。
• 那么重点来了，我们渲染页面需要生成实例吗？

hooks必要性

• 16.8出的新特性。前言里我就写道，我们渲染页面为什么要生成实例？或者说我们渲染页面的话生成实例是否必要？

• 在没有框架的时代，我们用js渲染个页面很简单啊，写个函数，然后函数里面生成个dom，往dom上加想要的东西，放到需要的位置，然后把这个函数执行就行了。里面有用实例吗?没有。

• 那么为什么会产生实例来渲染页面？

• 实例有什么特点? 实例是类的具现化产物，本质是对象，上面有一些属性而已。

• 那么如果我们渲染个有状态的页面，比如一个组件是显示状态还是不显示状态，这个状态提供给别的组件使用。这时候按以前写的话很可能要在全局做个属性，一个组件显示不显示去改变这个属性，另一个组件去读这个属性。

• 当时es6的class才出来，大家想着用起来，由于类的实例对于状态管理很方便，于是就有了类组件。像上一条那种情况，状态写在实例里就不会污染全局，而且便于管理，每个实例都是一个自己的空间。再加上完善的生命周期，看起来好像很不错。

• 但是后来，大家发现，渲染一个页面其实没必要弄一个实例出来，需要状态的话，闭包也是可以的。如果使用闭包，那么函数组件就能拥有状态，不然状态无法一直存在。我们渲染一个页面，使用实例就会耗性能，因为实例上除了状态还会带出别的东西，比如它的生成类，以及生成类的原型等等。但是通过闭包来解决这些问题就比较巧妙，函数组件可以有需要就渲染，用到什么状态什么生命周期就把什么放闭包里，这样更加灵活。其实闭包和实例本质上说并没太大区别，都是把很多个属性封装在某个地方，只是实例相对于闭包来说功能更多，更完整。当然，更多更完整并不意味着好用，反而可能意味着更难去操纵和管理。

• hooks主要就是为了解决函数组件的状态而存在的。react从用fiber开始，就把每个组件变成一个fiber，而他们的状态就挂到hooks上，而hooks挂到fiber上。hooks是一个链表结构，每个节点都是用户写在组件的hook。实际usestate之类的状态使用闭包存起来，而说到闭包，就想到redux。没错，useState就是useReducer的语法糖，它最终会返回useReducer。所以react给每个组件的状态管理机，就很像是为每个组件创造了单独的store，并把修改store里属性的方法发出去。这里就不展开说了。

• 除了解决状态问题，hooks还有其他优势，比如写类组件实际我们写的是类，并不是实例，在调用的时候并不是用户在调用，所以用户根本不清楚this到底是谁，导致混乱。

• 另外就是它能很好的解耦。在写实例时候，如果有多个状态或者副作用，那么需要配合实例生命周期来写，导致状态组件耦合一起，但如果用hooks，可以很好的解耦，相同的依赖可以写在一起。

• 差不多就写这些，下面学习用法：

useState

• useState就跟以前写类组件搞个state然后setState差不多，不过这个设计想法倒是拐得到挺远，它是类似redux那种思路，把state和dispatch返回给你。学过redux的看到这立马就会使用了。
• 使用函数组件和类组件写个数字加一类比下：

import React from 'react';
import { useState } from 'react';
function App(props) {
  return (
    <div>
      <Counter1></Counter1>
      <Counter2></Counter2>
    </div>
  )
}
export default App;
class Counter1 extends React.Component {
  state = { number: 0 }
  render() {
    return (
      <div>
        {this.state.number}
        <button onClick={() => this.setState({ number: this.state.number + 1 })}> ++</button>
      </div>
    )
  }
}
function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  return (
    <div>
      <div>
        {state.number}
        <button onClick={() => setState({ number: state.number + 1 })}> ++</button>
      </div>
    </div>
  )

有些细节需要注意：
1、setState里面的对象会覆盖以前的state。比如初始值除了number还设了个name，但是setState的对象里不传name，就会没了。
2、异步逻辑需要注意状态。比如我在组件里使用setTimeout延迟+1，期间我又同步加一几次，但是异步时间到后触发时拿到的state是我还没同步加一的state。最终state又会改为异步执行后的结果。而不是加上同步执行后的结果。这个问题有2种解决方法。

• 第一种方法 setState传入函数：

function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  let add = () => {
    setState({ number: state.number + 1 })
  }
  let asyncAdd = () => {
    setTimeout(() => {
      setState((lastState) => ({ number: lastState.number + 1 }))
    }, 4000);
  }
  return (
    <div>
      <div>
        {state.number}
        <button onClick={add}> ++</button>
        <button onClick={asyncAdd}>async</button>
      </div>
    </div>
  )
}

• 传入的函数能接收到最新的state,使得其能拿到最新的值。

• 第二种方法 useRef解决:

function Counter2(props) {
  let refNumber = useRef()
  let [state, setState] = useState({ number: 0 })
  let add = () => {
    setState({ number: state.number + 1 })
    refNumber.current = state.number + 1
  }
  let asyncAdd = () => {
    setTimeout(() => {
      setState({ number: refNumber.current + 1 })
    }, 4000);
  }
  return (
    <div>
      <div>
        {state.number}
        <button onClick={add}> ++</button>
        <button onClick={asyncAdd}>async</button>
      </div>
    </div>
  )
}

• 这个useRef和createRef很像，区别在于React.createRef返回都是新对象，而useRef每次都是同一个对象。可以试试如果这里使用React.createRef是不行的。
• 这玩意有点像组件的全局变量，每次都可以拿到它。

3、useState可以传入函数进行惰性初始化。

• 这个惰性初始化前面在redux那篇里写过，还专门把源码翻出来。再复习下，就是connect里面第二个参数是mapDispatchToProps，内部实现会使用bindActionCreators。这玩意是为了使组件在属性上拿到dispatch action的方法，由于每次渲染都会走一遍组件，直接执行这个函数或者普通写法导致重新绑定action浪费性能。所以使用惰性初始化。
• 其实学了上面useRef感觉好像可以用useRef代替useState的惰性初始化，但实际情况是不行的，useRef的初始值传入函数会每次执行。虽然给你的是一个对象。
• 所以这个惰性初始化主要玩的还是里面那个函数，如果需要那个函数每次渲染就执行一次，就可以放进去。

4、setState传和之前相同的对象，则组件不会更新。注意，这里说的同一个是指直接拿这个state传给它，而不是声明一个新变量或者解构后的值和原来相同。
5、react需要保证每次渲染钩子数量一样，所以钩子只能放函数里的外层。不能放到条件或者内嵌函数里面。

useCallback

• 每次渲染会导致组件里函数跟上次不是一个函数，可以使用useCallback进行缓存：

let previousFunc
function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  let add = useCallback(() => {
    setState({ number: state.number + 1 })
    console.log('funcgo');
  }, [])
  console.log(previousFunc === add);
  previousFunc = add
  return (
    <div>
      <div>
        {state.number}
        <button onClick={add}> ++</button>
      </div>
    </div>
  )
}

• 第一次打印false，后面都会打印true。如果把useCallback去了，打印会发现每次都是false。
• 但是会发现，数字只执行了一次就不能加了。因为函数缓存的时候那个state变成了闭包，所以跟useEffect一样，可以放依赖变量来进行更新函数。

 let add = useCallback(() => {
    setState({ number: state.number + 1 })
    console.log('funcgo');
  }, [state.number])

• 所以这里就有个很好的优化点。一个函数组件里面可能会有多个useState，然后就有多个state，别的state更新跟你这个方法没关系，所以就可以不用更新方法，进行缓存。轮到你的state变化了，再进行更新方法。

useMemo

• 我第一次听这玩意还以为是啥牛b的东西。原来memo就是memory缩写。
• 这个是为了解决按需渲染的问题。
• 一般情况，父组件刷新了子组件会跟着刷新，但是子组件明明状态没改变干嘛要刷新，所以就可以使用这个方法。

function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  let [state2, setState2] = useState({ number: 0 })
  let add = useCallback(() => {
    setState({ number: state.number + 1 })
  }, [state.number])
  let add2 = useCallback(() => {
    setState2({ number: state2.number + 1 })
  }, [state2.number])
  let data = { number: state.number + 1 }//模仿需要父组件数据进行处理
  return (
    <div>
      <div>
        {state.number}
        <button onClick={add}> ++</button>
      </div>
      <div>
        {state2.number}
        <button onClick={add2}> ++22++</button>
      </div>

      <Child onButtonClick={add} data={data}></Child>
    </div>
  )
}
function Child(props) {
  const { onButtonClick, data } = props
  console.log('child');
  return (
    <div>
      <div>
        {data.number}
        <button onClick={onButtonClick}> ++</button>
      </div>
    </div>
  )
}

• 我们先复现下场景。
• counter2里面有2个状态，都在counter2上显示出来。然后counter2还渲染另一个子组件，并把状态处理下传给子组件。
• 可以发现，在父组件无论使用哪个state的方法加一，都会使得子组件刷新。事实上子组件只依赖state，跟state1没关系。
• 于是就可以使用memo优化：

function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  let [state2, setState2] = useState({ number: 0 })
  let add = useCallback(() => {
    setState({ number: state.number + 1 })
  }, [state.number])
  let add2 = useCallback(() => {
    setState2({ number: state2.number + 1 })
  }, [state2.number])
  //let data = { number: state.number + 1 }//模仿需要父组件数据进行处理
  let data = useMemo(() => ({ number: state.number + 1 }), [state])
  return (
    <div>
      <div>
        {state.number}
        <button onClick={add}> ++</button>
      </div>
      <div>
        {state2.number}
        <button onClick={add2}> ++22++</button>
      </div>

      <Memochild onButtonClick={add} data={data}></Memochild>
    </div>
  )
}
function Child(props) {
  const { onButtonClick, data } = props
  console.log('child');
  return (
    <div>
      <div>
        {data.number}
        <button onClick={onButtonClick}> ++</button>
      </div>
    </div>
  )
}
let Memochild = memo(Child)

• 就是把组件用memo包一层。这个memo就是个高阶组件，然后渲染它。
• 如果没有注释的那句话，直接把state传给data，那么点击add2，子组件不会刷新。由于模拟了对父组件状态进行处理，所以每次父组件刷新都会去执行赋值，导致子组件刷新。
• 于是使用useMemo对其进行缓存。
• 其实useCallback能达成和useMemo一样的效果:

let data = useCallback(({ number: state.number + 1 }), [state])

• 改了后一样子组件不会刷新。

useReducer

• 这玩意就跟redux那套差不多。没懂的可以先去看redux。

const [state, dispatch] = useReducer(reducer, initialArg, init);

• 接收三个参数，reducer就是自己弄个reducer。
• initialArg是初始参数
• init是初始函数。初始参数会传给初始函数。

function reducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return { number: state.number + 1 }
    case 'MINUS':
      return { number: state.number - 1 }
  }
}
function initialFunc(initialArg) {
  return { number: initialArg }
}
function Counter2(props) {
  let [state, dispatch] = useReducer(reducer, 0, initialFunc)
  return (
    <div>
      <div>
        {state.number}
        <button onClick={() => dispatch({ type: 'ADD' })}> ++</button>
        <button onClick={() => dispatch({ type: 'MINUS' })}> --</button>
      </div>
    </div>
  )
}

• 可以发现useReducer可以自己操作的地方变多了，非常实用，比较适合新状态复杂的情况，如果简单就用useState。
• 最后那个初始函数可以不传，直接在第二个参数返回对象就可以了。

useContext

• 这个用的挺多的，store那些都是通过这个传的。
• 用起来也很简单，可以这样记忆：我需要用React.createContext来创建一个闭包空间。这玩意还自带一个Provider用来包裹子组件，所有子组件可以通过useContext传入前面的闭包空间来获取里面的东西。

let Context = React.createContext()
function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  return (
    <Context.Provider value={{ state, setState }}>
      <Child></Child>
    </Context.Provider>
  )
}
function Child(props) {
  let { state, setState } = useContext(Context)
  return (
    <div>
      {state.number}
      <button onClick={() => setState({ number: state.number + 1 })}> ++</button>
    </div>
  )
}

useEffect

• 这个钩子可以实现以前didmount、didupdate，willunmount的功能。
• 我们可以先用类组件写个把state渲染到标题的副作用，对比函数组件看一下:

class Counter1 extends React.Component {
  state = { number: 0 }
  componentDidMount() {
    document.title = this.state.number + ''
  }
  componentDidUpdate() {
    document.title = this.state.number + ''
  }
  render() {
    return (
      <div>
        {this.state.number}
        <button onClick={() => this.setState({ number: this.state.number + 1 })}> ++</button>
      </div>
    )
  }
}

• 可以看见，didmount需要变一下，didupdate就是更新状态后还得写一遍。
• 函数组件就不一样了：

function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  useEffect(() => {
    document.title = state.number + ''
  })
  return (
    <div>
      <p>
        {state.number}
      </p>
      <button onClick={() => setState({ number: state.number + 1 })}>++++</button>
    </div>
  )
}

• 这个就一个useEffect抵得上原来2个地方都要写。
• 如果只想要didmount的效果，那就给useEffect第二个参数再传个空数组。这样就只会didmount渲染次就没了。
• 如果只想要didupdate的效果，那么找个变量做个判断，初次渲染不加就可以了：

  useEffect(() => {
    if (!mount) {
      mount = true
    } else {
      document.title = state.number + ''
    }
  })

• 这样单独要其中一种效果或者2种效果都要就都可以实现。
• 第二个参数是依赖项，可以看成条件执行函数的简写。相当于每次要渲染时对比数组里元素和上次渲染的元素是否相同，空数组就代表始终相同。相同就不会执行，不相同就会执行。
• useEffect的清除副作用时靠返回值：

function Counter2(props) {
  let [state, setState] = useState({ number: 0 })
  useEffect(() => {
    let timer = setInterval(() => {
      setState(prev => ({ number: prev.number + 1 }))
    }, 1000);
    return () => { clearInterval(timer) }
  })
  return (
    <div>
      <p>
        {state.number}
      </p>
      <button onClick={() => setState({ number: state.number + 1 })}>++++</button>
    </div>
  )
}

• 这里开个定时器，然后每秒加一。如果不传空数组，这个useEffect每次都会因刷新而执行。如果没有返回值，setInterval每次执行产生的计时器在内存里就会越来越多。所以要提供清除它计时器的方式。这个清除方式一般叫unEffect函数。
• 每次执行effect会先执行下unEffect，这样就能确保只有一个定时器在跑了。

useRef

• 这个useRef前面在useState里面讲了点。
• 这个还可以获得dom引用拿到dom

function Counter2(props) {
  let inputRef = useRef()
  let getFocus = () => {
    inputRef.current.focus()
  }
  return (
    <div>
      <p>
        <input type="text" ref={inputRef}></input>
      </p>
      <button onClick={getFocus}>++焦点++</button>
    </div>
  )
}

• 另外，useRef可以作为别的属性传递给子组件。ref为保护属性，函数组件是不能使用ref属性的。类组件可以使用ref属性，因为其一直存在。

function Counter2(props) {
  let inputRef = useRef()
  let getFocus = () => {
    inputRef.current.focus()
  }
  return (
    <div><Child ref22={inputRef}></Child>
      <button onClick={getFocus}>++焦点++</button>
    </div>
  )
}
function Child(props) {
  return (
    <div>
      <p>
        <input type="text" ref={props.ref22}></input>
      </p>
    </div>
  )
}

• 还有种方法可以达到相同的效果，就是使用fowardRef将子组件包装下：

function Counter2(props) {
  let inputRef = useRef()
  let getFocus = () => {
    inputRef.current.focus()
  }
  return (
    <div><Forwarded ref={inputRef}></Forwarded>
      <button onClick={getFocus}>++焦点++</button>
    </div>
  )
}
function Child(props, ref) {
  return (
    <div>
      <p>
        <input type="text" ref={ref}></input>
      </p>
    </div>
  )
}
let Forwarded = forwardRef(Child)

• 这样传入函数组件时除了Props还会收到ref，父组件就能拿到子组件的dom了。

useImperativeHandle

• 由于前面使用useRef会使得父组件拿到子组件的dom，除了focus还可以使用别的方法，比如value就是给input输入框添加字符串。
• 但是这样父组件权限太高，于是就会有这个钩子将父组件传给子组件的ref值替换调，让父组件调用已替换里面的方法，这样，父组件就不能调用子组件用钩子定义之外的方法了。
• 其实就是给父组件增加操作子组件的权限。

function Counter2(props) {
  let inputRef = useRef()
  let getFocus = () => {
    inputRef.current.focus()//方法名对应handle的对象里方法
    inputRef.current.value = 'yyyy'//由于ref拿到的不是dom所以没有value就不会成功，优点可以不报错。
  }
  return (
    <div><Forwarded ref={inputRef}></Forwarded>
      <button onClick={getFocus}>++焦点++</button>
    </div>
  )
}
function Child(props, ref) {
  let newRef = useRef()
  useImperativeHandle(ref, () => ({
    focus() {//父组件调用方法名，自己取
      newRef.current.focus()//实际操作的方法
    }
  }))
  return (
    <div>
      <p>
        <input type="text" ref={newRef}></input>
      </p>
    </div>
  )
}
let Forwarded = forwardRef(Child)

• 这个就很像以前我们经常用的Object.defineProperty。在访问这个对象时修改对象的get和set，增加额外逻辑。
• 其实就是父组件ref的current = 回调函数的返回值。

useLayoutEffect

• 讲这个钩子必须先将下浏览器运行顺序。
• 一般来说，浏览器是有个html解析器产生dom树，还有个css解析器产生css规则，两者结合生成render tree。注意，此时还没开始渲染，只拿到render tree。useLayoutEffect就是在这时候工作的。然后下一步才开始是绘制出页面。然后绘制好了就是useEffect工作。
• 我们使用alert可以阻塞的特性来看一下：

function Counter2(props) {
  let [color, setState] = useState('red')
  useEffect(() => {
    alert('useEffect' + color)
  })
  useLayoutEffect(() => {
    alert('useLayoutEffect' + color);
  })
  return (
    <div>
      <div style={{ backgroundColor: color }}>xxxxxxxxxxxxxxxx  </div>
      <button onClick={() => setState('yellow')}>黄</button>
      <button onClick={() => setState('green')}>绿</button>
    </div>
  )
}

• 这里alert的颜色2者都是一样的。但是区别就是，useLayoutEffect的alert时颜色还没被换掉。而useEffect是在颜色已经换掉后才alert。
• 特别注意，useLayoutEffect在alert时虽然颜色没替换掉，但是拿到的render tree已经是最新的了，所以直接去取dom也是最新的状态，而不是你看见的老状态。

自定义hook

• 如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook。
• 注意：自定义hook它是实现逻辑复用，而不是状态复用。
• 就类似你执行后生成各自独有的闭包一样。

function useCounter() {
  let [number, setNumber] = useState(0)
  useEffect(() => {
    setInterval(() => {
      setNumber(prev => prev + Math.random())
    }, 1000);
  }, [])
  return number
}
function Counter1(props) {
  let number = useCounter()
  return (
    <div>
      {number}
    </div>
  )
}
function Counter2(props) {
  let number = useCounter()
  return (
    <div>
      {number}
    </div>
  )
}

• 注意，这个自定义hook不用use开头会报错

• 这个自定义hooks可以用来包装useReducer做成logger中间件：

function useLogger(reducer, initialState, init) {
    const [state, dispatch] = useReducer(reducer, initialState, init);
    let dispatchWithLogger = (action) => {
        console.log('old state', state);
        dispatch(action);
    }
    useEffect(function () {
        console.log('new state', state);
    }, [state]);
    return [state, dispatchWithLogger];
}

• 老状态简单，就是dispatch前加自己逻辑。新状态就得用useEffect。在状态变更后加自己逻辑。
• 还可以做成promise的中间件

function reducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return { number: state.number + 1 }
    case 'MINUS':
      return { number: state.number - 1 }
  }
}
function usePromise() {
  let [state, dispatch] = useReducer(reducer, { number: 0 })
  let mydispatch = (action) => {
    action.then(res => {
      dispatch(res)
    })
  }
  return [state, mydispatch]
}
function Counter2(props) {
  let [state, dispatch] = usePromise()
  let promiseadd = () => {
    dispatch(new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ type: 'ADD' })
      }, 1000);
    }))
  }
  return (
    <div>
      {state.number}
      <button onClick={promiseadd}>promise+</button>
    </div>
  )

• 主要就是在点击时派发一个promise，模拟去取数据，获取完数据后再派发修改状态的操作。
• usePromise就是自己定义个方法把dispatch包装下，跟上面思路大同小异，运行then后拿到resolve的action进行派发。
• 还有派发函数的中间件thunk:

function useThunk() {
  let [state, dispatch] = useReducer(reducer, { number: 0 })
  let mydispatch = (action) => {
    if (typeof action === 'function') {
      action(dispatch, () => state)
    } else {
      dispatch(action)
    }
  }
  return [state, mydispatch]
}
function Counter2(props) {
  let [state, dispatch] = useThunk()
  let thunkadd = () => {
    dispatch(function (thunkdispatch, getstate) {
      setTimeout(() => {
        thunkdispatch({ type: 'ADD' })
      }, 1000);
    })
  }
  return (
    <div>
      {state.number}
      <button onClick={thunkadd}>thunkadd+</button>
    </div>
  )
}

• 都是一个套路。就是dispatch过去可能function，就执行它，否则就派发。上面的promise则是看action有没有then方法，有then暂且认为它是promise，那么就调then把其resolve的action派发。
• 还有请求自定义hook的写法：

function Counter1(props) {
  const [users, loadMore] = useRequest('http://localhost:8000/api/users');
  if (users === null) {
    return <div>加载中....</div>
  }
  return (
    <>
      <ul>
        {
          users.map((item, index) => <li key={index}>{item.id}:{item.name}</li>)
        }
      </ul>
      <button onClick={loadMore}>加载更多</button>
    </>
  )
}
function useRequest(url) {
  let limit = 5
  let [offset, setOffset] = useState(0)//偏移，从第几个开始加载
  let [loading, setloading] = useState(false)//用来控制useEffect调用，保证点击按钮后执行。
  let [data, setData] = useState([]);//数据存放
  useEffect(() => {
    async function reqfunc() {
      setData(null)//用来显示加载中
      let newData = await fetch(`${url}?offset=${offset}&limit=${limit}`).then(res => res.json())
      setData([...data, ...newData])//合并
      setOffset(offset + newData.length)
    }
    reqfunc()
  }, [loading])
  function loadMore() {
    setloading(!loading)
  }
  return [data, loadMore];
}

• 这里有争议的就是setData(null)之后为啥还能解构它。其实就是setData后是不能马上拿到新状态，拿的还是老状态，所以前面自定义hook第一个logger例子里马上取就取不到，通过useEffect才拿到修改后的状态。

• 还可以动态修改类名做成动画：

• 先写个css：

.circle{
  width:50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  transition: all 1s; 
}
.circle-bigger{
  width: 200px;
  height: 200px;
}
.circle-smaller{
  width: 10px;
  height: 10px;
}

• 这样添加类名就能变大变小了，都要包含circle这个className。

function useAnimation(initialClassName) {
  const [className, setClassName] = useState(initialClassName);//修改类名
  function bigger() {
    setClassName(`${initialClassName} ${initialClassName}-bigger`);
  }
  function smaller() {
    setClassName(`${initialClassName} ${initialClassName}-smaller`)
  }
  return [className, bigger, smaller];
}
function Counter1(props) {
  const [className, bigger, smaller] = useAnimation('circle');
  return (
    <div>
      <button onClick={bigger}>bigger</button>
      <button onClick={smaller}>smaller</button>
      <div className={className}></div>
    </div>
  )
}

• 点击按钮试试，可以变大变小即为成功。