目的：
Hooks的目的就是为了给函数式组件加上状态
useState
const [value, setValue] = useState(initValue)
value为状态数据setValue为更改数据的函数initValue为状态数据的初始值
要设置数据的时候只需要执行 setValue(newValue)
注意: React并没有提供setValue的重载，所以，连续多个setValue只会执行最后一次，且其异步执行
那么怎么正确处理其异步逻辑呢？
useEffect
useEffect
什么是纯函数?
在React中指：传入相同的参数(props)，渲染出的UI永远一样
什么是副作用(side-effect)？
与纯函数相反，组件处理了与返回(渲染逻辑)无关的事,亦或者指传入相同参数，却可以渲染出不同UI。AJAX, conso.log, 修改了全局变量等都可以看做副作用，
- 异步执行
- useEffect 可以看做
componentDidMount、componentDidUpdate和componentWillUnmount的组合 - 不用担心其
effect依赖过期的情况。每次我们重新渲染，都会生成新的effect，替换掉之前的。 可以给useEffect传递第二个参数，类型为数组。此时，如果数组中的值变化时才会执行effect函数.否则跳过此次函数运行。
若是传入一个空数组会怎样？
那么useEffect则相当于componentDidMount.只会在第一次组件渲染时会执行。这种情况可用于Ajax获取数据(获取数据严禁使用默认情况(不传递第二个参数), 不然会无限次发送ajax请求)
注意： useEffect的参数函数，不能是一个async函数(会报错)
那么，仍然想使用async await怎么办？
可以在effect函数里面新创建一个async函数，并调用它
useContext
用于祖孙组件传值。怎么使用？
- 创建上下文对象
export const appContext = React.createContext(value)
value为传递的对象, 注意得export导出, 因为在子孙组件需要引用
2. ** 用创建的上下文的Provider组件包裹子组件.比如全局提供值**
<appContext.Provider value={value}>
<app />
</appContext.Provider>
3. 在子孙组件中引入上下文对象，
- 在类组件中使用上下文对象的Consumer组件,且由其所包裹的函数参数作为Provider提供的值。
- 在函数组件中使用useContext
import { appContext } from '...'
// 类组件
... // 以下为jSX/tsx
return (
<appContext.Consumer>
{(value) => {
return (
... // jsx/tsx
)
}}
</appContext.Consumer>
)
// 函数组件
const value = useContext(appContext) // 参数为上下文对象
...接下来可以直接使用value了
。
