React基础语法总结

React基础语法

React介绍

1.React是什么?

• React 是由 Facebook 开源的一个JS 库
• 官方解释: React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库

2.React的特点(了解)

声明式编程

• 什么是声明式编程:

  • 它描述目标的性质，让电脑明白目标，而非流程
  • 声明式编程是告诉计算机需要计算 “什么” 而不是 “如何” 去计算

• 前端开发模式:

  • 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI
  • 它允许我们只需要维护自己的状态
  • 当状态改变时，React可以根据最新的状态去渲染我们的UI界面

组件化开发

• 组件是 React 中重要思想

  • 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用

• 组件化思想应用

  • 有了组件化的思想，尽可能将页面拆分成一个个小的，可复用的组件
  • 这样让我们代码更方便组织和管理，并且扩展性也强

多平台适配

• 2013年，React发布之初主要是开发Web页面；
• 2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用 ReactNative）；
• 2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（随着5G的普及，VR也会是一个火爆的应用场景

3.React开发依赖

• 开发 React 必须依赖这三个库:

  • react: 包含 react 所必须的核心代码
  • react-dom: react渲染不同平台所需要的核心代码
  • babel: 将 jsx 转换成React代码工具

• React为什么要依赖这三个库:

  • 其实, 这三个库式各司其职, 目就是让每一个库单纯做自己的事情
  • 为什么要进行拆分呢?
  • react中包含了 react 和 react-native 所共同拥有的核心代码

• react-dom针对 web 和 native 所完成的事情不同：

  • web端：react-dom会将 jsx 最终渲染成真实的DOM, 显示在浏览器中
  • native端：react-dom会将 jsx 最终渲染成原生的控件 (比如Android中的Butto, iOS中的UIButton)

4.认识Bable

• babel是什么:

  • 是目前前端使用非常广泛的编译器、转码器
  • 可以将ES6代码转为ES5代码，从而在现有环境执行

• React和Babel的关系:

  • 默认情况下 React 其实可以不用 babel
  • 但前提是我们使用 React.createElement 来编写源代码, 它编写的代码非常繁琐可读性差
  • 我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement

5.引入React依赖

• 如何添加这三个依赖：

  • 方式一：直接CDN引入
  • 方式二：下载后，添加本地依赖
  • 方式三：通过npm管理
• 暂时我们直接通过CDN引入

React初体验

1.React基本使用

• React.render函数

  • 参数一: 要渲染的内容, 可以是HTML元素, 也可以是React的组件
  • 参数二: 将渲染的内容, 挂载到哪一个HTML元素上
• 我们可以通过 {} 语法来引入外部的变量或者表达式

2.React初体验组件化开发

• 整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：

  • 我们说过 ReactDOM.render 第一参数是一个HTML元素或者一个组件
  • 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数
• 在React中, 如何封装一个组件呢?

• 这里暂时使用类的方式封装组件:

  • 定义一个类 (类名大写, 组件的名称是必须大写的, 小写会被认为是HTML元素)，继承自React.Component

  • 实现当前组件的render函数

    • render当中返回的 jsx 内容，就是之后React会帮助我们渲染的内容

图示

//封装APP组件
class App extends React.Component
  render(){
   return (
    
hello
  }
// 渲染组件
ReactDOM.render(, document.getElementById ('app'))

3.组件化-数据依赖

• 在组件中的数据，我们可以分成两类：

  • 参与界面更新的数据：当数据变量时，需要更新组件渲染的内容
  • 不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容

• 参与界面更新的数据，是定义在当前对象的 state 属性中

  • 我们通过在构造函数中: this.state = {定义的数据}

  • 当我们的数据发生变化时，我们调用 this.setState 来更新数据，并且通知React进行update操作

    • 在进行update操作时，就会重新调用render函数, 并且使用最新的数据，来渲染界面

图示

// 封装APP组件
class App extends React.Component
  constructor() {
    super()
   // 定义数据
    this.state = {message: 'hello world'}
    // 使用数据  
    render() {
      return (
        

          
        
 
    )}
}

4.组件化-事件绑定

• React中事件绑定: 在标签中定义 on + 事件名

  • 例如: 改变文本

• 当前这个函数的this指向的是谁呢？

  • 默认情况下是 undefined
  • 这次因为React并不是直接渲染成真实的DOM, 我们所编写的button只是一个语法糖, 它的本质React的Element对象
  • 那么在这里发生监听的时候，react给我们的函数绑定的this，默认情况下就是一个undefined

• 我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this

  • 我们就需要在调用函数时，给这个函数直接绑定this
  • 改变文本

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嵌入表达式

  
  

  运算表达式

  
  

  三元运算符

  
  

  调用函数

  
  

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.绑定普通属性

• 例如:

  绑定普通属性

2.绑定class

• 注意事项: 在JSX中使用 className 来绑定class
• 例如:
  使用className来绑定class

3.绑定style

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

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 过程

​

下拉查看

​

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、属性操作、事件处理中解放出来