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代码，从而在现有环境执行
React和Babel的关系:
- 默认情况下 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会帮助我们渲染的内容

//封装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函数, 并且使用最新的数据，来渲染界面

// 封装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
如何解决:
- 方案一: 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、属性操作、事件处理中解放出来

React基础语法总结

React基础语法

React介绍

1.React是什么?

2.React的特点(了解)

声明式编程

组件化开发

多平台适配

3.React开发依赖

4.认识Bable

5.引入React依赖

React初体验

1.React基本使用

2.React初体验组件化开发

3.组件化-数据依赖

4.组件化-事件绑定

React基础语法

1.认识JSX

2.React为什么选择JSX

3.JSX的使用

1.认识JSX

2.React为什么选择JSX

3.JSX的使用

React绑定属性

1.绑定普通属性

2.绑定class

3.绑定style

React事件绑定

1.React事件绑定

2.this的绑定问题

3.事件参数传递

补充两个知识点

React条件渲染

1.React条件渲染

2.React列表渲染

3.列表中的key

JSX的本质

1.JSX的本质

2.Babel官网查看

Virtual DOM

1.虚拟DOM的创建过程

2.JSX->VirtualDom->DOM

3.声明式编程

风不识途

引用和评论

浏览器渲染原理(一文搞懂)

一些react使用小技巧（中）

分享一个基于webpack5 + react + antd的空后台,优化的不错,拿来即用

startViewTransition的简单示例

ReactNative开发笔记（持续更新...）

通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目

安装vmware配置ubuntu linux环境 上篇

安装vmware配置ubuntu linux环境上篇