React Hooks简介
Hook是React 16.8新增加的新特性，可以让开发者在不用编写class组件的情况下使用state以及其他的一些在类组件中才可以使用的属性。
Hooks的特点
- 完全可选的，hooks的使用是非必须的，可以根据实际的需要进行选择使用。
- Hooks是100%向后兼容的，并且不包含任何的破坏性的改动。
- React Hook已经在16.8的版本中发布了。
使用Hooks的原因
-
可以解决在组件之间复用状态逻辑很难的问题,使用 Hook 时不需要很深的组件树嵌套：React以前没有提供可复用行为附加到组件的方式，例如把store连接到组件的时候需要通过高阶组件的方式来实现。过度的使用高阶组件实现逻辑复用的时候，会出现严重的组件嵌*象。在这样的情况下，组件的代码逻辑是不便于理解的，所以需要在React原生层面，找到一种解决状态逻辑共享的解决办法。 -
为了让复杂的组件变的易于理解：组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。 -
降低class代码的理解难度：在class组件里面，需要关心this关键字的指向，以及this关键字的工作机制。Hooks可以让开发者在非class组件中也可以使用相同的react特性，而不用太考虑this关键字的指向和工作机制。可以在一定程度上降低学习和使用难度。 -
Hook使用在函数式组件中：函数式组件使用起来比较轻便，简单 -
减少重复代码：比如useDispatch,useSelector Hook可以不使用connect进行连接，不用先获取函数以及数据再进行返回，可以直接在函数中获取到dva中的存储值以及函数
React Hooks概览
-
useState()：useState()是众多Hooks方法之一，可以在函数组件中调用useState()方法给组件内部添加一些state以及改变state的方法。React在重复渲染组件的时候会保留state。useState()方法返回的是一对值，一个state状态和一个可以改变这个state状态的函数。可以在组件中调用这个函数来改变组件中的state的状态。这样的操作方式类似于在class组件中通过this.setState()改变组件状态的操作。但是useState()不会把新的state状态和旧的state状态合并。useState()会接受一个参数作为state状态的初始值。程序实例：
const [age, setAge] = useState(42); //useState()方法中是age的初始值，useState()方法返回了age状态和改变age状态的方法setAge。
const [fruit, setFruit] = useState('banana');
<button onClick={() => setAge(100)}>Click</button>
-
Effect Hook：useEffect()就是一个Effect Hook。useEffect()在函数组件中的作用相当于，componentDidMount()、componentDidUpdate()和componentWillUnmount()可以给函数组件增加操作副作用的能力。可以通过useEffect()访问到组件内部的props和state，在默认的情况下React会在每一次渲染之后调用副作用函数。程序实例：
import React, { useEffect } from 'react';
function Component(){
//相当于componentDidMount和componentDidUpdate
useEffect(() => {
console.log("useEffect执行了");
});
return (<div>
useEffect Demo
</div>);
}
-
useContext()：useContext()方法可以在不进行组件嵌套的情况下就可以使组件订阅React的Context值。便于组件获取Context。程序实例：
import React, { useContext } from 'react';
function demo() {
const locale = useContext(LocaleContext);
return (
<div>
useContext demo.
</div>
);
}
useDispatch,useSelector
import {useDispatch,useSelector} from 'dva'
const dispatch = useDispatch()
const loadingEffect = useSelector(state =>state.loading);
const loading = loadingEffect.effects['user/fetchUser'];
const user = useSelector(state=>state.user.userInfo)
React Hooks的使用原则
- 只能在函数的最外层调用Hooks函数，不要在循环和条件判断等语句中使用Hooks函数。
- 只在React的函数组件中使用Hooks函数，不在其他的JavaScript函数中使用Hooks。
React Hooks的缺点
- 使用不当容易造成函数中拿不到最新的值【闭包造成】
- hook的依赖项手动添加，非常繁琐
- 目前暂时还没有对应不常用的
getSnapshotBeforeUpdate，getDerivedStateFromError和componentDidCatch生命周期的 Hook 等价写法