React高級特性Context萬字詳細解讀

更新時間：2022年11月11日 15:21:33 作者：夏天的味道123

React的context就是一個全局變量，可以從根組件跨級別在React的組件中傳遞。React context的API有兩個版本，React16.x之前的是老版本的context，之后的是新版本的context

正文

在典型的React應用中，數(shù)據(jù)是通過props，自上而下地傳遞給子組件的。但是對于被大量組件使用的固定類型的數(shù)據(jù)（比如說，本地的語言環(huán)境，UI主題等）來說，這么做就顯得十分的累贅和笨拙。Context提供了一種在組件之間（上下層級關(guān)系的組件）共享這種類型數(shù)據(jù)的方式。這種方式不需要你手動地，顯式地通過props將數(shù)據(jù)層層傳遞下去。

什么時候用Context?

這一小節(jié)，講的是context適用的業(yè)務場景。

Context是為那些可以認定為【整顆組件樹范圍內(nèi)可以共用的數(shù)據(jù)】而設(shè)計的。比如說，當前已認證的用戶數(shù)據(jù)，UI主題數(shù)據(jù)，當前用戶的偏好語言設(shè)置數(shù)據(jù)等。舉個例子，下面的代碼中，為了裝飾Button component我們手動地將一個叫“theme”的prop層層傳遞下去。傳遞路徑是：App -> Toolbar -> ThemedButton -> Button

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}
function Toolbar(props) {
  // The Toolbar component must take an extra "theme" prop
  // and pass it to the ThemedButton. This can become painful
  // if every single button in the app needs to know the theme
  // because it would have to be passed through all components.
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}
class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

使用context，我們可以跳過層層傳遞所經(jīng)過的中間組件?，F(xiàn)在我們的傳遞路徑是這樣的：App -> Button。

// Context lets us pass a value deep into the component tree
// without explicitly threading it through every component.
// Create a context for the current theme (with "light" as the default).
const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "dark" as the current value.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

在你用Context之前

這一小節(jié)，講的是我們要慎用context。在用context之前，我們得考慮一下當前的業(yè)務場景有沒有第二種技術(shù)方案可用。只有在確實想不出來了，才去使用context。

Context主要用于這種業(yè)務場景：大量處在組件樹不同層級的組件需要共享某些數(shù)據(jù)。實際開發(fā)中，我們對context要常懷敬畏之心，謹慎使用。因為它猶如潘多拉的盒子，一旦打開了，就造成很多難以控制的現(xiàn)象（在這里特指，context一旦濫用了，就會造成很多組件難以復用）。參考React實戰(zhàn)視頻講解：進入學習

如果你只是單純想免去數(shù)據(jù)層層傳遞時對中間層組件的影響，那么組件組合是一個相比context更加簡單的技術(shù)方案。

舉個例子來說，假如我們有一個叫Page的組件，它需要將user和avatarSize這兩個prop傳遞到下面好幾層的Link組件和Avatar組件：

<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... which renders ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... which renders ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

我們大費周章地將user和avatarSize這兩個prop傳遞下去，最終只有Avatar組件才真正地用到它。這種做法顯得有點低效和多余的。假如，到后面Avatar組件需要從頂層組件再獲取一些格外的數(shù)據(jù)的話，你還得手動地，逐層地將這些數(shù)據(jù)用prop的形式來傳遞下去。實話說，這真的很煩人。

不考慮使用context的前提下，另外一種可以解決這種問題的技術(shù)方案是：將Avatar組件作為prop傳遞下去。這樣一來，其他中間層的組件就不要知道user這個prop的存在了。

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}
// Now, we have:
<Page user={user} />
// ... which renders ...
<PageLayout userLink={...} />
// ... which renders ...
<NavigationBar userLink={...} />
// ... which renders ...
{props.userLink}

通過這個改動，只有最頂層的組件Page需要知道Link組件和Avatar組件需要用到“user”和“avatarSize”這兩個數(shù)據(jù)集。

在很多場景下，這種通過減少需要傳遞prop的個數(shù)的“控制反轉(zhuǎn)”模式讓你的代碼更干凈，并賦予了最頂層組件更多的控制權(quán)限。然而，它并不適用于每一個業(yè)務場景。因為這種方案會增加高層級組件的復雜性，并以此為代價來使得低層家的組件來變得更加靈活。而這種靈活性往往是過度的。

在“組件組合”這種技術(shù)方案中，也沒有說限定你一個組件只能有一個子組件，你可以讓父組件擁有多個的子組件?；蛘呱踔两o每個單獨的子組件設(shè)置一個單獨的“插槽（slots）”，正如這里所介紹的那樣。

function Page(props) {
  const user = props.user;
  const content = <Feed user={user} />;
  const topBar = (
    <NavigationBar>
      <Link href={user.permalink}>
        <Avatar user={user} size={props.avatarSize} />
      </Link>
    </NavigationBar>
  );
  return (
    <PageLayout
      topBar={topBar}
      content={content}
    />
  );
}

這種模式對于大部分需要將子組件從它的父組件中分離開來的場景是足夠有用的了。如果子組件在渲染之前需要與父組件通訊的話，你可以進一步考慮使用render props技術(shù)。

然而，有時候你需要在不同的組件，不同的層級中去訪問同一份數(shù)據(jù)，這種情況下，還是用context比較好。Context負責集中分發(fā)你的數(shù)據(jù)，在數(shù)據(jù)改變的同時，能將新數(shù)據(jù)同步給它下面層級的組件。第一小節(jié)給出的范例中，使用context比使用本小節(jié)所說的“組件組合”方案更加的簡單。適用context的場景還包括“本地偏好設(shè)置數(shù)據(jù)”共享，“UI主題數(shù)據(jù)”共享和“緩存數(shù)據(jù)”共享等。

示例

1. 動態(tài)context

我在這個例子里面涉及到this.context的組件的某個生命周期方法里面打印console.log（this.context），控制臺打印出來是空對象。從界面來看，DOM元素button也沒有background。

這是一個關(guān)于動態(tài)設(shè)置UI主題類型的context的更加復雜的例子：

theme-context.js

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};
export const ThemeContext = React.createContext(
  themes.dark // default value
);

themed-button.js

import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;

app.js

import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';
// An intermediate component that uses the ThemedButton
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme    </ThemedButton>
  );
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light,
    };
    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
  }
  render() {
    // The ThemedButton button inside the ThemeProvider
    // uses the theme from state while the one outside uses
    // the default dark theme
    // 以上注釋所說的結(jié)果，我并沒有看到。
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    );
  }
}
ReactDOM.render(<App />, document.root);

2. 在內(nèi)嵌的組件中更新context

組件樹的底層組件在很多時候是需要更新Provider組件的context value的。面對這種業(yè)務場景，你可以在創(chuàng)建context object的時候傳入一個function類型的key-value，然后伴隨著context把它傳遞到Consumer組件當中：

theme-context.js

// Make sure the shape of the default value passed to
// createContext matches the shape that the consumers expect!
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

theme-toggler-button.js

import {ThemeContext} from './theme-context';
function ThemeTogglerButton() {
  // The Theme Toggler Button receives not only the theme
  // but also a toggleTheme function from the context
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme        </button>
      )}    </ThemeContext.Consumer>
  );
}
export default ThemeTogglerButton;

app.js

import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }
  render() {
    // The entire state is passed to the provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}
function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}
ReactDOM.render(<App />, document.root);

3. 同時消費多個context

為了使得context所導致的重新渲染的速度更快，React要求我們對context的消費要在單獨的Consumer組件中去進行。

// Theme context, default to light theme
const ThemeContext = React.createContext('light');
// Signed-in user context
const UserContext = React.createContext({
  name: 'Guest',
});
class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;
    // App component that provides initial context values
    // 兩個context的Provider組件嵌套
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}
function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}
// A component may consume multiple contexts
function Content() {
  return (
     // 兩個context的Consumer組件嵌套
    <ThemeContext.Consumer>
      {theme => (        <UserContext.Consumer>
          {user => (            <ProfilePage user={user} theme={theme} />
          )}        </UserContext.Consumer>
      )}    </ThemeContext.Consumer>
  );
}

但是假如兩個或以上的context經(jīng)常被一同消費，這個時候你得考慮合并它們，使之成為一個context，并創(chuàng)建一個接受多個context作為參數(shù)的render props component。

注意點

因為context是使用引用相等（reference identity）來判斷是否需要re-redner的，所以當你給Provider組件的value屬性提供一個字面量javascript對象值時，這就會導致一些性能問題-consumer組件發(fā)生不必要的渲染。舉個例子，下面的示例代碼中，所有的consumer組件將會在Provider組件重新渲染的時候跟著一起re-render。這是因為每一次value的值都是一個新對象。

class App extends React.Component {
  render() {
    return (
     // {something: 'something'} === {something: 'something'}的值是false
      <Provider value={{something: 'something'}}>
        <Toolbar />
      </Provider>
    );
  }
}

為了避免這個問題，我們可以把這種引用類型的值提升到父組件的state中去：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }
  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

遺留的API

React在先前的版本中引入了一個實驗性質(zhì)的context API。相比當前介紹的這個context API,我們稱它為老的context API。這個老的API將會被支持到React 16.x版本結(jié)束前。但是你的app最好將它升級為上文中所介紹的新context API。這個遺留的API將會在未來的某個大版本中去除掉。

到此這篇關(guān)于React高級特性Context萬字詳細解讀的文章就介紹到這了,更多相關(guān)React Context內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: