React手稿 - Context

qingshanli1988 發(fā)布于2019-08-26 13:23 / 2650人閱讀

摘要：提供了除之外的傳參數(shù)的方式。是全局跨組件傳遞數(shù)據(jù)的。在線示例推薦閱讀手稿

Context

Context提供了除props之外的傳參數(shù)的方式。

Context是全局跨組件傳遞數(shù)據(jù)的。

API

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

Provider

Consumer


  {value => /* render something based on the context value */}

Example ThemeContext.js

import React from "react";

export const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};

export default React.createContext(
  themes.dark // default value
);

ThemedButton.jsx

import React from "react";
import ThemeContext, {themes} from "./ThemeContext";

export default ({children}) => {
  const styles = {
            color: themes[theme].foreground,
            backgroundColor: themes[theme].background
          };
  return (
    
      {theme => {
        return (
          
        )
      }}
    
  );
}

App.js

import React, {PureComponent} from "react";
import ThemeContext from "./ThemeContext";
import ThemeButton from "./ThemedButton";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {theme: "dark"};
  }

  render() {
    return (
      
        
           {
            this.setState({theme: this.state.theme === "dark" ? "light" : "dark"})
          }}>Themed Button
        
      
    );
  }
}

在線示例

相關(guān)文章

React手稿之State Hooks of Hooks

摘要：官方也陳述，接下來的的工作會投入到中。從目前官方的文檔可以看出，從以下四個方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止，在已發(fā)布的版本中有該功能，想體驗該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。官方也陳述，接下來的90%的工作會投入到React ...

DC_er 2019-08-23 13:53 評論0 收藏0
React手稿之 React-Redux

摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調(diào)試插件日志安裝組件。然后加入到中即可例如擴展程序需要在應(yīng)用市場安裝然后在中使用增強功能將加入即可在線實例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...

Freelander 2019-08-23 12:57 評論0 收藏0
React 手稿 - Component state

摘要：實例在線實例定義寫在函數(shù)中，是一個對象。一般情況下需要指定默認值，預(yù)防拋使用在組件中通過訪問組件對象屬性的方式。把這種組件也稱為非受控性組件。通過提供了方法，來實現(xiàn)的修改?；卣{(diào)非控組件在線實例受控組件在線實例推薦閱讀手稿 Component state 實例： import React, { PureComponent } from react; export default cla...

dcr309duan 2019-08-23 12:55 評論0 收藏0
React手稿之 React-Saga

摘要：相當于一個放置在與中的墊片。之所以稱之謂副作用呢，就是為了不讓觸發(fā)一個時，立即執(zhí)行。也就是在與之間做一個事情，比如異步獲取數(shù)據(jù)等。使用了中的功能，避免了像的回調(diào)地獄。把放入中最后再實現(xiàn)相就的即可在線示例推薦閱讀手稿 Redux-Saga redux-saga 是一個用于管理應(yīng)用程序副作用（例如異步獲取數(shù)據(jù)，訪問瀏覽器緩存等）的javascript庫，它的目標是讓副作用管理更容易，執(zhí)行更...

notebin 2019-08-23 13:03 評論0 收藏0
React手稿之類型檢查

摘要：類型檢查是為了確保傳入組件的參數(shù)正確性。通常在項目中可以使用或者來實現(xiàn)。示例以上內(nèi)容在實現(xiàn)一個通用組件時非常有用。類型檢查和參數(shù)默認值一起使用，保證組件的正常運行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數(shù)正確性。通常在項目中可以使用Flow或者TypeScript來實現(xiàn)。 React提供了PropTypes來檢查類型。示例： imp...

tomorrowwu 2019-08-26 12:24 評論0 收藏0