目录
Hooks是一套能够使函数组件更强大,更灵活的“钩子”。
React体系里组件分为类组件和函数组件。
经过很多年的应用,我们发现函数组件其实是更加简单的,而且是更加契合我们React的设计理念 UI = f(data),也更有利于逻辑拆分与重用的组件表达形式,但是我们也知道,函数组件它是不能维护我们自己的状态的,那就很难受了,这该怎么办,所以为了能让函数组件可以拥有自己的状态,所以从react v16.8开始,Hooks应运而生。
注意:
Hooks的出现解决了俩个问题
1. 组件的状态逻辑复用
组件的逻辑复用在hooks出现之前,react先后尝试了 mixins混入,HOC高阶组件,render-props等模式但是都有各自的问题,比如mixin的数据来源不清晰,高阶组件的嵌套问题等等
2.class组件自身的问题。
class组件自身的问题class组件就像一个厚重的‘战舰’ 一样,大而全,提供了很多东西,有不可忽视的学习成本,比如各种生命周期,this指向问题等等,而我们更多时候需要的是一个轻快灵活的'快艇'
useState为函数组件提供状态(state)。
接下来我们看看如何useState给我们的函数式组件提供状态。
然后大家就可以打开浏览器去体验一下这个修改操作了。
读取状态:
修改状态:
函数组件使用 useState hook 后的执行过程,以及状态值的变化 。
注意:
useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说,以后的每次渲染,useState 获取到都是最新的状态值,React 组件会记住每次最新的状态值
1、useState 函数可以执行多次,每次执行互相独立,每调用一次为函数组件提供一个状态。
2、useState 注意事项
副作用是相对于主作用来说的,一个函数除了主作用,其他的作用就是副作用。对于 React 组件来说,主作用就是根据数据(state/props)渲染 UI,除此之外都是副作用(比如,手动修改 DOM)。
常见的副作用
- 数据请求 ajax发送
- 手动修改dom
- localstorage操作
useEffect函数的作用就是为react函数组件提供副作用处理的!
我们做一个小案例,我想在我们修改数据之后,把count 最新值放到页面标题中去,那它其实已经脱离我们的这个函数了,它其实做了一个dom 操作。那它就显然是副作用啦。
看看浏览器。