Context

什么是Context?

React中的Context为全局数据被不同层级的多个组件使用提供了解决方法。假如，一个数据需要在深层引用，而且是多个不同的组件引用。而单独为这个数据使用props传递，维护成本是会很高的。我们可以使用Context直接在全局中定义这个属性。

运用场景

不同层级的组件需要访问同样一些的数据，例如：某个可变化的文本，颜色主题等。

演示

使用Context时，是使用React的createContext方法定义数据，使用定义的(变量名.Provider) 包裹根组件，以便数据往里面传递。

定义一个全局的数据，默认值是light

const ThemeContext = React.createContext("light");

这里是根组件

class App extends React.Component {
    render() {
        return (
            // 传入新值dark
            <ThemeContext.Provider value="dark">
                <ToolBar />
            </ThemeContext.Provider>
        )
    }
}

中间组件，这里直接跳过它，不需要从这里传递数据了

function ToolBar (props) {
    return (
        <div>
        {/* 不用传递dark了 */}
            <ThemedButton />
        </div>
    )
}

深层组件中直接获取

class ThemedButton extends React.Component {
        static contextType = ThemeContext;
        render () {
        return (
            <Button theme={this.context}></Button>
        )
    }
}

注意事项/组件组合

谨慎使用Context,这会导致组件的复用性变差。如果只是为了解决数据层层递进问题，推荐使用组件组合。

层层递进的情况：

<Page user={user} avatarSize={avatarSize} />
<PageLayout user={user} avatarSize={avatarSize} />
<NavigatorBar user={user} avatarSize={avatarSize} />
<Link href={user.permalink}>
    <Avatar user={user} avatarSize={avatarSize}></Avatar>
<Link />

将深层组件直接定义在根组件，它的数据从根组件的props中取出。这样只有根组件需要使用props，数据无需经过中间的组件。

function Page(props) {
    const user = props.user;
    const userLink = (
        <Link href={user.permalink}>
            <Avatar user={user} avatarSize={props.avatarSize}></Avatar>
        </Link>
    );
    return <PageLayout userLink={userLink} />;
}

<Page user={user} avatarSize={avatarSize} />
<PageLayout user={user} avatarSize={avatarSize} />
<NavigatorBar user={user} avatarSize={avatarSize} /> 
{/* 直接在这里使用 */}
{props.userLink}