React手稿 - Context

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

摘要：提供了除之外的傳參數(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

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

DC_er 2019-08-23 13:53 評(píng)論0 收藏0
React手稿之 React-Redux

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

Freelander 2019-08-23 12:57 評(píng)論0 收藏0
React 手稿 - Component state

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

dcr309duan 2019-08-23 12:55 評(píng)論0 收藏0
React手稿之 React-Saga

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

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

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

tomorrowwu 2019-08-26 12:24 評(píng)論0 收藏0