携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
Hook概念
1.什么是Hook？
Hook的本质： 一套能够使函数组件更强大，更灵活的钩子
经过多年的实战，函数组件是一个更加匹配React的设计理念UI = f（data）
也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从v16.8开始，hooks应运而生。
注意点：
- 1.有了hooks之后，为了兼容老版本，class类组件并没有被移除，二者都可以使用
- 2.有了hooks之后，不能再把函数变成无状态组件了，因为hooks为函数提供了状态
- hooks只能在函数组件中使用
2.hooks的出现解决了两个问题
- 1.组件的状态逻辑复用
- 2.class组件自身的问题
组件的逻辑复用：
在hooks出现之前，react先后尝试了mixins混入，HOC高阶组件，render-props等模式
但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题
class组件自身的问题：
class组件就像一个厚重的‘战舰’一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this的指向问题等，而我们更多时候需要的是一个轻快灵活的‘快艇’
3.Hooks优势：
- 1.告别了难以理解的class
- 2.解决业务逻辑难以拆分的问题
- 3.使状态逻辑复用变得简单可行
- 4.函数组件在设计思想上，更加契合React的理念
4.useState
使用步骤:
1.从react中导入useState这个方法
2.在函数组件的内部执行这个方法，并且传入一个初始值
3.通过解构赋值，得到数据状态和一个修改数据状态的方法
4.渲染数据状态，在某个时机下通过执行方法修改状态
const [count,setCount] = useState(0)
5.useState传过来的参数，作为count的初始值
6.[count,setCount] 这里的写法是一个解构赋值，useState返回值是一个数组
7.setCount函数作用,用来修改count 依旧保持不能拿直接修改原值，还是生成一个新值替换原值，setCount(基于原值计算得到的新值）
- count和setCount是一对，是绑在一起的，setCount只能用来修改对应的count值
