世界上最伟大的投资就是投资自己的教育
练习的源码:https://github.com/hfpp2012/redux-reminder-pro
https://www.qiuzhi99.com/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) }
>
✕
</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;
07:141FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用
05:342FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages
10:293FreeReact 技巧 #3 React-router 教程 part 1
07:394FreeReact 技巧 #4 React-router 教程 part 2
04:525FreeReact 进阶提高免费视频教程 #5 React.PureComponent
02:366FreeReact 进阶提高免费视频教程 #6 Fragment
03:587FreeReact 进阶提高免费视频教程 #7 context(上下文)
02:518FreeReact 进阶提高免费视频教程 #8 高阶组件
08:209FreeReact 进阶提高免费视频教程 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)
05:5810FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码
04:3011FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)
03:0712FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式
06:4913FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用
06:3714FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1
09:5715FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2
11:0816FreeReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)
11:4517FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch
02:3718FreeReact 进阶提高免费视频教程 #18 升级到 16.3
03:5019FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法
06:5020FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API
09:1921FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践
11:37FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践
06:1023FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据
06:0624FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解
04:5625FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components
07:2926FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)
06:4027FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)
10:3428FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)
08:5229FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)
04:2130FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)
07:2631FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)
04:3832FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)
05:3033FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
这种方法貌似没什么实际用处?
上一节不是有说它的用处吗?😂
我的意思是这种代替 redux 的方法,很少用到。在状态管理上会写得更复杂。不知道官方推不推荐。
既然出现了这种东西,以后的 redux 的核心代码可能就会用它来改写,还有,既然有用,就算是难用,总可以封装的嘛,可能以后就会出现各种库了。
那 context 和 redux 要怎么选?哪个好?
个人理解是,目前 context 可以用于一些组件的二次包装,这种情况用 redux 感觉有点宰牛刀的感觉。如果需要集中处理状态的,就用 redux。目前我有个项目就是,表格组件是用 context 做一些简单的传值,但是整个项目用的 dva 的状态管理。