参考链接
【https://reactjs.org/docs/hooks-intro.html】
【https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e】
在之前的【React】组件这一篇中说过react 的函数组件是没有状态的，但是React 16.7 版本之后React的函数组件便成了可以有状态的组件，这就是这一篇中介绍的React的一个新特性：Hooks API 的功劳。也就是说Hooks API React 16.7 版本以及往后更高的版本当中可以使用HooksAPI 来实现组件之间的状态共享的目的。
1. Hooks
1.1 Hooks
- Hooks 是什么:
Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。 - 什么时候用 Hooks
如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。
1. 2 Hooks API的使用规范
- Hooks API 只能调用在Function 组件里面。
- state属性的名字可以随便取，但是顺序不能变
2. Basic Hooks
2.1.useState
2.1.1 基本语法：
使用了useState 方法后函数组件也可以维护一个状态了，不在依赖class组件了，具体语法如下：
import React, { useState } from "react"; //从React引入一个useState
function App() {
const [count, setCount] = useState(initialCount); //useState返回一个数组，其第一个参数为返回值，参数作为初始值，初始值也会当作下一次渲染的初始值；数组的第二项为初始值的更新函数
const add= ()=>{ //声明更新函数
setCount(count + 1)
}
return ( 在页面中渲染出来
<div>
<div>{count}</div>
<div><button onClick={add}>+1</button></div>
</div>
);
}
2.1.2 添加互不相关的state：
如果需要实现复杂的多个不同属性的修改，则具体做法是声明多个useState,例如：
const [count, setCount] = useState(0); const [user, setUser] = useState({name:'myname',age:18});
2.1.3 在原来的state变量基础上继续添加state
const [user, setUser] = useState({
name:'myname',age:18,hobbies:['lol','dog','code']
});
const addHobby=()=>{
let newHobby = Math.random()
setUser({
hobbies: [...user.hobbies,newHobby]
})
2.1.4 在原来的state变量基础上删除state
const [user, setUser] = useState({
name:'myname',age:18,hobbies:['lol','dog','code']
});
const addHobby=()=>{
user.hobbies.splice(0,1)
setUser({
hobbies: [...user.hobbies]
})
}
2.1.5 useState 总结：
- useState的功能：
- 函数组件中声明 State 变量
- 读取整个state 变量
- 利用setState 函数 来更新 State
2.2 useEffect
2.2.1副作用
- 首先必须介绍一下sideEffect
sideEffect（副作用） —— 函数或表达式的行为依赖外部世界，
那么什么叫外部世界：- 函数或表达式修改了它 scope之外的状态
- 函数或表达式除了返回语句外还与外部世界或它所调用的函数的有明显的交互行为
什么叫副作用，我用简单的函数来解释一下：
function f1(){} //这个函数没有任何作用
function f2(1,2){return 1+2} //有作用
function f3(){console.log(2)} //有作用
上面的三个函数中我们知道 f1 f2 函数就是顺其自然的，与跟其他的函数或表达式没有任何关系，但是f3就不一样了，我们不难会想到 console.log() 从哪里来的？ 这就是作作用函数，简单说就是根据外界什么有隐含的关系的函数，不一定什么时候得出以外的结果。副作用函数相对的是纯函数，无论何时都会得到预期的结果的函数，如f1 和 f2函数，不管输入什么都会得出两项之和。
2.2.2 使用useEffect
Effect Hook 为你的函数式组件增添了执行 side effects 的能力（就是如果你要写的函数是有副作用的函数，就要在函数组件中声明Effect Hook，在这里面写副作用的函数）
- 具体用法：这个例子里面就是实现加间功能的时候添加给不归react管的div中引用了最新的state的值，这个就是副作用函数，把他写在useEffect中。
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
// Update the document title using the browser API
document.querySelector("#output").innerHTML = count
});
const add= ()=>{
setCount(count + 1)
}
const minus= ()=>{
setCount(count - 1)
}
return (
<div>
<div>{count}</div>
<div>
<button onClick={add}>+1</button>
<button onClick={minus}>-1</button>
</div>
</div>
);
}
