剧场模式
首页前端React 进阶提高 - 技巧篇

React 进阶提高 #20 React 16.3 全新的 Context API

下载hfpp2012发布于React2009 次点击播放时长:06:50
1

https://www.rails365.net/movies/react-jin-jie-ti-gao-7-context-shang-xia-wen

https://www.rails365.net/movies/react-jin-jie-ti-gao-18-sheng-ji-16-3

import React, { Component } from 'react';
import './App.css';

// 第一步,创建 context
const myContext = React.createContext()

// 第二步,创建 Provider Component

class MyProvider extends Component {
  state = {
    name: "rails365",
    age: 27
  }

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

const Family = (props) => {
  return (
    <div>
      <h1>Family</h1>
      <Person />
    </div>
  )
}


class Person extends Component {
  render() {
    return (
      <div>
        <h1>Person</h1>
        <myContext.Consumer>
          { ({ state }) => <p>My age is { state.age }</p> }
        </myContext.Consumer>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>Hello App</p>
        <MyProvider>
          <Family />
        </MyProvider>
      </div>
    );
  }
}

export default App;
0 条回复
暂无回复~~
支付宝付款
微信扫码打赏

加我微信:15014006126

加 QQ 群:697272886(1 群)

加 QQ 群:856141852(2 群)

播放列表目录

1Freereact 技巧 #1 如何用 netlify 云服务部署 react 应用

2Freereact 技巧 #2 把 react 应用部署到 GitHub Pages

3Freereact 技巧 #3 react-router 教程 part 1

4Freereact 技巧 #4 react-router 教程 part 2

5ProReact 进阶提高 #5 无状态组件的最佳写法

6ProReact 进阶提高 #6 Fragment

7FreeReact 进阶提高 #7 context(上下文)

8ProReact 进阶提高 #8 高阶组件

9ProReact 进阶提高 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)

10FreeReact 进阶提高 #10 用高阶组件来重构代码

11ProReact 进阶提高 #11 我最爱的 React 库 - 功能强大的可插入组件 (简化代码)

12ProReact 进阶提高 #12 返回多个组件的正确方式

13FreeReact 进阶提高 #13 netlifyctl 一键部署前端应用

14FreeReact 进阶提高 #14 defaultProps 和 类型检查 PropTypes part 1

15ProReact 进阶提高 #15 类型检查 PropTypes part 2

16ProReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)

17ProReact 进阶提高 #17 错误边界和生命周期函数 componentDidCatch

18FreeReact 进阶提高 #18 升级到 16.3

19FreeReact 进阶提高 #19 探索 bind (this) 的写法

FreeReact 进阶提高 #20 React 16.3 全新的 Context API

21ProReact 进阶提高 #21 React 16.3 全新的 Context API - 实践

22ProReact 进阶提高 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

23ProReact 进阶提高 #23 对象,数组,可变数据

24ProReact 进阶提高 #24 React.Children API 和 props.children 讲解

25ProReact 进阶提高 #25 如何使用 styled-components

26ProReact 进阶提高 #26 如何使用 styled-components(实践篇)

27ProReact 进阶提高 #27 你应该使用 redux-form(介绍)

28ProReact 进阶提高 #28 你应该使用 redux-form(实践篇)

29ProReact 进阶提高 #29 React Portals(学习方法)

30ProReact 进阶提高 #30 使用 React Portals 实现 Modal 框(part 1)

31ProReact 进阶提高 #31 使用 React Portals 实现 Modal 框(part 2)

32ProReact 进阶提高 #32 使用 React Portals 实现 Modal 框(part 3)

33ProReact 进阶提高 #33 使用 React Portals 实现 Modal 框(part 4)

相似的视频
React 进阶提高 #21 React 16.3 全新的 Context API - 实践

React 进阶提高 #21 React 16.3 全新的 Context API - 实践

Pro播放时长:09:19

1509 次点击

React 进阶提高 #18 升级到 16.3

React 进阶提高 #18 升级到 16.3

免费播放时长:02:37

1437 次点击

React 进阶提高 #7 context(上下文)

React 进阶提高 #7 context(上下文)

免费播放时长:03:58

2036 次点击

React 进阶提高 #5 无状态组件的最佳写法

React 进阶提高 #5 无状态组件的最佳写法

Pro播放时长:04:52

2710 次点击

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:4

Top