《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新

世界上最伟大的投资就是投资自己的教育

剧场模式
首页前端ReactReact 进阶提高免费视频教程 - 技巧篇 - 第 1 季

React 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

求知小风 · 元婴发布于
0

练习的源码:https://github.com/hfpp2012/redux-reminder-pro

https://www.rails365.net/movies/react-jin-jie-ti-gao-21-react-16-3-quan-xin-context-api-shi-jian

src/contexts/ReminderContext.js

import React, { Component } from 'react';
import { bake_cookie, read_cookie } from 'sfcookies';

export const ReminderContext = React.createContext();

export class ReminderProvider extends Component {
  state = {
    reminders: read_cookie("reminders") || []
  }

  addReminder = (text, dueDate) => {
    let reminders = [];
    reminders = [
      ...this.state.reminders,
      { id: Math.random(), text, dueDate }
    ];
    this.setState({
      reminders: reminders
    });
    bake_cookie("reminders", reminders);
  }

  deleteReminder = (id) => {
    let reminders = [];
    reminders = this.state.reminders.filter(reminder => reminder.id !== id);
    this.setState({
      reminders: reminders
    });
    bake_cookie("reminders", reminders);
  }

  clearReminders = () => {
    this.setState({
      reminders: []
    });
    bake_cookie("reminders", []);
  }

  render() {
    return (
      <ReminderContext.Provider
        value={{
          reminders: this.state.reminders,
          addReminder: this.addReminder,
          deleteReminder: this.deleteReminder,
          clearReminders: this.clearReminders
        }}
      >
        { this.props.children }
      </ReminderContext.Provider>
    );
  }
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

import { ReminderContext, ReminderProvider } from './contexts/ReminderContext';

ReactDOM.render(
  <ReminderProvider>
    <ReminderContext.Consumer>
      { ({ reminders, clearReminders, addReminder, deleteReminder }) =>
        (<App clearReminders={ clearReminders } deleteReminder={ deleteReminder } addReminder={ addReminder } reminders={ reminders } />)
      }
    </ReminderContext.Consumer>
  </ReminderProvider>,
  document.getElementById('root')
);
registerServiceWorker();

src/components/App.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '',
      dueDate: ''
    };
  }

  addReminder() {
    this.props.addReminder(this.state.text, this.state.dueDate);
  }

  deleteReminder(id) {
    this.props.deleteReminder(id);
  }

  clearReminders() {
    this.props.clearReminders();
  }

  renderReminders() {
    const { reminders } = this.props;
    return (
      <ul className="list-group col-sm-8 mt-2">
        {
          reminders.map(reminder => {
            return (
              <li key={ reminder.id } className="list-group-item">
                <div className="list-item">
                  <div>{ reminder.text }</div>
                  <div><em>{ moment(new Date(reminder.dueDate)).fromNow() }</em></div>
                </div>
                <div
                  className="list-item delete-button"
                  onClick={ () => this.deleteReminder(reminder.id) }
                >
                  &#x2715;
                </div>
              </li>
            );
          })
        }
      </ul>
    );
  }

  render() {
    return (
      <div className="App">
        <div className="title">Reminder Pro</div>

        <div className="form-inline">
          <div className="form-group mr-2">
            <input
              type="text"
              className="form-control mr-2"
              placeholder="I have to..."
              onChange={ (event) => this.setState({text: event.target.value}) }
            />
            <input
              type="datetime-local"
              className="form-control"
              onChange={ (event) => this.setState({dueDate: event.target.value}) }
            />
          </div>
          <button
            type="button"
            className="btn btn-success"
            onClick={ () => this.addReminder() }
          >
            Add Reminder
          </button>
        </div>
        { this.renderReminders() }
        <div 
          className="btn btn-danger mt-3"
          onClick={ () => this.clearReminders() }
        >
          Clear Reminders
        </div>
      </div>
    );
  }
}

App.propTypes = {
  reminders: PropTypes.array.isRequired,
  addReminder: PropTypes.func.isRequired,
  deleteReminder: PropTypes.func.isRequired,
  clearReminders: PropTypes.func.isRequired
}

export default App;
6 条回复
  • constantince · 真仙

    这种方法貌似没什么实际用处?

  • 求知小风 · 元婴

    上一节不是有说它的用处吗?😂

  • constantince · 真仙

    我的意思是这种代替redux的方法,很少用到。在状态管理上会写得更复杂。不知道官方推不推荐。

  • 求知小风 · 元婴

    既然出现了这种东西,以后的 redux 的核心代码可能就会用它来改写,还有,既然有用,就算是难用,总可以封装的嘛,可能以后就会出现各种库了。

  • Genp0 · 太乙
    Genp0 · 太乙 #5

    那context和redux要怎么选?哪个好?

  • 韦威 · 真仙
    韦威 · 真仙 #6

    个人理解是,目前context可以用于一些组件的二次包装,这种情况用redux感觉有点宰牛刀的感觉。如果需要集中处理状态的,就用redux。目前我有个项目就是,表格组件是用context做一些简单的传值,但是整个项目用的dva的状态管理。

热门课程 love
喜欢
微信群讲师微信知乎服务号github视频号
程序员随风
课程目录

1FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用

2FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages

3FreeReact 技巧 #3 React-router 教程 part 1

4FreeReact 技巧 #4 React-router 教程 part 2

5FreeReact 进阶提高免费视频教程 #5 React.PureComponent

6FreeReact 进阶提高免费视频教程 #6 Fragment

7FreeReact 进阶提高免费视频教程 #7 context(上下文)

8FreeReact 进阶提高免费视频教程 #8 高阶组件

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

10FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码

11FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)

12FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式

13FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用

14FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1

15FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2

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

17FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch

18FreeReact 进阶提高免费视频教程 #18 升级到 16.3

19FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法

20FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API

21FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践

FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

23FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据

24FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解

25FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components

26FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)

27FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)

28FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)

29FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)

30FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)

31FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)

32FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)

33FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)

学员(70)
wdy · 合体破妄之眼 · 太乙Web · 太乙symbolmale · 合体JesusCracker · 道祖vaveee@qq.com · 道祖biantonghai · 太乙温文尔雅 · 道祖smile · 道祖教主 · 大乘Luminous🌈 · 金仙氕氘氚 · 道祖
最新动态
wdy · 合体学习到了0:14
破妄之眼 · 太乙学习到了11:54
Web · 太乙学习到了12:01
symbolmale · 合体学习到了0:25
JesusCracker · 道祖学习到了2:05
统计信息
    学员: 19865
    视频数量: 1241
    帖子数量: 443

© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1136

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top