学习React Hook后的一些理解

第一次接触React Hook是在9月份的一次面试中，当时面试官问我你知道Hook吗？我当时就是？？？（大家自行脑补表情包）

后来着急找工作，入职后刚开始也比较忙，渐渐都快忘记了这个事了。以至于React中文版中加了Hook之后一段时间我才看这个。

下面记录一些看了官方文档自己的一些记录及见解：

stateHook：

       在没有hook之前 无状态组件就是指函数组件，但是有了hook之后赋予了函数组件处理state的功能，其核心目的是为了状态处理逻辑的复用（在以前通常是用HOC和render props实现，个人一般是用HOC）。

stateHook的使用也是比较简单的：

const HookTest:SFC = () => {
    const [count, setCount] = useState(0);// 通过useState函数创建函数的state及state的处理函数

    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>增加</button>
        </div>
    )
}

 下面介绍useState方法：

观察useState的typeScript声明文档：

 可以看到useState接受一个任意类型的参数，然后返回一个长度为2的数组，数组中的第一个值是state，第二个值是一个函数

函数的参数可以为一个值或者是一个函数，如果是函数的话它有一个参数是更新之前的state。

effectHook：

effectHook是为了区分功能逻辑，防止功能逻辑被各种生命周期分割导致逻辑代码分散，effectHook的逻辑处理代码全部都在函数体内完成，无需像以前一样需要分别写在不同的生命周期中。effct的调用顺序取决于在函数组件中的声明顺序。effectHook在函数组件的每次更新中都会删除原来的effect然后创建新的effect

useEffect使用：

import React,{ useState, SFC, useEffect } from 'react';

const HookTest:SFC = () => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('maxiao')

    useEffect(() => {
        console.log('effect');
        document.title = count.toString();
        if(count > 5){
            setName('hyq');
        }
    },[count]);


    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>增加</button>
            <div>{name}</div>
        </div>
    )
}

export default HookTest;

下面介绍useEffect方法：

同样根据typeScript文档进行分析：

useEffect的第一个参数为一个回调函数，第二的参数为可选，类型为只读的数组。

回调函数是你在DOM更新完成后需要进行的操作，第二个参数：只有数组中的数据发生变化时才会执行回调。

 

还有useContext（我还没看完O(∩_∩)O）

其次还有很多派生出来的hook，直接上官网的截图吧：

当然你也可以自定义自己的hook，但是这个需要结合实际的业务逻辑才行。

 

这些都是自己看了官方文档之后自己整理出来的一些东西，也不知道是不是理解正确了，如有错误，望各位指出

 

over