reactjs - 为什么 useContext() 不返回 Provider 值而是返回初始值？

Question

import React, { useContext, createContext } from "react";

const messageContext = createContext("Hello");

const Context = () => {

    const message = useContext(messageContext);

    return (
        <messageContext.Provider value="Hi">

            <div style={{ marginTop: 1000 }}>{message}</div> 
            {/* Result: Hello */}

            <messageContext.Consumer>
                {message => {
                    return <div style={{ marginTop: 1000 }}>{message}</div>;
                }}
            </messageContext.Consumer>
            {/* Result: Hi */}

        </messageContext.Provider>
    );
};
export { Context };

我想使用useContext()钩子，但它总是返回初始值，即“ Hello ”。

使用<messageContext.Consumer>没有问题。它返回“ Hi ”，但我想使用 useContext 挂钩。

Answer 1

当您从上下文中获取某些内容时，您会从组件树上最近的提供者处获取它。由于您在组件内部调用了 useContext Context，它会在树上寻找比Context. 不存在，因此您将获得默认值。您的示例messageContext.Consumer位于提供程序内部，因此它可以看到该值。

几乎没有理由在您提供它的完全相同的组件中使用一个值。为了提供值，您可能有一些导致局部变量的逻辑，并且您可以将相同的局部变量重用于组件的任何其他需要它的部分。