Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)
1.什么情况下使用Hooks
官方并不建议我们把原有的 class 组件，大规模重构成 Hooks，而是有一个渐进过程:
首先，原有的函数组件如果需要自己的状态或者需要访问生命周期函数，那么用 Hooks 是再好不过了；
另外就是，我们可以先在一些逻辑较简单的组件上尝试 Hooks ，在使用起来相对较熟悉，且组内人员比较能接受的前提下，再扩大 Hooks 的使用范围。
2.对比与class，函数式组件有哪些优势
State Hook 使得组件内的状态的设置和更新相对独立，这样便于对这些状态单独测试并复用。
Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分，这样使得各个逻辑相对独立和清晰
3.hooks 提供的常用的几个函数
(1) useState
useState来自react，需要从react中导入，它是一个hook
useState 只在初始化时执行一次，后面不再执行
ü 参数:初始化值，如果不设置为undefined; 返回值:数组，包含两个元素;
Ø 元素一:当前状态的值(第一调用为初始化值); 类比于 state中的值
Ø 元素二:设置状态值的函数;类比于 setState 更新界面
如下代码
const [counter,setCount] = useState(0) //数组的结构
return (
<div>
<h2>当前计数 {counter}</h2>
<button onClick={e => setCount( counter + 1 )}>+1</button>
<button onClick={e => setCount( counter - 1 )}>-1</button>
</div>
);
(2)useEffect
useEffect 相当于是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合，可以通过传参及其他逻辑，分别模拟这三个生命周期函数；
useEffect 第二个参数是一个数组，如果数组为空时，则只执行一次（相当于componentDidMount）
如果数组中有值时，则该值更新时，useEffect 中的函数才会执行 （相当于componentDidUpdate）
如果没有第二个参数，则每次render时，useEffect 中的函数都会执行；
effect 中返回的函数（其清除函数）（页面销毁的时候调用）， （相当于componentWillUnmount）
如下代码
const [counter,setCounter] = useState(0)
const [age,setAge] = useState(18)
useEffect(()=>{
document.title = counter
console.log('1')
return ()=>{
console.log('2')
}
},[counter])
useEffect(()=>{
console.log('3')
})
useEffect(()=>{
console.log('4')
},[counter,age])
useEffect(()=>{
console.log('5')
},[])
return (
<div>
<h2>当前计数:{counter}</h2>
<button onClick={e=>{setCounter(counter+1)}}>+1</button>
<button onClick={e=>{setAge(age+1)}}>+1</button>
</div>
);
(3) useContex
useContext() 状态共享的函数钩子
该钩子的作用是，在组件之间共享状态。关于Context这里不再赘述，其作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。
import React, {useState, useContext} from 'react';
function Test1() {
// hook : useState
// useState 本身是一个函数，来自react包
// const arr = useState(0)
// const state = arr[0]
// const setState = arr[1]
const [counter, setCount] = useState(0)
const AppContext = React.createContext({})
const A = () => {
const {name} = useContext(AppContext)
return (
<p>我是A组件的名字{name}</p>
)
}
const B = () => {
const {name} = useContext(AppContext)
return (
<p>我是B组件的名字{name}</p>
)
}
return (
<AppContext.Provider value={{name: 'hook测试'}}>
<h2>当前计数 {counter}</h2>
<button onClick={e => setCount(counter + 1)}>+1</button>
<button onClick={e => setCount(counter - 1)}>-1</button>
<A></A>
<B></B>
</AppContext.Provider>
);
}
export default Test1;
image.png
