如何选择家居网站建设,彩票系统网站开发,广告设计制作图片,中国企业500强完整榜单文章目录 认识JSX为什么React选择了JSXJSX的使用 React事件绑定this的绑定问题事件参数传递 React条件渲染React列表渲染列表中的key JSX的本质createElement源码Babel官网查看直接编写jsx代码 虚拟DOM的创建过程jsx – 虚拟DOM – 真实DOM声明式编程 阶段案例练习 认识JSX ◼ … 文章目录 认识JSX为什么React选择了JSXJSX的使用 React事件绑定this的绑定问题事件参数传递 React条件渲染React列表渲染列表中的key JSX的本质createElement源码Babel官网查看直接编写jsx代码 虚拟DOM的创建过程jsx – 虚拟DOM – 真实DOM声明式编程 阶段案例练习 认识JSX ◼ 这段element变量的声明右侧赋值的标签语法是什么呢
它不是一段字符串因为没有使用引号包裹
它看起来是一段HTML元素但是我们能在js中直接给一个变量赋值html吗
其实是不可以的如果我们将 type“text/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的使用 ◼ jsx中的注释
◼ JSX嵌入变量作为子元素
情况一当变量是Number、String、Array类型时可以直接显示
情况二当变量是null、undefined、Boolean类型时内容为空
✓ 如果希望可以显示null、undefined、Boolean那么需要转成字符串
✓ 转换的方式有很多比如toString方法、和空字符串拼接String(变量)等方式
情况三Object对象类型不能作为子元素not valid as a React child
◼ JSX嵌入表达式
运算表达式
三元运算符
执行一个函数 React事件绑定 ◼ 如果原生DOM原生有一个监听事件我们可以如何操作呢
方式一获取DOM原生添加监听事件
方式二在HTML原生中直接绑定onclick
◼ **在React中是如何操作呢**我们来实现一下React中的事件监听这里主要有两点不同
React 事件的命名采用小驼峰式camelCase而不是纯小写
我们需要通过{}传入一个事件处理函数这个函数会在事件发生时被执行 this的绑定问题 ◼ 在事件执行后我们可能需要获取当前类的对象中相关的属性这个时候需要用到this
如果我们这里直接打印this也会发现它是一个undefined
◼ 为什么是undefined呢
原因是btnClick函数并不是我们主动调用的而且当button发生改变时React内部调用了btnClick函数
而它内部调用时并不知道要如何绑定正确的this
◼ 如何解决this的问题呢 方案一bind给btnClick显示绑定this
方案二使用 ES6 class fields 语法
方案三事件监听时传入箭头函数个人推荐 事件参数传递 ◼ 在执行事件函数时有可能我们需要获取一些参数信息比如event对象、其他参数
◼ 情况一获取event对象
很多时候我们需要拿到event对象来做一些事情比如阻止默认行为
那么默认情况下event对象有被直接传入函数就可以获取到event对象
◼ 情况二获取更多参数
有更多参数时我们最好的方式就是传入一个箭头函数主动执行的事件函数并且传入相关的其他参数 React条件渲染 ◼ 某些情况下界面的内容会根据不同的情况显示不同的内容或者决定是否渲染某部分内容
在Vue中我们会通过指令来控制比如v-if、v-show
在React中所有的条件判断都和普通的JavaScript代码一致
◼ 常见的条件渲染的方式有哪些呢
◼ 方式一条件判断语句
适合逻辑较多的情况
◼ 方式二三元运算符
适合逻辑比较简单
◼ 方式三与运算符
适合如果条件成立渲染某一个组件如果条件不成立什么内容也不渲染
◼ v-show的效果
主要是控制display属性是否为none React列表渲染 ◼ 真实开发中我们会从服务器请求到大量的数据数据会以列表的形式存储
比如歌曲、歌手、排行榜列表的数据
比如商品、购物车、评论列表的数据
比如好友消息、动态、联系人列表的数据
◼ 在React中并没有像Vue模块语法中的v-for指令而且需要我们通过JavaScript代码的方式组织数据转成JSX
React中的JSX正是因为和JavaScript无缝的衔接让它可以更加的灵活
◼ 如何展示列表呢
在React中展示列表最多的方式就是使用数组的map高阶函数
◼ 很多时候我们在展示一个数组中的数据之前需要先对它进行一些处理
比如过滤掉一些内容filter函数
比如截取数组中的一部分内容slice函数 script typetext/babel// 1.定义App根组件class App extends React.Component {constructor() {super()this.state {students: [{ id: 111, name: why, score: 199 },{ id: 112, name: kobe, score: 98 },{ id: 113, name: james, score: 199 },{ id: 114, name: curry, score: 188 },]}}render() {const { students } this.state// 分数大于100的学生进行展示const filterStudents students.filter(item {return item.score 100})// 分数大于100, 只展示两个人的信息// slice(start, end): [start, end)const sliceStudents filterStudents.slice(0, 2)return (divh2学生列表数据/h2div classNamelist{students.filter(item item.score 100).slice(0, 2).map(item {return (div classNameitemh2学号: {item.id}/h2h3姓名: {item.name}/h3h1分数: {item.score}/h1/div)})}/div/div)}}// 2.创建root并且渲染App组件const root ReactDOM.createRoot(document.querySelector(#root))root.render(App/)/script列表中的key ◼ 我们会发现在前面的代码中只要展示列表都会报一个警告 ◼ 这个警告是告诉我们需要在列表展示的jsx中添加一个key。
key主要的作用是为了提高diff算法时的效率
这个我们在后续内容中再进行讲解 JSX的本质 ◼ 实际上jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。
所有的jsx最终都会被转换成React.createElement的函数调用。
◼ createElement需要传递三个参数
◼ 参数一type
当前ReactElement的类型
如果是标签元素那么就使用字符串表示 “div”
如果是组件元素那么就直接使用组件的名称
◼ 参数二config
所有jsx中的属性都在config中以对象的属性和值的形式存储
比如传入className作为元素的class
◼ 参数三children
存放在标签中的内容以children数组的方式进行存储
当然如果是多个元素呢React内部有对它们进行处理处理的源码在下方 createElement源码 Babel官网查看 ◼ 我们知道默认jsx是通过babel帮我们进行语法转换的所以我们之前写的jsx代码都需要依赖babel。
◼ 可以在babel的官网中快速查看转换的过程https://babeljs.io/repl/#?presetsreact 直接编写jsx代码 ◼ 我们自己来编写React.createElement代码
我们就没有通过jsx来书写了界面依然是可以正常的渲染。
另外在这样的情况下你还需要babel相关的内容吗不需要了
✓ 所以typetext/babel可以被我们删除掉了
✓ 所以script src../react/babel.min.js/script可以被我们删除掉了 虚拟DOM的创建过程 ◼ 我们通过 React.createElement 最终创建出来一个 ReactElement对象 ◼ 这个ReactElement对象是什么作用呢React为什么要创建它呢
原因是React利用ReactElement对象组成了一个JavaScript的对象树
JavaScript的对象树就是虚拟DOMVirtual DOM
◼ 如何查看ReactElement的树结构呢
我们可以将之前的jsx返回结果进行打印
注意下面代码中我打jsx的打印 ◼ 而ReactElement最终形成的树结构就是Virtual DOM jsx – 虚拟DOM – 真实DOM 声明式编程 ◼ 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
◼ **React官方的说法**Virtual DOM 是一种编程理念。
在这个理念中UI以一种理想化或者说虚拟化的方式保存在内存中并且它是一个相对简单的JavaScript对象
我们可以通过ReactDOM.render让 虚拟DOM 和 真实DOM同步起来这个过程中叫做协调Reconciliation
◼ 这种编程的方式赋予了React声明式的API
你只需要告诉React希望让UI是什么状态
React来确保DOM和这些状态是匹配的
你不需要直接进行DOM操作就可以从手动更改DOM、属性操作、事件处理中解放出来
◼ 关于虚拟DOM的一些其他内容在后续的学习中还会再次讲到 阶段案例练习 ◼ 1.在界面上以表格的形式显示一些书籍的数据
◼ 2.在底部显示书籍的总价格
◼ 3.点击或者-可以增加或减少书籍数量如果为1那么不能继续-
◼ 4.点击移除按钮可以将书籍移除当所有的书籍移除完毕时显示购物车为空~ format.js
function formatPrice(price) {return ¥ Number(price).toFixed(2)
}data.js
const books [{id: 1,name: 《算法导论》,date: 2006-9,price: 85.00,count: 1},{id: 2,name: 《UNIX编程艺术》,date: 2006-2,price: 59.00,count: 1},{id: 3,name: 《编程珠玑》,date: 2008-10,price: 39.00,count: 1},{id: 4,name: 《代码大全》,date: 2006-3,price: 128.00,count: 1},
]
案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title购物车案例/titlestyletable {border-collapse: collapse;text-align: center;}thead {background-color: #f2f2f2;}td, th {padding: 10px 16px;border: 1px solid #aaa;}/style
/head
bodydiv idroot/divscript src../lib/react.js/scriptscript src../lib/react-dom.js/scriptscript src../lib/babel.js/scriptscript src./data.js/scriptscript src./format.js/scriptscript typetext/babel// 1.定义App根组件class App extends React.Component {constructor() {super()this.state {books: books}}getTotalPrice() {const totalPrice this.state.books.reduce((preValue, item) {return preValue item.count * item.price}, 0)return totalPrice}changeCount(index, count) {const newBooks [...this.state.books]newBooks[index].count countthis.setState({ books: newBooks })}removeItem(index) {const newBooks [...this.state.books]newBooks.splice(index, 1)this.setState({ books: newBooks })}renderBookList() {const { books } this.statereturn divtabletheadtrth序号/thth书籍名称/thth出版日期/thth价格/thth购买数量/thth操作/th/tr/theadtbody{books.map((item, index) {return (tr key{item.id}td{index 1}/tdtd{item.name}/tdtd{item.date}/tdtd{formatPrice(item.price)}/tdtdbutton disabled{item.count 1}onClick{() this.changeCount(index, -1)}-/button{item.count}button onClick{() this.changeCount(index, 1)}/button/tdtdbutton onClick{() this.removeItem(index)}删除/button/td/tr)})}/tbody/tableh2总价格: {formatPrice(this.getTotalPrice())}/h2/div}renderBookEmpty() {return divh2购物车为空, 请添加书籍~/h2/div}render() {const { books } this.statereturn books.length ? this.renderBookList(): this.renderBookEmpty()}}// 2.创建root并且渲染App组件const root ReactDOM.createRoot(document.querySelector(#root))root.render(App/)/script/body
/html
