免费查企业电话网站,免费建站的网站哪个好,五屏网站建设怎样,济南网站建设找凌峰本文来自#React系列教程#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNAactiongetalbumalbum_id1566025152667107329) 一. ES6 的 class
虽然目前React开发模式中更加流行hooks#xff0c;但是依然有很多的项目依然是使用类组件#x… 本文来自#React系列教程https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNAactiongetalbumalbum_id1566025152667107329) 一. ES6 的 class
虽然目前React开发模式中更加流行hooks但是依然有很多的项目依然是使用类组件包括AntDesign库中
但是有很多的同学对ES6中的类不太熟悉所以这里我还是补充一下
1.1. 类的定义
在ES6之前我们通过function来定义类但是这种模式一直被很多从其他编程语言比如Java、C、OC等等转到JavaScript的人所不适应。
原因是大多数面向对象的语言都是使用class关键字来定义类的。
而JavaScript也从ES6开始引入了class关键字用于定义一个类。
ES6之前定义一个Person类
function Person(name, age) {this.name name;this.age age;
}Person.prototype.running function() {console.log(this.name this.age running);
}var p new Person(why, 18);
p.running();转换成ES6中的类如何定义呢
类中有一个constructor构造方法当我们通过new关键字调用时就会默认执行这个构造方法。构造方法中可以给当前对象添加属性。类中也可以定义其他方法这些方法会被放到Person类的prototype上。
class Person {constructor(name, age) {this.name name;this.age age;}running() {console.log(this.name this.age running);}
}const p new Person(why, 18);
p.running();另外属性也可以直接定义在类中
class Person {height 1.88;address 北京市;constructor(name, age) {this.name name;this.age age;}studying() {console.log(this.name this.age studying);}
}height和address是直接定义在类中
1.2. 类的继承
继承是面向对象的一大特性可以减少我们重复代码的编写方便公共内容的抽取也是很多面向对象语言中多态的前提。
ES6中增加了extends关键字来作为类的继承。
我们先写两个类没有继承的情况下它们存在的重复代码
Person类和Student类
class Person {constructor(name, age) {this.name name;this.age age;}running() {console.log(this.name, this.age, running);}
}class Student {constructor(name, age, sno, score) {this.name name;this.age age;this.sno sno;this.score score;}running() {console.log(this.name, this.age, running);}studying() {console.log(this.name, this.age, this.sno, this.score, studing);}
}我们可以使用继承来简化代码
class Student1 extends Person {constructor(name, age, sno, score) {super(name, age);this.sno sno;this.score score;}studying() {console.log(this.name, this.age, this.sno, this.score, studing);}
}const stu1 new Student1(why, 18, 110, 100);
stu1.studying();注意在constructor中子类必须通过super来调用父类的构造方法对父类进行初始化否则会报错。
二. 案例练习
2.1. 列表展示
真实开发中我们的数据通常会从服务器获取比较常见的是获取一个列表数据保存到一个数组中进行展示。
比如现在有一个电影列表我们如何通过React进行展示呢
我们还是通过一个组件来完成
class App extends React.Component {constructor(props) {super(props);this.state {movies: [星际穿越, 大话西游, 盗梦空间, 少年派]}}render() {// var movieLis [];// for (var i in this.state.movies) {// movieLis.push((li{this.state.movies[i]}/li));// }return (divh2电影列表/h2ul{this.state.movies.map((item, index) {return (li{item}/li)})}/ul/div)}
}ReactDOM.render(App/, document.getElementById(app));2.2. 计数器案例
电影列表的案例中并没有交互我们再来实现一个计数器的案例
class App extends React.Component {constructor(props) {super(props);this.state {counter: 0}}render() {return (divh2当前计数:{this.state.counter}/h2button onClick{this.increment.bind(this)}1/buttonbutton onClick{this.decrement.bind(this)}-1/button/div)}increment() {this.setState({counter: this.state.counter1})}decrement() {this.setState({counter: this.state.counter-1})}
}ReactDOM.render(App/, document.getElementById(app));三. JSX语法解析
3.1. 认识JSX的语法
我们先来看一段代码
script typetext/babelconst element h2Hello World/h2ReactDOM.render(element, document.getElementById(app));
/script这段element变量的声明右侧赋值的标签语法是什么呢
它不是一段字符串因为没有使用引号包裹它看起来是一段HTML原生但是我们能在js中直接给一个变量赋值html吗其实是不可以的如果我们将 typetext/babel 去除掉那么就会出现语法错误它到底是什么呢其实它是一段jsx的语法
JSX是什么
JSX是一种JavaScript的语法扩展eXtension也在很多地方称之为 JavaScript XML因为看起就是一段XML语法它用于描述我们的UI界面并且其完全可以和JavaScript融合在一起使用它不同于Vue中的模块语法你不需要专门学习模块语法中的一些指令比如v-for、v-if、v-else、v-bind
为什么React选择了JSX
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合 比如UI需要绑定事件button、a原生等等比如UI中需要展示数据状态在某些状态发生改变时又需要改变UI 他们之间是密不可分所以React没有将标记分离到不同的文件中而是将它们组合到了一起这个地方就是组件Component在这里我们只需要知道JSX其实是嵌入到JavaScript中的一种结构语法
JSX的书写规范
JSX的顶层只能有一个根元素所以我们很多时候会在外层包裹一个div原生或者使用后面我们学习的Fragment为了方便阅读我们通常在jsx的外层包裹一个小括号()这样可以方便阅读并且jsx可以进行换行书写JSX中的标签可以是单标签也可以是双标签注意如果是单标签必须以/结尾
JSX的本质我们后面再来讨论
3.2. JSX嵌入表达式
如果我们jsx中的内容是动态的我们可以通过表达式来获取
书写规则{表达式}大括号内可以是变量、字符串、数组、函数调用等任意js表达式
3.2.1. jsx中的注释
jsx是嵌入到JavaScript中的一种语法所以在编写注释时需要通过JSX的语法来编写
div{/* 我是一段注释 */}h2Hello World/h2
/div3.2.2. JSX嵌入变量
情况一当变量是Number、String、Array类型时可以直接显示情况二当变量是null、undefined、Boolean类型时内容为空 如果希望可以显示null、undefined、Boolean那么需要转成字符串转换的方式有很多比如toString方法、和空字符串拼接String(变量)等方式 情况三对象类型不能作为子元素not valid as a React child
class App extends React.Component {constructor(props) {super(props);this.state {name: why,age: 18,hobbies: [篮球, 唱跳, rap],test1: null,test2: undefined,flag: false,friend: {name: kobe,age: 40}}}render() {return (div{/* 我是一段注释 */}h2Hello World/h2/divdiv{/* 1.可以直接显示 */}h2{this.state.name}/h2h2{this.state.age}/h2h2{this.state.hobbies}/h2{/* 2.不显示 */}h2{this.state.test1}/h2h2{this.state.test1 }/h2h2{this.state.test2}/h2h2{this.state.test2 }/h2h2{this.state.flag}/h2h2{this.state.flag }/h2{/* 3.不显示 */}h2123{this.state.friend}/h2/div)}
}ReactDOM.render(App/, document.getElementById(app));补充为什么null、undefined、Boolean在JSX中要显示为空内容呢
原因是在开发中我们会进行很多的判断
在判断结果为false时不显示一个内容在判断结果为true时显示一个内容
这个时候我们可以编写如下代码
class App extends React.Component {constructor(props) {super(props);this.state {flag: false}}render() {return (div{this.state.flag ? h2我是标题/h2 : null}{this.state.flag h2我是标题/h2}/div)}
}3.3.3. JSX嵌入表达式
JSX中也可以是一个表达式。
这里我们演练三个其他的大家在开发中灵活运用
运算表达式三元运算符执行一个函数
class App extends React.Component {constructor(props) {super(props);this.state {firstName: kobe,lastName: bryant,age: 20}}render() {return (div{/* 运算表达式 */}h2{this.state.firstName this.state.lastName}/h2{/* 三元运算符 */}h2{this.state.age 18 ? 成年人: 未成年人}/h2{/* 执行一个函数 */}h2{this.sayHello(kobe)}/h2/div)}sayHello(name) {return Hello name;}
}3.3.4. jsx绑定属性
很多时候描述的HTML原生会有一些属性而我们希望这些属性也是动态的
比如元素都会有title属性比如img元素会有src属性比如a元素会有href属性比如元素可能需要绑定class 注意绑定class比较特殊因为class在js中是一个关键字所以jsx中不允许直接写class写法使用className替代 比如原生使用内联样式style style后面跟的是一个对象类型对象中是样式的属性名和属性值注意这里会将属性名转成驼峰标识而不是连接符-
我们来演示一下属性的绑定
class App extends React.Component {constructor(props) {super(props);this.state {title: 你好啊,imgUrl: https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240,link: https://www.baidu.com,active: false}}render() {return (divh2 title{this.state.title}Hello World/h2img src{this.state.imgUrl} alt/a href{this.state.link} target_blank百度一下/adiv className{message (this.state.active ? active: )}你好啊/divdiv className{[message, (this.state.active ? active: )].join( )}你好啊/divdiv style{{fontSize: 30px, color: red, backgroundColor: blue}}我是文本/div/div)}
}3.3. jsx事件监听
3.3.1. 和原生绑定区别
如果原生DOM原生有一个监听事件我们可以如何操作呢
方式一获取DOM原生添加监听事件方式二在HTML原生中直接绑定onclick
我们这里演练一下方式二
button onclickbtnClick()点我一下/button
scriptfunction btnClick() {console.log(按钮发生了点击);}
/scriptbtnClick()这样写的原因是onclick绑定的后面是跟上JavaScript代码
在React中是如何操作呢
我们来实现一下React中的事件监听这里主要有两点不同
React 事件的命名采用小驼峰式camelCase而不是纯小写我们需要通过{}传入一个事件处理函数这个函数会在事件发生时被执行
class App extends React.Component {render() {return (divbutton onClick{this.btnClick}点我一下(React)/button/div)}btnClick() {console.log(React按钮点击了一下)}
}3.3.2. this绑定问题
在事件执行后我们可能需要获取当前类的对象中相关的属性
class App extends React.Component {constructor(props) {super(props);this.state {message: 你好啊,李银河}}render() {return (divbutton onClick{this.btnClick}点我一下(React)/button/div)}btnClick() {console.log(this);console.log(this.state.message);}
}比如我们这里打印this.state.message但是这里会报错Cannot read property state of undefined
原因是this在这里是undefined如果我们这里直接打印this也会发现它是一个undefined。
为什么是undefined呢
原因是btnClick函数并不是我们主动调用的而且当button发生改变时React内部调用了btnClick函数而它内部调用时并不知道要如何绑定正确的this
如何解决this的问题呢
方案一bind给btnClick显示绑定this
在传入函数时我们可以主动绑定this
button onClick{this.btnClick.bind(this)}点我一下(React)/button这里我们主动将btnClick中的this通过bind来进行绑定显示绑定那么之后React内部调用btnClick函数时就会有一个this并且是我们绑定的this
但是呢如果我有两个函数都需要用到btnClick的绑定
button onClick{this.btnClick.bind(this)}点我一下(React)/button
button onClick{this.btnClick.bind(this)}也点我一下(React)/button我们发现 bind(this) 需要书写两遍
这个我们可以通过在构造方法中直接给this.btnClick绑定this来解决
class App extends React.Component {constructor(props) {super(props);this.state {message: 你好啊,李银河}this.btnClick this.btnClick.bind(this);}render() {return (divbutton onClick{this.btnClick}点我一下(React)/buttonbutton onClick{this.btnClick}也点我一下(React)/button/div)}btnClick() {console.log(this);console.log(this.state.message);}
}注意查看 constructor 中我们的操作this.btnClick this.btnClick.bind(this);
方案二使用 ES6 class fields 语法
你会发现我这里将btnClick的定义变成了一种赋值语句
class App extends React.Component {constructor(props) {super(props);this.state {message: 你好啊,李银河}}render() {return (divbutton onClick{this.btnClick}点我一下(React)/buttonbutton onClick{this.btnClick}也点我一下(React)/button/div)}btnClick () {console.log(this);console.log(this.state.message);}
}这是ES6中给类定义属性的方法称之为class fields语法因为这里我们赋值时使用了箭头函数所以在当前函数中的this会去上一个作用域中查找而上一个作用域中的this就是当前的对象
方案三事件监听时传入箭头函数推荐
因为 onClick 中要求我们传入一个函数那么我们可以直接定义一个箭头函数传入
class App extends React.Component {constructor(props) {super(props);this.state {message: 你好啊,李银河}}render() {return (divbutton onClick{() this.btnClick()}点我一下(React)/buttonbutton onClick{() this.btnClick()}也点我一下(React)/button/div)}btnClick() {console.log(this);console.log(this.state.message);}
}传入的箭头函数的函数体是我们需要执行的代码我们直接执行 this.btnClick()this.btnClick()中通过this来指定会进行隐式绑定最终this也是正确的
3.3.3. 事件参数传递
在执行事件函数时有可能我们需要获取一些参数信息比如event对象、其他参数
情况一获取event对象
很多时候我们需要拿到event对象来做一些事情比如阻止默认行为假如我们用不到this那么直接传入函数就可以获取到event对象;
class App extends React.Component {constructor(props) {render() {return (diva hrefhttp://www.baidu.com onClick{this.btnClick}点我一下/a/div)}btnClick(e) {e.preventDefault();console.log(e);}
}情况二获取更多参数
有更多参数时我们最好的方式就是传入一个箭头函数主动执行的事件函数并且传入相关的其他参数
class App extends React.Component {constructor(props) {super(props);this.state {names: [衣服, 鞋子, 裤子]}}render() {return (diva hrefhttp://www.baidu.com onClick{this.aClick}点我一下/a{this.state.names.map((item, index) {return (a href# onClick{e this.aClick(e, item, index)}{item}/a)})}/div)}aClick(e, item, index) {e.preventDefault();console.log(item, index);console.log(e);}
}四. 条件渲染
某些情况下界面的内容会根据不同的情况显示不同的内容或者决定是否渲染某部分内容
在vue中我们会通过指令来控制比如v-if、v-show在React中所有的条件判断都和普通的JavaScript代码一致
常见的条件渲染的方式有哪些呢
4.1. 条件判断语句
一种方式是当逻辑较多时通过条件判断
class App extends React.Component {constructor(props) {super(props);this.state {isLogin: true}}render() {let titleJsx null;if (this.state.isLogin) {titleJsx h2欢迎回来~/h2} else {titleJsx h2请先登录~/h2}return (div{titleJsx}/div)}
}当然我们也可以将其封装到一个独立的函数中
class App extends React.Component {constructor(props) {super(props);this.state {isLogin: true}}render() {return (div{this.getTitleJsx()}/div)}getTitleJsx() {let titleJsx null;if (this.state.isLogin) {titleJsx h2欢迎回来~/h2} else {titleJsx h2请先登录~/h2}return titleJsx;}
}4.2. 三元运算符
另外一种实现条件渲染的方法就是三元运算符condition ? true : false;
三元运算符适用于没有太多逻辑的代码只是根据不同的条件直接返回不同的结果
class App extends React.Component {constructor(props) {super(props);this.state {isLogin: true}}render() {return (divh2{this.state.isLogin ? 欢迎回来~: 请先登录~}/h2button onClick{e this.loginBtnClick()}{this.state.isLogin ? 退出: 登录}/button/div)}loginBtnClick() {this.setState({isLogin: !this.state.isLogin})}
}4.3. 与运算符
在某些情况下我们会遇到这样的场景
如果条件成立渲染某一个组件如果条件不成立什么内容也不渲染
如果我们使用三元运算符是如何做呢
{this.state.isLogin ? h2{this.state.username}/h2 : null}其实我们可以通过逻辑与来简化操作
{this.state.isLogin h2{this.state.username}/h2}4.4. v-show效果
针对一个HTML原生渲染和不渲染之间如果切换的非常频繁那么会相对比较损耗性能
在开发中其实我们可以通过display的属性来控制它的显示和隐藏在控制方式在vue中有一个专门的指令v-showReact没有指令但是React会更加灵活灵活带来的代价就是需要自己去实现
我来看一下如何实现 render() {const { isLogin, username } this.state;const nameDisplay isLogin ? block: none;return (divh2 style{{display: nameDisplay}}{username}/h2button onClick{e this.loginBtnClick()}{isLogin ? 退出: 登录}/button/div)}五. jsx列表渲染
5.1. 列表渲染
真实开发中我们会从服务器请求到大量的数据数据会以列表的形式存储
比如歌曲、歌手、排行榜列表的数据比如商品、购物车、评论列表的数据比如好友消息、动态、联系人列表的数据
在React中并没有像Vue模块语法中的v-for指令而且需要我们通过JavaScript代码的方式组织数据转成JSX
很多从Vue转型到React的同学非常不习惯认为Vue的方式更加的简洁明了但是React中的JSX正是因为和JavaScript无缝的衔接让它可以更加的灵活另外我经常会提到React是真正可以提高我们编写代码能力的一种方式
如何展示列表呢
在React中展示列表最多的方式就是使用数组的map高阶函数
数组的map函数语法如下
callback生成新数组元素的函数使用三个参数 currentValuecallback 数组中正在处理的当前元素。index可选callback 数组中正在处理的当前元素的索引。array可选map 方法调用的数组。 thisArg可选执行 callback 函数时值被用作this。
var new_array arr.map(function callback(currentValue, [index, [array]]) {// Return element for new_array
}[, thisArg])我们来演练一下之前的案例
class App extends React.Component {constructor(props) {super(props);this.state {movies: [盗梦空间, 大话西游, 流浪地球, 少年派, 食神, 美人鱼, 海王]}}render() {return (divh2电影列表/h2ul{this.state.movies.map(item {return li{item}/li})}/ul/div)}
}ReactDOM.render(App/, document.getElementById(app));5.2. 数组处理
很多时候我们在展示一个数组中的数据之前需要先对它进行一些处理
比如过滤掉一些内容filter函数比如截取数组中的一部分内容slice函数
比如我当前有一个数组中存放了一系列的数字[10, 30, 120, 453, 55, 78, 111, 222]
案例需求获取所有大于50的数字并且展示前3个数组
class App extends React.Component {constructor(props) {super(props);this.state {numbers: [10, 30, 120, 453, 55, 78, 111, 222]}}render() {return (divh2数字列表/h2ul{this.state.numbers.filter(item item 50).slice(0, 3).map(item {return li{item}/li})}/ul/div)}
}ReactDOM.render(App/, document.getElementById(app));基本上列表渲染都是使用数组的高阶函数map、filter等来处理
5.3. 列表的key
我们会发现在前面的代码中只要展示列表都会报一个警告 这个警告是告诉我们需要在列表展示的jsx中添加一个key。
至于如何添加一个key为什么要添加一个key这个我们放到后面讲解setState时再来讨论
六. JSX原理解析
6.1. JSX转换本质
实际上jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。
所有的jsx最终都会被转换成React.createElement的函数调用。
React.createElement在源码的什么位置呢 createElement需要传递三个参数
参数一type 当前ReactElement的类型如果是标签元素那么就使用字符串表示 “div”如果是组件元素那么就直接使用组件的名称 参数二config 所有jsx中的属性都在config中以对象的属性和值的形式存储 参数三children 存放在标签中的内容以children数组的方式进行存储当然如果是多个元素呢React内部有对它们进行处理处理的源码在下方
对children进行的处理
从第二个参数开始将其他所有的参数放到props对象的children中
const childrenLength arguments.length - 2;
if (childrenLength 1) {props.children children;
} else if (childrenLength 1) {const childArray Array(childrenLength);for (let i 0; i childrenLength; i) {childArray[i] arguments[i 2];}if (__DEV__) {if (Object.freeze) {Object.freeze(childArray);}}props.children childArray;
}真实的转换过程到底长什么样子呢我们可以从多个角度来查看。
6.1.1. Babel官网查看
我们知道默认jsx是通过babel帮我们进行语法转换的所以我们之前写的jsx代码都需要依赖babel。
可以在babel的官网中快速查看转换的过程https://babeljs.io/repl/#?presetsreact
在这里我们编写一些jsx代码来查看运行后的结果
div classNameappdiv classNameheaderh1 title标题我是网站标题/h1/divdiv classNamecontenth2我是h2元素/h2button onClick{e console.log(1)}1/buttonbutton onClick{e console.log(1)}-1/button/divdiv classNamefooterp我是网站的尾部/p/div
/div6.1.2. 编写createElement
还有一种办法是我们自己来编写React.createElement代码
class App extends React.Component {constructor(props) {render() {/*#__PURE__*/const result React.createElement(div, {className: app}, /*#__PURE__*/React.createElement(div, {className: header}, /*#__PURE__*/React.createElement(h1, {title: \u6807\u9898}, \u6211\u662F\u7F51\u7AD9\u6807\u9898)), /*#__PURE__*/React.createElement(div, {className: content}, /*#__PURE__*/React.createElement(h2, null, \u6211\u662Fh2\u5143\u7D20), /*#__PURE__*/React.createElement(button, {onClick: e console.log(1)}, 1), /*#__PURE__*/React.createElement(button, {onClick: e console.log(1)}, -1)), /*#__PURE__*/React.createElement(div, {className: footer}, /*#__PURE__*/React.createElement(p, null, \u6211\u662F\u7F51\u7AD9\u7684\u5C3E\u90E8)));return result;}
}ReactDOM.render(React.createElement(App, null) , document.getElementById(app));上面的整个代码我们就没有通过jsx来书写了界面依然是可以正常的渲染。
另外在这样的情况下你还需要babel相关的内容吗不需要了
所以typetext/babel可以被我们删除掉了所以script src../react/babel.min.js/script可以被我们删除掉了
6.2. 虚拟DOM
6.2.1. 虚拟DOM的创建过程
我们通过 React.createElement 最终创建出来一个 ReactElement对象
return ReactElement(type,key,ref,self,source,ReactCurrentOwner.current,props,
);这个ReactElement对象是什么作用呢React为什么要创建它呢
原因是React利用ReactElement对象组成了一个JavaScript的对象树JavaScript的对象树就是大名鼎鼎的虚拟DOMVirtual DOM
如何查看ReactElement的树结构呢
我们可以将之前的jsx返回结果进行打印注意下面代码中我打jsx的打印
render() {const jsx (div classNameappdiv classNameheaderh1 title标题我是网站标题/h1/divdiv classNamecontenth2我是h2元素/h2button onClick{e console.log(1)}1/buttonbutton onClick{e console.log(1)}-1/button/divdiv classNamefooterp我是网站的尾部/p/div/div)console.log(jsx);return jsx;
}打印结果在浏览器中查看 而ReactElement最终形成的树结构就是 Virtual DOM
整体的转换过程如下 6.2.2. 为什么采用虚拟DOM
为什么要采用虚拟DOM而不是直接修改真实的DOM呢
很难跟踪状态发生的改变原有的开发模式我们很难跟踪到状态发生的改变不方便针对我们应用程序进行调试操作真实DOM性能较低传统的开发模式会进行频繁的DOM操作而这一的做法性能非常的低
DOM操作性能非常低
首先document.createElement本身创建出来的就是一个非常复杂的对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
其次DOM操作会引起浏览器的回流和重绘所以在开发中应该避免频繁的DOM操作
这里我们举一个例子
比如我们有一组数组需要渲染[0, 1, 2, 3, 4]我们会怎么做呢
ulli0/lili1/lili2/lili3/lili4/li
/ul后来我们又增加了5条数据[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
for (var i5; i10; i) {var li document.createElement(li);li.innerHTML arr[i];ul.appendChild(li);
}上面这段代码的性能怎么样呢非常低效
因为我们通过 document.createElement 创建元素再通过 ul.appendChild(li) 渲染到DOM上进行了多次DOM操作对于批量操作的最好的办法不是一次次修改DOM而是对批量的操作进行合并比如可以通过DocumentFragment进行合并
虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
React官方的说法Virtual DOM 是一种编程理念。
在这个理念中UI以一种理想化或者说虚拟化的方式保存在内存中并且它是一个相对简单的JavaScript对象我们可以通过ReactDOM.render让 虚拟DOM 和 真实DOM同步起来这个过程中叫做协调Reconciliation
这种编程的方式赋予了React声明式的API你只需要告诉React希望让UI是什么状态React来确保DOM和这些状态是匹配的。
你不需要直接进行DOM操作就可以从手动更改DOM、属性操作、事件处理中解放出来。
七. 书籍购物车案例练习
参考https://mp.weixin.qq.com/s?__bizMzg5MDAzNzkwNAmid2247483948idx1sn0d788ea90f500fd1dc3a0813cfb9da2bchksmcfe3f1d3f89478c585413ecd8b50cba4d98e5893ddb150dd21f686947832505337c092a5ba58scene178cur_album_id1566025152667107329#rd
