React@16.x（26）useContext

1，上下文的使用

之前的文章中介绍过 context上下文。

使用举例：

import React, { useState } from "react";

const ctx = React.createContext();

function Child() {
    return <ctx.Consumer>{(value) => <div>{value}</div>}</ctx.Consumer>;
}

export default function App() {
    return (
        <ctx.Provider value="123">
            <Child></Child>
        </ctx.Provider>
    );
}

2，useContext

在之前的做法中，有一些不舒服的点，一是增加了嵌套的层级；二是使用起来有点麻烦。

对比 useContext：

import React, { useContext } from "react";

function Child() {
    const value = useContext(ctx);
    return <div>{value}</div>;
}

以上。