import React, { useEffect, useState } from 'react';
hook 是react 16.8的新增特性 ，他可以让你不在编写class的情况下shiystate以及react的特性
Hooks的出现，首先解决了以下问题：
- 告别了令人疑惑的生命周期
- 告别类组件中烦人的this
- 告别繁重的类组件，回归到了熟悉的函数组件
react 整个思想上面的转变，从“面向对象”的思想转为“函数式变成”，所以你会突然发现会多了一些新概念 比如：纯函数，副作用，柯里化，高阶函数等概念
useState
1.基础使用
import { useState } from 'react'
function App() {
// 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
// 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
const [count, setCount] = useState(0);
// 修改count内容
const modifyEvent = () => {
setCount(count + 1)
}
return (
<button onClick={() => modifyEvent()}>{count}</button>
)
}
export default App
2.状态的读取和修改执行流程与逻辑
读取状态：该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用
修改状态：
1.setCount是一个函数，参数表示最新的状态值
2.调用该函数后，将使用新值替换旧值
3.修改状态后，由于状态发生变化，会引起试图变化 注意
事项：修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型
3. 组件的更新过程
函数组件使用 useState hook 后的执行过程，以及状态值的变化
1.组件第一次渲染
- 从头开始执行该组件中的代码逻辑
- 调用 useState(0) 将传入的参数作为状态初始值，即：0
- 渲染组件，此时，获取到的状态 count 值为： 0
2.组件第二次渲染
- 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
- 组件重新渲染时，会再次执行该组件中的代码逻辑
- 再次调用 useState(0) ，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
- 再次渲染组件，此时，获取到的状态 count 值为：1
注：useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
// 在这里可以进行打印
console.log(count,'渲染了')
return (
<button onClick={() => { setCount(count + 1) }}>{count}</button>
)
}
export default App
4.使用规则
1.useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态
function List(){ // 以字符串为初始值 const [name, setName] = useState('cp') // 以数组为初始值 const [list,setList] = useState([]) }
2.useState 注意事项
- 只能出现在函数组件或者其他hook函数中
- 能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）
useEffect
未完成待续。。。