React--hooks-- useContext的使用

前言：

之前，我们在使用 context 时，函数组件只能用 Consumer 包裹，而类组件虽然说能用 contextType ，但 contextType 在一个类组件内也只能使用一次，不能多个一起使用，所以当我需要传入多个context 时就会十分麻烦。
而 React-hooks 为我们提供了 useContext 来让我们在函数组件中更方便的接收 context 。

---

一、useContext的基本用法

需求：简单实现一个主题切换、

1.当我们不使用useContext时

ProVider 位置和原来的 context 一样，createContext 也需要在上面先声明。

和 context 不同的只有 接收的时候，也就是 Consumer 那部分，我们不需要再用 Consumer 嵌套就可以完成传值，其实它的用法就相当于 contextType ，但它能传入多个 context

const ThemeContext = React.createContext('grey')
const FontContext = React.createContext('bold')

function App() {
    const [theme, setTheme] = useState("red")
    const [font, setFont] = useState("bold")
    const changeTheme = () => {
        setTheme("green")
    }
    const changeFont = () => {
        setFont("lighter")
    }
    return (
        <div>
            <h5>theme color:{theme}</h5>
            <h5>font size:{font}</h5>
            <button onClick={changeTheme}>Change Theme</button>
            <button onClick={changeFont}>Change Font</button>
            <ThemeContext.Provider value={theme}>
                <FontContext.Provider value={font}>
                    <Child></Child>
                </FontContext.Provider>
            </ThemeContext.Provider>
        </div>
    )
}
function Child() {
    return (
    // 不使用useContext，而是用Consumer嵌套，十分麻烦
        <ThemeContext.Consumer>
            {
                (theme) => (
                    <FontContext.Consumer>
                        {
                            (font) => (
                                <div style={{ backgroundColor: theme, fontWeight: font }}>
                                    <p>child theme color:{theme}</p>
                                    <p>child font weight:{font}</p>
                                </div>
                            )
                        }
                    </FontContext.Consumer>
                )
            }
        </ThemeContext.Consumer>
    )
}

点击 Change Theme 后：

再点击 Change Font：

2.使用useContext后

const ThemeContext = React.createContext('grey')
const FontContext = React.createContext('bold')

function App() {
    const [theme, setTheme] = useState("red")
    const [font, setFont] = useState("bold")
    const changeTheme = () => {
        setTheme("green")
    }
    const changeFont = () => {
        setFont("lighter")
    }
    return (
        <div>
            <h5>theme color:{theme}</h5>
            <h5>font size:{font}</h5>
            <button onClick={changeTheme}>Change Theme</button>
            <button onClick={changeFont}>Change Font</button>
            <ThemeContext.Provider value={theme}>
                <FontContext.Provider value={font}>
                    <Child></Child>
                </FontContext.Provider>
            </ThemeContext.Provider>
        </div>
    )
}
// useContext：能节约consumer写法，尤其是在使用多个context时
function Child() {
    const theme = useContext(ThemeContext)
    const font = useContext(FontContext)
    return (
        <div style={{ backgroundColor: theme, fontWeight: font }}>
            <p>child theme color:{theme}</p>
            <p>child font weight:{font}</p>
        </div>
    )
}

Child的代码是不是瞬间简洁许多，而功能和上面的一样，由此可见，useContext 大大的方便了我们的传值操作。

3、注意点

使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，而不是通过数据响应式来监控变量的。