文章目录

  • jsx核心语法 必知必会
    • 认识jsx
      • JSX是什么？
    • 为什么React选择了JSX
      • JSX的书写规范：
    • jsx的使用
      • jsx的注释如何书写
      • jsx嵌入变量
        • 一：当变量是Number、String、Array类型时，直接显示
        • 二：当变量是null、undefined、Boolean类型时，内容为空
        • 三：对象类型不能作为子元素（not valid as a React child）
      • JSX嵌入表达式
      • JSX绑定属性
        • 常见属性(src,href...)
        • class属性
        • style内联样式
      • 事件绑定
        • this的绑定问题
        • bind显示绑定this
        • class fields 语法绑定this
        • 事件监听时传入箭头函数（推荐）
      • 事件参数传递
      • 条件渲染
      • 列表渲染
      • 列表中的key

jsx核心语法 必知必会

刚刚开始接触react，有关jsx语法的随笔。
本文只是jsx语法的使用，目前不涉及jsx的原理。

认识jsx

这个render函数返回值的标签语法是什么呢？（return跟上一个括号只是为了表示这是一个整体，方便换行）

  • 它不是一段字符串（因为没有使用引号包裹），它看起来是一段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）；

  1. 当然，后面我们还是会继续学习更多组件相关的东西；

在这里，我们只需要知道，JSX其实是嵌入到JavaScript中的一种结构语法；

JSX的书写规范：

  • JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）；
  • 为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
  • JSX中的标签可以是单标签，也可以是双标签；
    • 注意：如果是单标签，必须以/>结尾；

jsx的使用

在react的初始阶段，我是在html中直接引入cdn的方式，来学习react的jsx的语法。

在书写jsx之前需要引入三个文件：

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

而且。书写jsx的时候，也需要在外层的srcipt标签上的type属性值设置为 text/babel

<script type="text/babel">
// ...
</script>

jsx的注释如何书写

jsx的注释看起来的确是有点怪，是让人不习惯的方式。不同于js的注释。

{/* 这是jsx的注释写法 的确是有点怪 不习惯  */}

jsx嵌入变量

一：当变量是Number、String、Array类型时，直接显示

如果是数组类型，会把数组的元素全部取出，然后做字符串的拼接，最后显示到页面。

二：当变量是null、undefined、Boolean类型时，内容为空

  • 如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
  • 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；

为什么react不让布尔类型，null或者undefined这些值在使用{表达式} 的时候，不进行显示到页面上？

想一想，这玩意渲染到页面上不会显得奇怪吗？是吧，我想显示一个变量，但是这个变量没有给初始值，那么这个值就是undefined，既然是undefined，为什么还要渲染到页面上呢？很明显开发人员也没想让这个undefined的值渲染到页面。

三：对象类型不能作为子元素（not valid as a React child）

直接报错。（react就是这么规定的）

JSX嵌入表达式

  • 运算表达式
  • 三元运算符
  • 执行一个函数

JSX绑定属性

常见属性(src,href…)

class属性

绑定 class属性 在ES6以后，class变成了关键字，所以我们给元素绑定class的时候，需要写成 className

如果绑定class的时候，我们坚持使用class的话，react会报警告。

style内联样式

绑定style可以直接传一个对象。键是样式名(采用小驼峰)，值是样式值(不是变量的话需要加双引号)

{/* 3.绑定 style属性 可以直接传一个对象，键是样式名(采用小驼峰)，值是样式值(不是变量的话需要加双引号) */}
<h3 style={{ color: "red", backgroundColor: "yellow" }}>我是style</h3>

事件绑定

如果原生DOM原生有一个监听事件，我们可以如何操作呢？

  • 方式一：获取DOM原生，添加监听事件；
  • 方式二：在HTML原生中，直接绑定onclick；

在React中是如何操作呢？

  • 我们来实现一下React中的事件监听，这里主要有两点不同

    • React 事件的命名采用小驼峰式（camelCase），而不是纯小写；
  • 我们需要通过**{}**传入一个事件处理函数，这个函数会在事件发生时被执行；

**注意：在react绑定事件的时候，容易出现this的指向问题。**很多人不是很清楚this的绑定规则，如果不是很清晰，可以去看看这一篇博文：js令人费解的this

this的绑定问题

在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要用到this，如果我们这里直接打印this，也会发现它是一个undefined。

为什么是undefined呢？

  • 原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数；
  • 而它内部调用时，并不知道要如何绑定正确的this；

如何解决this的问题呢？

  • 方案一：bind给btnClick显示绑定this
  • 方案二：使用 ES6 class fields 语法
  • 方案三：事件监听时传入箭头函数（推荐）

bind显示绑定this

我觉得这个方式不是很好，如果在多个地方都使用了这同一个函数，会影响性能。毕竟这个函数会被拷贝出多个。

{/* 显示绑定 */}
<button onClick={this.btnClick.bind(this)}>按钮2</button><br/>

但是，我们也可以在初始化这个组件的时候，在构造函数(constructor)内给使用的函数绑定好this。这样就不会出现this绑定不明确的问题

constructor() {super();this.state = {}this.btnClick = this.btnClick.bind(this)
}
btnClick(){console.log(this);
}

class fields 语法绑定this

这种绑定方式会直接绑定到class类中的this。因为箭头函数是不会绑定this的，它只会使用父级作用域中的this。

btnClick = () => {console.log(this);
}

事件监听时传入箭头函数（推荐）

{/* 箭头函数 */}
<button onClick={()=>{this.btnClick()}}>按钮3</button><br/>

使用这种方式呢，可以在箭头函数内还写一些其他的代码逻辑。而且是直接调用绑定的函数(其实是this的隐式绑定了)。而且，在调用this.btnClick函数的时候，我们还可以传入相关操作， 更加灵活！

事件参数传递

在执行事件函数时，有可能我们需要获取一些参数信息：比如event对象、其他参数

  • 情况一：获取event对象 p 很多时候我们需要拿到event对象来做一些事情（比如阻止默认行为）

    • 假如我们用不到this，那么直接传入函数就可以获取到event对象；
    class App extends React.Component {constructor() {super();}btnClick(e){console.log(e);}render() {return (<div><button onClick={this.btnClick.bind(this)}>按钮1</button></div>);}
}
ReactDOM.render(<App />, document.querySelector("#app"));

    采用这种方式进行绑定事件函数，在触发事件后，react内部会自动给我们传递一个event对象(是react封装过的，不是原生event对象)。

  • 情况二：获取更多参数

    • 有更多参数时，我们最好的方式就是传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数；

    上面那种绑定事件的方式很明显是有弊端的，弊端就在于我们只是方便拿到event对象，如果处理函数中需要接收其他的参数，无疑对我们来说，是很麻烦的。那么这个时候，我们就推荐上面绑定函数的第三种方式，既可以方便的拿到event，也可以在执行的过程中，接收其他的参数。

    class App extends React.Component {constructor() {super();this.state = {movieList: ["火影忍者", "海贼王", "名侦探柯南"]}}btnClick(e) {console.log(e);}liClick(value,index,e){console.log(value,index,e);}render() {return (<div><button onClick={this.btnClick.bind(this)}>按钮1</button><ul>{this.state.movieList.map((value, index) => {return <li onClick={e => { this.liClick(value, index, e) }}>{value}</li>})}</ul></div>);}
}
ReactDOM.render(<App />, document.querySelector("#app"));

    这里会报一个没有唯一key的警告，暂时不需要管。

条件渲染

某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容：

  • 在vue中，我们会通过指令来控制：比如v-if、v-show；
  • 在React中，所有的条件判断都和普通的JavaScript代码一致；

常见的条件渲染的方式有哪些呢？

  • 方式一：条件判断语句

    • 适合逻辑较多的情况

  • 方式二：三元运算符

    • 适合逻辑比较简单

  • 与运算符&&

    • 适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；

  • v-show的效果

    • 主要是控制display属性是否为none
class App extends React.Component {constructor() {super();this.state = {flag1: true,flag2: true,flag3: true,flag4: true,}}render() {const { flag1, flag2, flag3, flag4 } = this.state;// 方式一：let f1 = undefined;if (flag1) f1 = <h2>你好啊，好兄弟！</h2>;else f1 = <h2>我不好！</h2>;// 方式二：三元运算符return (<div>{f1}{flag2 ? <h2>哈哈哈</h2> : ""}{flag3 && <h2>你好   11</h2>}<h2 style={ {display: flag4 ? "block": "none"} }>你好</h2></div>);}
}ReactDOM.render(<App />, document.querySelector("#app"));

列表渲染

真实开发中我们会从服务器请求到大量的数据，数据会以列表的形式存储：

  • p 比如歌曲、歌手、排行榜列表的数据；
  • 比如商品、购物车、评论列表的数据；
  • 比如好友消息、动态、联系人列表的数据；

如何展示列表数据呢？

在React中，展示列表最多的方式就是使用数组的map/filter高阶函数；

很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理：

  • 比如过滤掉一些内容：filter函数

  • 比如截取数组中的一部分内容：slice函数

class App extends React.Component {constructor() {super();this.state = {}}render() {const list1 = ["你好", "你好啊", "我也好"];const list2 = [40, 55, 22, 33, 88, 99];return (<div>{/*可以直接展示数组,相当于直接取出数组的所有元素，放到标签内*/}<h2>{list1}</h2><hr /><ul>{list1.map(value => <li>{value}</li>)}</ul><hr />{/*展示大于55的数字*/}<ol>{list2.filter(value => value >= 55).map(value => <li>{value}</li>)}</ol></div>);}
}
ReactDOM.render(<App />, document.querySelector("#app"));

列表中的key

我们会发现在前面的代码中只要展示列表都会报一个警告：

这个警告是告诉我们需要在列表展示的jsx中添加一个key。

至于如何添加一个key，为什么要添加一个key，这个我们放到后面学习setState时再来讨论

React初识--必知必会的jsx核心语法相关推荐

  1. 《Oracle PL/SQL必知必会》导读

    前言 Oracle PL/SQL必知必会 Oracle Database(或Oracle RDBMS)是如此流行并且获得了广泛的认可,以至于大多数用户将其简称为"Oracle"(忽 ...

  2. Java架构师必知必会，带走不谢

    可以说,Java是现阶段中国互联网公司中,覆盖度最广的研发语言,掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地. 成为Java架构师,需要掌握哪些技能呢 ...

  3. c2064 项不会计算为接受0个参数的函数_【JS必知必会】高阶函数详解与实战

    本文涵盖 前言 高级函数概念 函数作为参数的高阶函数 map filter reduce sort详解与实战 函数作为返回值的高阶函数 isType函数与add求和函数 如何自己创建高阶函数 前言 一 ...

  4. MySQL必知必会教程：深入理解MySQL技术内幕

    2019独角兽企业重金招聘Python工程师标准>>> MySQL必知必会教程:深入理解MySQL技术内幕 作为最流行的开源数据库软件之一,MySQL数据库软件已经是广为人知了.当前 ...

  5. mysql必知必会_《MySQL必知必会》学习小结

    关于SQL,之前通过sqlzoo的题目,完成了入门,也仅仅是入门而已. 最近都在忙着投简历和找新的数据分析项目做(为了练python和面试的时候有的聊),所以SQL放了一段时间没练.目前的工作用不到, ...

  6. php7.2 开启mcy扩展,phper必知必会（二）

    1.说说你对进程,线程以及协程的理解 进程:是系统进行资源分配和调度的基本单位,是基本操作系统结构的基础.进程是程序基本执行的实体.进程与进程之间是独立的,拥有完全独立的地址空间,进程的切换只发生在内 ...

  7. 脑残式网络编程入门(三)：HTTP协议必知必会的一些知识

    为什么80%的码农都做不了架构师?>>>    本文原作者:"竹千代",原文由"玉刚说"写作平台提供写作赞助,原文版权归"玉刚说&q ...

  8. 【web必知必会】—— 图解HTTP（下）

    [web必知必会]-- 图解HTTP(下) 原文:[web必知必会]-- 图解HTTP(下) 上一篇<图解HTTP 上>总结了HTTP的报文格式,发送方式,以及HTTP的一些使用. 本文再 ...

  9. mysql正则表达式关键字_《MySQL必知必会》正则表达式

    <MySQL必知必会>正则表达式 正则表达式 1.1.关键字 REGEXP 正则表达式的使用需要用到关键字 REGEXP . select prod_name from products ...

  10. java的标量和聚合量_第5节：Java基础 - 必知必会（下）

    第5节:Java基础 - 必知必会(下) 本小节是Java基础篇章的第三小节,主要讲述Java中的Exception与Error,JIT编译器以及值传递与引用传递的知识点. 一.Java中的Excep ...

最新文章

  1. HDU2066（SPFA算法）
  2. 记忆优化搜索（简单题）（洛谷P3183 [HAOI2016]食物链 ）（ P5635 【CSGRound1】天下第一 ）
  3. java.lang.Thread 和 java.lang.Runnable的区别
  4. Springsecurity之FilterSecurityInterceptor
  5. Android 监听 WiFi 开关状态
  6. HDOJ 1443 约瑟夫环的最新应用
  7. pythonhash加密_Python字符串hashlib加密模块使用案例
  8. 如何在Ubuntu 14.04上使用Percona XtraBackup创建MySQL数据库的热备份
  9. mpvue 微信小程序api_基于mpvue构建微信和支付宝小程序（1）
  10. jocky1.0.3 (原joc) java混淆器 去除jdk版本限制
  11. iOS疑难问题排查之深入探究dispatch_group crash
  12. LINUX如何配置IP别名
  13. ai人工智能的数据服务_可解释的AI-它对数据科学家有何影响？
  14. 头颅ct有伪影_颅脑CT怎么看？正常和异常影像分别是什么？干货满满！
  15. 如何将pdf在线转换成word免费版
  16. 深入浅出数据分析：寻找最大值Solver
  17. idea添加xsd文件
  18. 计算机u盘设备无法启动不了怎么办,u盘无法启动提示错误代码10该怎么处理
  19. Kafka从零开始 （Kafka是什么?）
  20. 全国高精度数字高程模型 精度为5m的dem

热门文章

  1. RTS Threshold
  2. 双稳态一键开关机电路
  3. 动画师入门必读 迪士尼影响至今的十二条动画黄金法则
  4. qrcode.js的识别解析二维码图片和生成二维码图片
  5. 嵌入式方向的毕业生，找工作很迷茫
  6. 多层次细节（Level of detail）
  7. 芝麻小客服怎么进后台？
  8. Python pandas DataFrame排序与去重操作
  9. checkio Ascending List
  10. OSPF LSA内容解析及SPF算法分析