Question

为什么它不这样工作：

class AppProvider extends React.Component {
    state = {};

    render (){
        <React.Provider value={this.state}>{this.props.children}</React.Provider>
    }
}

...

class AppConsumer extends React.Component {
    state = {};

    render (){
        <div>
            <h1><React.Consumer>{context => context.toString()}</React.Consumer></h1>
            <div>{this.props.children}</div>
        </div>
    }
}

...

<AppProvider>
    <AppConsumer>
        <AppConsumer>
        </AppConsumer>
        </AppConsumer>
        </AppConsumer>
    <AppConsumer>
    <AppConsumer>
    </AppConsumer>
</AppProvider>

我能想到的具有工厂功能的唯一用途是声明defaultValue，供消费者使用-用于测试，如文档所述。

但是，我认为这实际上是一个错误的模式，如果我的使用者上方没有提供者，我宁愿简单地得到一个错误...
建议的格式更容易掌握。

让我感到困惑的一点是，您可以使用完全相同的上下文，但是在不同位置使用两个具有不同值的提供程序，因此它实际上不是一个共享上下文...

React的createContext工厂函数有什么意义？

0 个答案: