第一次接触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