进入hook的学习—

hook

React Hook是React 16.8版本之后添加的新属性，用最简单的话来说，React Hook就是一些React提供的内置函数，这些函数可以让函数组件和类组件一样能够拥有组件状态（state）以及进行副作用（side effect）。

hook是React未来的走向，React的路由在6版本后已经舍弃了类组件的方法。我们在类组件中想使用路由只有用6版本之前。这些hook就有点像类组件中的生命周期钩子，官方来帮我们调用，因此在函数组件内我们能够实现类组件的生命周期的功能。但是它们在本质上还是有区别。

useState

useState和类组件的this.state一样，都是用来管理组件状态的。

在React Hook没出来之前，函数组件也叫做Functional Stateless Component（FSC:功能无状态的组件），这是因为函数组件每次执行的时候都会生成新的函数作用域所以同一个组件的不同渲染（render）之间是不能够共用状态的。

useState，它允许函数组件将自己的状态持久化到React运行时的某个地方，这样在组件每次重新渲染的时候都可以从这个地方拿到该状态，而且当该状态被更新的时候，组件也会重渲染。

用法：

let arr=useState("hello world")

//useState("hello world")的返回值为一个数组，其中有两项

//第一项就是我们我传入的参数，它变成了一个有状态的数据

//第二项是一个函数，传入的值可以修改第一项的数据，而且会调用render刷新页面。就好比setState()

console.log(arr[0]) //hello world

arr[1]("修改数据") //一旦这条语句运行，arr[0]的值就变为修改数据

我们通过数组取下标的方式很不方面，因此我们在开发时一般用解构的方式直接引用，如：

let [msg,setMsg]=useState("hello world")

即，在使用时，我们直接在模板中<div>{msg}</div>

修改时，setMsg("***")

useState()的返回值来修改当前数据与类组件中this.setState()的区别

类组件是将当前设置的state浅归并到旧state的操作。而hook的setState函数则是将新state直接替换旧的state。因此我们在编写函数组件的时候，就要合理划分state，避免将没有关系的状态放在一起管理.

例如：

函数组件中：（全量替换）

let [obj,setObj]=useState({a:1,b:2})

setObj({c:3})

//这时obj的值就变为了{c:3}，{a:1,b:2}直接被替换掉了

类组件中：

state={a:1,b:2}

this.setState({c:3})

这时state就变为了{a:1,b:2,c:3}，它的思想就是有则替换，无则添加进去

对于修改数据后获取新值

在类组件中的this.setState()方法，第一个参数是传入要修改的值，其实他还有第二个形参，我们可以传入一个回调函数。传入的回调函数形参中可以接收到新值。

this.setState(newstate,(state)=>{“使用新值“})

在函数组件中，useState() 未提供获取更新后数据的回调函数。但是有另外一个hook可以解决:副作用函数useEffect

在Vue中，想使用更改后的新值，Vue框架为我们提供了一个nextTick函数。它的作用是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取到最新的值。