React中hooks

1.hooks 是一些可以让你在函数组件里 钩入 react state及生命周期的特点 hooks 只能在函数组件内使用

        我们可以使用class提供给状态也可以使用hooks提供状态

        但是在16.8之前 只能使用class提供状态 函数组件展示内容

        react组件是用来构建用户界面的

        根据状态来渲染ui这件事上 class并没有发挥它最重要的功能 组件之间很少用到类的继承 组件之间很少互相访问但是 并没有从react中删除类 

        函数式组件本身比较简单 可以很好的胜任根据状态渲染ui，而我之前说过 函数式组件没有状态 但是结合hooks后 可以让函数组件内具有维护状态的能力 并且带来了组建的逻辑复用 

2.useState是我们将要了解的第一个“Hook”

        useState为函数组件提供状态

        首先我们要导入useState函数 调用这个函数

        useState返回一对当前状态值和一个让你更新它的函数。此函数类似于类中的this.setState

        useState的唯一参数是初始状态  有两种格式 可以直接传值 也可以是一个回调函数 

        useState返回的函数也有两种格式 以下图为例 当传入的是回调时 状态是可以迭代累计的

setContent(Content+1)

//第二种
setCount((Content) => Content- 1)

        当我们想在界面实现一个倒计时的效果 

 

 优化一下

         页面刚打开 组件第一次渲染 会执行函数 并传入初始值

        点击按钮执行计时器 当状态发生改变 组件就会重新渲染 组件第二次渲染 再次执行函数 此时会拿到最新的状态值 而不是初始值

        所以可以得出 useState的初始值只会在组件第一次渲染时生效 后续获取到的都是最新的状态 状态更新就会整个组件重新运行一次 所以 React 只会在组件第一次渲染时使用状态的初值，随后组件会记住每次最新的状态值

3.useEffect 副作用

        除了渲染UI之外的其他操作，如Ajax，手动修改 DOM、localStorage 

        组件挂载时执行一次 组件更新时会执行

         当没有依赖项时 组件挂载和组件更新都会执行  组件挂载类似componentDidMount 组件更新类似componentDidUpdate

        当依赖项是空数组时 组件挂载时执行一次 组件挂载类似componentDidMount 。ajax常用在这种情况下 

        依赖项是数组 组件挂载执行一次 依赖项更新执行 组件挂载类似componentDidMount 实时监控依赖项变化

下面有个经典案例关于useEffect进入页面倒计时

        副作用函数还可以返回一个函数 这个函数为清理函数 用来清理副作用函数的副作用 

        清理函数在组件卸载时和下一次副作用函数调用之前都会执行 类似componentWillUnmount

 useEffect(() => {
    return() => {
        console.log('清理副作用')
    }
  }, [])

发送ajax请求模板

 useEffect(() => {
    const getData = async () => {
      const res = await axios({
        url: 'xxxxxxx',
        method: 'GET'
      })
      console.log(res)
    }

    getData()
  }, [])