React基础语法总结(二)

风不识途
938 阅读6分钟

React基础语法

1.认识JSX

  • 这段element变量的声明右侧赋值的标签语法是什么呢？
    • 我们在 JS 中不能给一个变量赋值为HTML元素
    • 如果将 type="text/babel"去掉, 会语法报错, 其实它是一段 jsx 的语法
  • JSX是什么?
    • JSX是一种JavaScript的语法扩展(eXtension), 也在很多地方称之为JavaScript XML
    • 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用
    • 它不同于Vue中的模块语法, 你不需要专门学习模块语法中的一些指令 (比如v-for、v-if、v-else、v-bind)

2.React为什么选择JSX

  • React认为渲染逻辑本质上与其他UI逻辑存在内在耦合

    • 比如UI需要绑定事件(button、a原生等等)

    • 比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI

    • 他们之间是密不可分，所以React没有将标记分离到不同的文件中

    • 而是将它们组合到了一起，这个地方就是组件(Component)

  • JSX的书写规范:
    • JSX的顶层只能有一个根元素
    • 我们通常在 jsx 的外层包裹一个小括号()，这样可以方便阅读
    • 注意：如果是单标签，必须以/>结尾

3.JSX的使用

  • JSX中的注释: { /* JSX中的注释 */ }

  • JSX中嵌入变量

    • 情况一: 当变量是Number、 String、 Array 类型是, 可以直接显示

    • 情况二: 当变量是null、undefined、Boolean类型时，内容为空

      • 如果希望显示null、undefined、Boolean，可以转换为字符串
      • 方式有很多，比如：toString方法、和 空字符串拼接 等等

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

    JSX嵌入表达式
    运算表达式
    三元运算符
    调用函数

React绑定属性

1.绑定普通属性

  • 例如: <h2 title={title}>绑定普通属性</h2>

2.绑定class

  • 注意事项: 在JSX中使用 className 来绑定class
  • 例如: <div className="aa">使用className来绑定class</div>

3.绑定style

  • 注意事项: 里面层需要再包裹一对大括号
  • 例如: div style={{ color: 'red'}}>绑定style</div>


React事件绑定

1.React事件绑定

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

2.this的绑定问题

  • 在事件执行后, 我们可能需要获取当前类中对象的相关属性, 这个时候需要用this
    • 如果函数事件处理函数中打印 this , 会发现是 undefined
  • 为什么是undefined呢?
    • 原因是 btnClick 函数并不是我们主动调用的, 而且当button触发点击事件时, React内部调用了 btnClick 函数
    • 而它内部调用时, 并不知道如何绑定正确的 this
  • 如何解决:
    • 方案一: bind给btnClick显示绑定this
    • 方案二: 使用 ES6 class fields 语法
    • 方案三: 事件监听时传入箭头函数(推荐)

3.事件参数传递

  • 情况一: 获取 event 对象
    • 如果没有传递参数，默认参数是: event 事件参数对象
  • 情况二: 获取 event 对象 和 更多参数
    • 有更多参数时，我们最好的方式就是传入一个箭头函数
    • 主动调用事件函数，并且传入相关的其他参数

补充两个知识点

  • 一: 箭头函数永远不会绑定this

  • 即使使用 call 或 apply 绑定 this 了 ,箭头函数绑定的 this 不会生效

    • 箭头函数中this依然是: 最近作用域中的 this

  • 二: bind绑定的 this 优先级比 apply 或 call 要高

    • 即使是后面通过apply或call绑定this也不会生效, 依然是bind绑定的this

React条件渲染

1.React条件渲染

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

在Vue中, 我们通过指令来控制比如:v-if、v-show

在React中，所有条件判断都和普通的 JavaScript 代码一致

  • 方式一：条件判断语法
    • 适合逻辑多的情况
  • 方式二：三元运算符
    • 适合逻辑比较简单
  • 逻辑与: 运算符&&
    • 适合如果条件成立,渲染某一个组件;如果条件不成立,什么内容也不渲染;
  • v-show的效果
    • 主要是控制display属性是否为none

2.React列表渲染

  • 真实开发中我们会从服务器请求到大量的数据，数据会以列表的形式存储
  • 在React中，展示列表最多的方式就是使用数组的 **map**高阶函数
  • 很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理
    • 比如过滤掉一些内容：filter函数
    • 比如截取数组中的一部分内容：slice函数

3.列表中的key

  • 我们会发现在前面的代码中只要展示列表都会警告:

  • 这个警告是告诉我们需要在列表展示的jsx中添加一个key.
  • 至于如何添加一个key，为什么要添加一个key，这个我们放到后面讲解setState时再来讨论

JSX的本质

1.JSX的本质

  • JSX 仅仅只是 React.creteElement(component, pops, ...children)函数的语法糖
    • 所有的 JSX 代码最终被转换成 React.createElement的函数调用
  • createElement需要传递三个参数:
    • 参数一: type
      • 当前 ReactElement 的类型
      • 如果是标签元素, 那么就使用字符串表示"diy"
      • 如果是组件元素, 那么就直接使用组件的名称
    • 参数二: config
      • 所有jsx中的属性都在 config 中以对象的属性和值的形式存储
    • 参数三: children
      • 存放在标签中的内容, 以 children 数组的方式进行存储
// jsx -> babel -> React.createElement()
// JSX最终会转换成 React.createElement(type, config, children)
const message = React.createElement("h2", null, "hello world")

ReactDOM.render(message, document.getElementById("app"))

2.Babel官网查看

  • 我们知道默认的 JSX 是通过 babel 帮我们进行语法转换的, 所以我们之前写的 JSX 代码都需要依赖 babel
  • 我们可以在bebel官网查看: JSX 转换成 React.creteElement 过程
下拉查看 image-20200808162522203

Virtual DOM

1.虚拟DOM的创建过程

  • 我们通过 React.createElement 最终创建出来一个 ReactElement 对象
  • 这个ReactElement对象是什么作用呢？React为什么要创建它呢？
    • 原因是 React 利用 ReactElement 对象组成了一个 JavaScript 的对象树
    • JavaScript的对象树就是虚拟DOM (Virtual DOM)
  • 而 ReactElement 最终形成的树结构就是 Virtual DOM

2.JSX->VirtualDom->DOM

3.声明式编程

  • 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
  • React官方的说法: Virtual DOM 是一种编程理念
    • 在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象
    • 我们可以通过 ReactDOM.render 让 虚拟DOM 和 真实DOM同步起来，这个过程中叫做协调（Reconciliation）
  • 这种编程的方式赋予了React声明式的API：
    • 你只需要告诉React希望让UI是什么状态
    • React来确保DOM和这些状态是匹配的
    • 你不需要直接进行DOM操作，只可以从手动更改DOM、属性操作、事件处理中解放出来
avatar
文章
阅读
粉丝