react的hook使用

react组件形式不外乎于class类组件与function函数式组件。
关于类组件与函数式组件的区别不再进行阐述。

在我们使用函数式组件的时候，想要实现部分类组件的特性。那么，在我们该如何编写呢？？？？

答案就是：React Hook 帮你实现

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

1. react hook类型

• useState()
• useEffect()
• useRef()
  …
  …
  【react hooks】

2.hook的使用

2.1 useState()

useState() : 用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

const [count, setCount] = useState(initCount）

count: 设置的一个变量属性
setCount: 更新对应变量的一个方法
initCount：count的默认值

使用示例 ：

import { useState } from "react";
const [count, setCount] = useState(100)

console.log(count) // 100

setCount(count => count + 50) 
console.log(count) // 150

setCount(3.14159)
console.log(count) // 3.14159

2.1 useEffect()

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook看做 componentDidMount，componentDidUpdate和 componentWillUnmount这三个函数的组合。
用法：
1.无第二个参数
默认加载完成后先执行一次，若该函数组件有改动则会再次执行
等价于 componentDidMount()+ componentDidupdate()

useEffect(()=>{
      console.log('logs')
  })

2.第二个参数为空数组
默认加载完成后先执行一次。后续不会再次执行。
等价于 componentDidMount()

import {useEffect} from "react";
 useEffect(() => {
 	console.log('logs')
  },[]);

3.第二个参数为一个依赖项
默认加载完成后先执行一次。唯有当依赖的值name发生改变，再次执行

import { useState, useEffect } from "react";
const [name, setName] = useState('bonnie')
useEffect(() => {
    console.log("logs");
  }, [name]);

2.1.1 useEffect() 的返回值

清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。

import {  useEffect } from "react";
useEffect(() => {
    console.log("logs");
    return () => {
      // 可执行一些清理工作
      console.log("执行下次effect之前，先执行这里");
    };
  }, []);

有一点需要注意： 如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。
如下应用实例：

import { useState, useEffect } from "react";
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);
  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA]);

  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 2), 2000);

    return () => clearTimeout(timeout);
  }, [varB]);

应函数里面有两个定时器，它们之间并没有关系，其实是两个不相关的副效应，不应该写在一起。正确的写法是将它们分开写成两个useEffect()

2.2 useRef()

ref 被用来给元素或子组件注册引用信息

import { useState, useEffect, useRef } from "react";
const inputEl = useRef(null);
const clickBtn = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.click();
    console.log("focus");
  };
 ...
 ...
<input ref={inputEl} type="file" style={{ display: "none" }} />
<button onClick={clickBtn}>open</button>

后续会持续更新。。。