实操《深入浅出React和Redux》第一期
上次的书看得差不多了,但实践越来越麻烦。
于是重新开一本书,这次,人家用了create-react-app。
实践方面就容易开展啦。:)
主要文件内容也少多啦。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';import ControlPanel from './ControlPanel';
import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<ControlPanel />, document.getElementById('root'));
registerServiceWorker();
ControlPanel.js
import React, { Component } from 'react';
import Counter from './Counter';const style = {margin: '20px'
};class ControlPanel extends Component {constructor(props){super(props);this.onCounterUpdate = this.onCounterUpdate.bind(this);this.initValue = [0, 10, 20];const initSum = this.initValue.reduce((a, b) => a+b, 0);this.state = {sum: initSum};}onCounterUpdate(newValue, previousValue) {const valueChange = newValue - previousValue;this.setState({sum: this.state.sum + valueChange});}render() {console.log("enter ControlPanel render");return (<div style={style}><Counter onUpdate={this.onCounterUpdate} caption="First" /><Counter onUpdate={this.onCounterUpdate} caption="Second" initValue = {10} /><Counter onUpdate={this.onCounterUpdate} caption="Third" initValue = {20} /><button onClick={ ()=> this.forceUpdate() }>Click me to re-render!</button><hr /><div> Total Count: {this.state.sum}</div></div>);}
}export default ControlPanel;
Counter.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';const buttonStyle = {margin: '10px'
};const propTypes = {caption: PropTypes.string.isRequired,initValue: PropTypes.number,onUpdate: PropTypes.func
};class Counter extends Component {constructor(props) {super(props);console.log("enter constructor: " + props.caption);this.onClickIncrementButton = this.onClickIncrementButton.bind(this);this.onClickDecrementButton = this.onClickDecrementButton.bind(this);this.state = {count: props.initValue}}onClickIncrementButton() {this.updateCount(true);}onClickDecrementButton() {this.updateCount(false);}updateCount(isIncrement) {const previousValue = this.state.count;const newValue = isIncrement?previousValue + 1:previousValue -1;this.setState({count: newValue});this.props.onUpdate(newValue, previousValue);}render() {console.log("enter render " + this.props.caption);const {caption} = this.props;return (<div><button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button><button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button><span> { caption } count: {this.state.count}</span></div>);}
}Counter.defaultProps = {initValue: 0,onUpdate: f => f
};
Counter.propTypes = propTypesexport default Counter;
最终输出:
实操《深入浅出React和Redux》第一期相关推荐
- [react] 《深入浅出React和Redux》 读书笔记
随书代码 1 React 新的前端思维方式 npm i create-react-app -g create-react-app first_react_app npm start//执行eject则 ...
- 实操《深入浅出React和Redux》第二期—Flux
2019独角兽企业重金招聘Python工程师标准>>> 此书讲得蛮详细, 从Flux一步一步过渡到Redux. 写过的代码舍不得扔, 立此存照吧. 我有几张阿里云幸运券分享给你,用券 ...
- 实操《深入浅出React和Redux》第四期--react-redux
入到第四期, 代码大大简化, 但如果没有前面的演化过程, 一定让人蒙圈~~ 三个主要文件: index.js import React from 'react'; import ReactDOM fr ...
- 华为昇腾师资培训沙龙·南京场 |华为昇腾 ACL 语言开发实践全程干货来了!看完就实操系列...
自今年疫情以来,AI 技术加速进入了人们的视线,在抗疫过程中发挥了重要作用,产业发展明显提速,我国逐步走出了一条由需求导向引领商业模式创新.市场应用倒逼基础理论和关键技术创新的发展道路,AI 人才的争 ...
- linux远程工具_【linux实操3.1】linux远程连接工具Secure的使用
把自己的闲置笔记本用来做centos7服务器了,同时也出一期教程,记录自己同时也帮助需要的人:安排如下 1.[linux实操1]华硕笔记本安装centos7实战 2.[linux实操2]使用yum在命 ...
- 可编程CDN – EdgeScript应用场景、语言速览和实操演示
5月8日下午15:00,CDN云课堂的第二期,阿里云CDN团队技术专家拓山为大家带来了<可编程CDN – EdgeScript实践>主题技术分享.本次分享通过对阿里云CDN成长到当前体量的 ...
- 百度贴吧自动发帖_引流网赚之百度贴吧引流窍门:实操引流教程百度贴吧零成本自动顶帖+10分钟学会豆瓣顶帖引流...
引流网赚之百度贴吧窍门:实操引流教程<百度贴吧零成本自动顶帖>+<10分钟学会豆瓣顶帖引流> 关于百度贴吧的引流方式有很多,像常见的关键词排名引流,比如,百度贴吧引流效果好不好 ...
- 数字化风控全流程 实操课程V2.0 第三期
一:课程主题 数字化风控全流程 实操训练营V2.0 第三期 二:时间 7月中旬-8月中旬,课后还会有录制回放视频. 三:活动方式 1:线上远程直播培训 2:线下现场课程培训 四:简介 五:老师简介 此 ...
- 从实操教学到赛题演练,腾讯专家亲授TI-ONE平台操作攻略!
5月10日,我们迎来了"视"界直播周的首场直播--"2021腾讯广告算法大赛赛题解析".直播现场,芦清林和熊江丰老师对本届赛事的两大赛题进行了深入浅出的解析 ...
最新文章
- Codeforces 458C - Elections
- 回溯法解决四皇后问题
- POJ_2104 K-th Number 【主席树】
- Azkaban编译和安装模式
- java jpa 异步编程_异步处理时的JPA
- java web 启动顺序_JavaWeb开发Servlet过滤器链执行顺序详解
- NB-IoT终端进网检测介绍
- python type
- RHEL7/CentOS7在线和离线安装GitLab配置使用实践
- code review平台Rietveld应用指南
- 通信技术基础知识回顾
- MemTest和Memtest86+使用教程
- Xilinx VIVADO 中 DDR3(AXI4)的使用(3)模块封装
- 机器人开发--机器人资料汇总
- 工业以太网串口网关ENB-301MT
- uniapp返回上一页并刷新数据
- RK61键盘使用说明书
- yii学习笔记—gii 自动代码生成工具
- C++编程-leetcode-19-删除链表的倒数第N个结点
- mysql存储过程中使用select count(*) into 变量名 from +表+ where条件的用法