乐趣区

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

作者：

jiezi

在

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会帮忙咱们渲染的内容

<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

  • 如何解决:

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章