React Hooks：useState、useEffect和useContext

目录

1. useState - 让函数组件具有维持状态的能力

        1.1 语法

        1.2 应用   

2. useEffect  -  执行副作用

        2.1 语法

        2.2 应用

        2.3 关于依赖项

        2.4 小案例

        2.5 小总结

3. useContext - 定义全局状态

        3.1 Context机制

        3.2 使用步骤

4. 综合小案例 - 改变主题

             

---

useState、useEffect和useContext是在项目中使用频率比较高的三个内置Hooks。下面来介绍一下三个Hooks的基本用法和使用场景，以及与使用Class组件时的一些区别。

注意：Hooks只能在函数式组件中使用哦

1. useState - 让函数组件具有维持状态的能力

        1.1 语法

const [state, setState] = useState(initialState)
// useState钩子函数返回值为数组，其第一个元素是用来读取state值，第二个是用来设置state值的方法
// initialState 作为参数是设置state的初始值

// 设置
setState(newStateValue)

        1.2 应用   

        一般第二个参数以set+state值名字来命名，这样语义上表意，且统一。比如：

// 保存一个“主题”的值，为一个对象
const [theme, setTheme] = useState({});  // theme = {}
// 上述代码表示，设置一个state值名为theme，设置其值的方法为setTheme，其初始值为{}

// 修改theme的值
setTheme({background:'#fcfcfc'});  // theme = {background:'#fcfcfc'}

// 对比Class组件中修改state的方式
state = {
    theme: {}
}

this.setState({
    theme:{background:'#fcfcfc'}
})

2. useEffect  -  执行副作用

如果对Class组件的生命周期熟悉，可以把useEffect Hook看作是 componentDidMount 、componentDidUpdate、componentWillUnmounted三个生命周期函数的组合。

        2.1 语法

useEffect(callback, dependencies)
// callback是要执行的函数
// dependencies是可选的依赖数组

        2.2 应用

import React, {useEffect} from 'react';
const Demo = () => {
    
    useEffect(()=>{
        // 组件在首次渲染和更新时执行
        console.lo