React Hook 详解

Hook 是 React16.8 的新增特性。
React Native 从 0.59 版本开始支持 Hook。
它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1、React.FC<>
React.FC<>的在typescript使用的一个泛型，FC就是Function Component的缩写，是函数组件，在这个泛型里面可以使用useState

2、什么是hooks
1】本质上就是一种特殊的函数，hooks可以在不编写 class类组件 的情况下使用 state 以及其他的 React 特性，广泛应用于react的函数组件里面。
2】类组件和函数组件
class类组件：
非常重，一个很小的功能模块的类组件，里面也包含一套自己的state（constructor构造函数）和完整的生命周期，多个父子组件相互调用，当state发生更新，render就会变得特别复杂。
函数组件：
非常轻量级和灵活，每个函数都是可复用的，但缺陷是函数是无状态的，所以需要用到state或者生命周期的时候，需要引入hooks。
3】命名：useXxx

3、有哪些hooks
1】useState
给函数组件里添加内部的 state
const [count, setCount] = useState(0);
第1个参数是state变量（getter），第2个参数是更新state的函数（setter）

2】useEffect 副作用钩子
副作用：与纯函数的概念相反，输入参数一样，而输出结果不确定，比如该函数涉及后端API请求，修改dom等操作。
Effect Hook 可以让你在函数组件中执行副作用操作，可用于取代生命周期函数componentDidMount、componentDidUpdate 和 componentWillUnmount
用法：
a、不传参数
useEffect(() => {
console.log(‘useEffect with no dependency’)
})
默认的行为，会每次 render 后都执行，一般表单控制中使用
类似于类组件中的componentDidMoount以及componentDidUpdate
b、空数组
传入第二个参数，每次 render 后比较数组的值没变化，不会在执行，类似于类组件中的 componentDidMount
useEffect(() => {
console.log(‘useEffect with empty dependency’)
}, [])
c、有一个或者多个值得数组
传入第二个参数，只有一个值，比较该值有变化就执行，
传入第二个参数，有2个值的数组，会比较每一个值，有一个不相等就执行
类似于类组件中的componentDidUpdate
useEffect(() => {
console.log(‘useEffect widh specify dependency’)
}, [state, props])
d、返回一个函数
返回时传递一个函数进行卸载，在组件卸载时候调用，类似于类组价中componentWillUnmout
useEffect(() => {
console.log(‘useEffect widh specify callback’);
　　return () => {
　　　　console.log(‘useEffect with specify callback’);
　　}
})
注意：
useEffect里面async/await不允许直接使用，可以在内部另外创建1个异步函数

3】useContext 上下文钩子
class 类组件是用 props 传值的，而函数组件没有了constructor构造函数也就没有了props 的接收，而useContext可以帮助我们跨越组件层级直接传递变量
a、与redux的异同
useContext：解决的是组件之间值传递的问题
redux：是应用中统一管理状态的问题
b、用法
const TestContext = React.createContext({});
父组件传递变量给子组件

子组件接受变量：

4、高阶组件 HOC
1】定义
高阶组件是一个函数（高阶函数），参数是一个原组件，返回值是一个经过改造的新组件
注意：高阶组件不是组件
2】高阶组件的好处
a、抽取重复代码，实现组件复用
b、条件渲染，控制组件的渲染逻辑（渲染劫持）
c、捕获/劫持被处理组件的生命周期
3】实际应用
a、mobx-react就是高阶组件是一个实际应用
@observer装饰器将组件包装为高阶组件，传入组件MyComponent后，mobx-react会对其生命周期进行各种处理，并通过调用forceUpdate来进行刷新实现最小粒度的渲染。
b、鉴权判断
1.页面按钮所在的组件 2.封装了鉴权逻辑的高阶组件 3.公共按钮组件