React基础语法总结

风不识途

React基础语法

React介绍

1.React是什么?

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

<br/>

2.React的特点(了解)

声明式编程

  • 什么是声明式编程:

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

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

组件化开发

  • 组件是 React 中重要思想

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

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

多平台适配

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

<br/>

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)

<br/>

4.认识Bable

  • babel是什么:

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

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

<br/>

5.引入React依赖

  • 如何添加这三个依赖:

    • 方式一:直接CDN引入
    • 方式二:下载后,添加本地依赖
    • 方式三:通过npm管理
  • 暂时我们直接通过CDN引入
<script src="https://unpkg.com/react@16/umd/react.development.js" ></script>
<script 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>

<br/>

React初体验

1.React基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React初体验</title>
</head>
<body>
  <div id="app"></div>
  <!-- 添加React的依赖 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script 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,并且希望script中的jsx代码被解析,必须在script标签中添加type属性 -->
  <script type="text/babel">
    // <h2></h2>: jsx代码
    ReactDOM.render(<h2>Hello World</h2>, document.getElementById('app'))
  </script>
</body>
</html>
  • React.render函数

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

<br/>

2.React初体验组件化开发

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

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

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

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

<details><summary>图示</summary><pre><img src="https://gitee.com/xmkm/cloudPic/raw/master/img/20200819125150.png" /></pre></details>

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

<br/>

3.组件化-数据依赖

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

    • 参与界面更新的数据:当数据变量时,需要更新组件渲染的内容
    • 不参与界面更新的数据:当数据变量时,不需要更新将组建渲染的内容
  • 参与界面更新的数据,是定义在当前对象的 state 属性中

    • 我们通过在构造函数中: this.state = {定义的数据}
    • 当我们的数据发生变化时,我们调用 this.setState更新数据,并且通知React进行update操作

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

<details><summary>图示</summary><img src="https://gitee.com/xmkm/cloudPic/raw/master/img/20200819125220.png" /></details>

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

<br/>

4.组件化-事件绑定

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

    • 例如: <button onClick={this.changeText}>改变文本</button>
  • 当前这个函数的this指向的是谁呢?

    • 默认情况下是 undefined
    • 这次因为React并不是直接渲染成真实的DOM, 我们所编写的button只是一个语法糖, 它的本质React的Element对象
    • 那么在这里发生监听的时候,react给我们的函数绑定的this默认情况下就是一个undefined
  • 我们在绑定的函数中,可能想要使用当前对象,比如执行 this.setState 函数,就必须拿到当前对象的this

    • 我们就需要在调用函数时,给这个函数直接绑定this
    • <button onClick={this.changeText.bind(this)}>改变文本</button>

<br/>

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)

<br/>

2.React为什么选择JSX

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

    • 比如UI需要绑定事件(button、a原生等等)
    • 比如UI中需要展示数据状态,在某些状态发生改变时,又需要改变UI
    • 他们之间是密不可分,所以React没有讲标记分离到不同的文件中
    • 而是将它们组合到了一起,这个地方就是组件(Component)
  • JSX的书写规范:

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

<br/>

3.JSX的使用

  • JSX中的注释: { / JSX中的注释 / }
  • JSX中嵌入变量

    • 情况一: 当变量是Number、 String、 Array 类型是, 可以直接显示
    • 情况二: 当变量是null、undefined、Boolean类型时,内容为

      • 如果希望显示null、undefined、Boolean,可以转换为字符串
      • 方式有很多,比如:toString方法、和 空字符串拼接 等等
    • 情况三:对象类型不能作为子元素(not valid as a React child)
  • <details>
    <summary>JSX嵌入表达式</summary>
    <li>运算表达式</li>
    <li>三元运算符</li>
    <li>调用函数</li>
    </details>

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
  • 如何解决:

    • 方案一: bindbtnClick显示绑定this
    • 方案二: 使用 ES6 class fields 语法
    • 方案三: 事件监听时传入箭头函数(推荐)

3.事件参数传递

  • 情况一: 获取 event 对象

    • 如果没有传递参数,默认参数是: event 事件参数对象
  • 情况二: 获取 event 对象 和 更多参数

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

补充两个知识点

  • 一: 箭头函数永远不会绑定this
  • 即使使用 callapply 绑定 this 了 ,箭头函数绑定的 this 不会生效

    • 箭头函数中this依然是: 最近作用域中的 this
  • 二: bind绑定的 this 优先级比 apply 或 call 要高

    • 即使是后面通过applycall绑定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、属性操作、事件处理中解放出来
阅读 2.7k

学习前端

245 声望
592 粉丝
0 条评论

学习前端

245 声望
592 粉丝
文章目录
宣传栏