关于react.js:React基础语法总结

6次阅读

共计 7441 个字符，预计需要花费 19 分钟才能阅读完成。

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

<br/>

什么是申明式编程:
- 它形容指标的性质，让电脑明确指标，而非流程
- 申明式编程是通知计算机须要计算“什么”而不是“如何”去计算
前端开发模式:
- 申明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI
- 它容许咱们只须要保护本人的状态
- 当状态扭转时，React 能够依据最新的状态去渲染咱们的 UI 界面

组件是 React 中重要思维
- 它提供了一种形象, 咱们能够开发出一个独立可复用的小组件来结构咱们的利用
组件化思维利用
- 有了组件化的思维，尽可能将页面拆分成一个个小的，可复用的组件
- 这样让咱们代码更不便组织和治理，并且扩展性也强

2013 年，React 公布之初次要是开发 Web 页面；
2015 年，Facebook 推出了 ReactNative，用于开发挪动端跨平台；（尽管目前 Flutter 十分火爆，然而还是有很多公司在应用 ReactNative）；
2017 年，Facebook 推出 ReactVR，用于开发虚拟现实 Web 应用程序；（随着 5G 的遍及，VR 也会是一个火爆的利用场景

<br/>

开发 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/>

babel 是什么:
- 是目前前端应用十分宽泛的 编译器 、 转码器
- 能够将 ES6 代码转 为 ES5代码，从而在现有环境执行
React和 Babel 的关系:
- 默认状况下 React 其实能够不必 babel
- 但前提是咱们应用 React.createElement 来编写源代码, 它编写的代码十分繁琐可读性差
- 咱们就能够间接编写 jsx（JavaScript XML）的语法，并且让 babel 帮忙咱们转换成React.createElement

<br/>

如何增加这三个依赖：
- 形式一：间接 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/>

<!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/>

整个逻辑其实能够看做一个整体，那么咱们就能够将其封装成一个组件：
- 咱们说过 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/>

在组件中的数据，咱们能够分成两类：
- 参加界面更新的数据：当数据变量时，须要更新组件渲染的内容
- 不参加界面更新的数据：当数据变量时，不须要更新将组建渲染的内容
参加界面更新的数据，是定义在以后对象的 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/>

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/>

这段 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/>

React 认为渲染逻辑实质上与其余 UI 逻辑存在外在耦合
- 比方 UI 须要绑定事件(button、a 原生等等)
- 比方 UI 中须要展现数据状态，在某些状态产生扭转时，又须要扭转 UI
- 他们之间是密不可分，所以 React 没有讲标记拆散到不同的文件中
- 而是将它们组合到了一起，这个中央就是组件(Component)
JSX 的书写标准:
- JSX 的顶层 只能有一个根元素
- 咱们通常在 jsx 的外层包裹一个小括号()，这样能够不便浏览
- 留神：如果是单标签，必须以 /> 结尾

<br/>

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>

这段 element 变量的申明右侧赋值的标签语法是什么呢？
- 咱们在 JS 中不能给一个变量赋值为 HTML 元素
- 如果将 type="text/babel"去掉, 会语法报错, 其实 它是一段 jsx 的语法
JSX 是什么?
- JSX 是一种 JavaScript 的语法扩大(eXtension), 也在很多中央称之为 JavaScript XML
- 它 用于形容咱们的 UI 界面 ，并且其实现 能够和 JavaScript 交融在一起应用
- 它不同于 Vue 中的模块语法, 你不须要专门学习模块语法中的一些指令 (比方 v -for、v-if、v-else、v-bind)

React 认为渲染逻辑实质上与其余 UI 逻辑存在外在耦合
- 比方 UI 须要绑定事件(button、a 原生等等)
- 比方 UI 中须要展现数据状态，在某些状态产生扭转时，又须要扭转 UI
- 他们之间是密不可分，所以 React 没有将标记拆散到不同的文件中
- 而是将它们组合到了一起，这个中央就是组件(Component)
JSX的书写标准:
- JSX的顶层 只能有一个根元素
- 咱们通常在 jsx 的外层包裹一个小括号()，这样能够不便浏览
- 留神：如果是单标签，必须以/>结尾

JSX 中的正文: {/* JSX 中的正文 */}
JSX 中嵌入变量
- 状况一: 当变量是 Number、String、Array 类型是, 能够间接显示
- 状况二: 当变量是 null、undefined、Boolean 类型时，内容为空
  - 如果心愿显示 null、undefined、Boolean，能够转换为字符串
  - 形式有很多，比方：toString 办法、和空字符串拼接等等
- 状况三：对象类型不能作为子元素（not valid as a React child）
JSX 嵌入表达式

例如: <h2 title={title}> 绑定一般属性 </h2>

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

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

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

在事件执行后, 咱们可能须要 获取以后类中对象的相干属性, 这个时候须要用this
- 如果 函数事件处理函数中打印 this , 会发现是 undefined
为什么是 undefined 呢?
- 起因是 btnClick 函数并 不是咱们被动调用的 , 而且当 button 触发点击事件时, React 外部调用了 btnClick 函数
- 而它外部调用时, 并不知道如何绑定正确的this
如何解决:
- 计划一: bind给 btnClick 显示绑定this
- 计划二: 应用 ES6 class fields 语法
- 计划三: 事件监听时 传入箭头函数(举荐)

状况一: 获取 event 对象
- 如果没有传递参数，默认参数是: event 事件参数对象
状况二: 获取 event 对象和更多参数
- 有更多参数时，咱们最好的形式就是传入一个箭头函数
- 被动调用事件函数，并且传入相干的其余参数

一: 箭头函数永远不会绑定 this
即便应用 call 或 apply 绑定 this 了 , 箭头函数绑定的 this 不会失效
- 箭头函数中 this 仍然是: 最近作用域中的 this
二: bind 绑定的 this 优先级比 apply 或 call 要高
- 即便是 前面通过 apply 或call绑定 this 也不会失效, 仍然是 bind 绑定的this

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

在 Vue 中, 咱们通过指令来管制比方: v-if、v-show

在 React 中，所有条件判断都和一般的 JavaScript 代码统一

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

实在开发中咱们会从服务器申请到大量的数据，数据会以列表的模式存储
在 React 中，展现列表最多的形式就是应用数组的 map高阶函数
很多时候咱们在展现一个数组中的数据之前，须要先对它进行一些解决
- 比方过滤掉一些内容：filter函数
- 比方截取数组中的一部分内容：slice函数

咱们会发现在后面的代码中只有展现列表都会正告:

这个正告是通知咱们须要在列表展现的 jsx 中增加一个 key.
至于如何增加一个 key，为什么要增加一个key，这个咱们放到前面解说setState 时再来探讨

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”))

咱们晓得默认的 JSX 是通过 babel 帮咱们进行语法转换的, 所以咱们之前写的 JSX 代码都须要依赖 babel
咱们能够在 bebel 官网查看: JSX 转换成 React.creteElement 过程

下拉查看

咱们通过 React.createElement 最终创立进去一个 ReactElement 对象
这个 ReactElement 对象是什么作用呢？React为什么要创立它呢？
- 起因是 React 利用 ReactElement 对象组成了一个 JavaScript的对象树
- JavaScript 的对象树就是虚构 DOM (Virtual DOM)
而 ReactElement 最终造成的树结构就是 Virtual DOM

虚构 DOM 帮忙咱们从命令式编程转到了申明式编程的模式
React 官网的说法: Virtual DOM 是一种编程理念
- 在这个理念中，UI 以一种理想化或者说虚拟化的形式保留在内存中，并且它是一个绝对简略的 JavaScript 对象
- 咱们能够通过 ReactDOM.render 让虚构 DOM 和实在 DOM 同步起来，这个过程中叫做协调（Reconciliation）
这种编程的形式赋予了 React 申明式的 API：
- 你只须要通知 React 心愿让 UI 是什么状态
- React 来确保 DOM 和这些状态是匹配的
- 你不须要间接进行 DOM 操作，只能够从手动更改 DOM、属性操作、事件处理中解放出来

正文完

react.js

发表至： react.js

2020-09-02

0

关于react.js:React10React-Context技术2

关于react.js:经常被问到的reactrouter实现原理详解

关于react.js:细聊Concent-Recoil-探索react数据流的新开发模式

关于react.js:React18TSNestJSGraphQL-全栈开发在线教育平台无密

关于运维:基于SaltstackArtifactory打造传统模式下持续部署平台

关于react.js: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. 申明式编程

站内搜索