React之Hooks基础

目录

1、Hooks解决了什么问题

2、useState

2.1 状态的读取和修改

2.2 组件的更新过程

2.3 使用规则

3、useEffect

3.1 基础使用

---

Hooks是一套能够使函数组件更强大，更灵活的“钩子”。

React体系里组件分为类组件和函数组件。

经过很多年的应用，我们发现函数组件其实是更加简单的，而且是更加契合我们React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，但是我们也知道，函数组件它是不能维护我们自己的状态的，那就很难受了，这该怎么办，所以为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生。

注意：

1. 我们要知道，hooks的出现并不是要干掉我们的class类组件，class类组件并没有被移除，俩者都可以使用。
2. 有了hooks之后，我们就要改变以前的说法，我们不能再说函数是一个无状态的组件了，因为hooks为函数组件提供了状态。
3. hooks只能在函数组件中使用。

1、Hooks解决了什么问题

Hooks的出现解决了俩个问题

1. 组件的状态逻辑复用

组件的逻辑复用在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等

2.class组件自身的问题。

class组件自身的问题class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的'快艇'

2、useState

useState为函数组件提供状态（state）。

接下来我们看看如何useState给我们的函数式组件提供状态。

然后大家就可以打开浏览器去体验一下这个修改操作了。

2.1 状态的读取和修改

读取状态：

1. userState方法 传过来的参数，作为count 的初始值，该方法提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用。
2. [count, setCount]，这里的写法是一个解构赋值，userState返回值是一个数据，里面的面子可以自定义，但是顺序不可以替换。

修改状态：

1. setCount函数 作用用来修改count 依旧保持不能直接修改原值，还是生成一个新值替换原值。
2. count 和 setCount 是一对，是绑在一起的 setCount 只能用来修改对应的count值。

2.2 组件的更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化 。

1. 首次渲染

1. 1. 首次被渲染的时候，组件内部的代码会被执行一次。
   2. 其中useState也不会跟着执行，不过，初始值只在首次渲染时生效。

1. 更新渲染

1. 1. 函数组件会再次渲染，这个函数会再次执行。
   2. userState再次执行，得到新的count值，不是原来的初始值,而是修改之后的值，模板会用新值再次渲染。

注意：

useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值

2.3 使用规则

1、useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态。

2、useState 注意事项

1. 只能出现在函数组件中
2. 不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）

3、useEffect

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）。

常见的副作用

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

useEffect函数的作用就是为react函数组件提供副作用处理的！

3.1 基础使用

我们做一个小案例，我想在我们修改数据之后，把count 最新值放到页面标题中去，那它其实已经脱离我们的这个函数了，它其实做了一个dom 操作。那它就显然是副作用啦。

看看浏览器。