• 574 React系列(一)

    React系列(一) - 邂逅React开发

    我个人一直喜欢使用邂逅这个词，我希望每个人在和一个新技术接触的时候，都是一场美丽的邂逅。

    而React本身绝对是优雅和美丽的，所以从这里开始，我们和React来一场美丽的邂逅吧！

    一. 认识React

    1.1. React是什么？

    React是什么呢？相信每个做前端的人对它都或多或少有一些印象。

    这里我们来看一下官方对它的解释：用于构建用户界面的 JavaScript 库。

    图片React是什么？

    我们知道对于前端来说，主要的任务就是构建用于界面，而构建用于界面离不开三个技术：

    • HTML：构建页面的结构
    • CSS：构建页面的样式
    • JavaScript：页面动态内容和交互

    那么使用最原生的HTML、CSS、JavaScript可以构建完整的用户界面吗？当然可以，但是会存在很多问题

    • 比如操作DOM兼容性的问题；
    • 比如过多兼容性代码的冗余问题；
    • 比如代码组织和规范的问题；

    所以，一直以来前端开发人员都在需求可以让自己开发更方便的JavaScript库：

    • 在过去的很长时间内，jQuery是被使用最多的JavaScript库；
    • 在过去的一份调查中显示，全球前10,000个访问最高的网站中，有65%使用了jQuery，是当时最受欢迎的JavaScript库；
    • 但是越来越多的公司开始慢慢不再使用jQuery，包括程序员使用最多的GitHub；

    现在前端领域最为流行的是三大框架：

    • Vue
    • React
    • Angular

    图片三个框架

    而Angular在国内并不是特别受欢迎，尤其是Angular目前的版本对TypeScript还有要求的情况下。

    Vue和React是国内最为流行的两个框架，而他们都是帮助我们来构建用户界面的JavaScript库。

    • 关于它们的对比，我会另外再写一篇文章

    1.2. React的起源

    React是2013年，Facebook开源的JavaScript框架，那么当时为什么Facebook要推出这样一款框架呢？

    这个源于一个需求，所产生的bug：

    图片Facebook功能需求

    该功能上线之后，总是出现bug：

    • 三个消息的数字在发生变化时，过多的操作很容易产生bug；

    bug是否可以修复呢？当然可以修复，但是Facebook的工程师并不满足于此；

    他们开始思考为什么会产生这样的问题；

    • 在传统的开发模式中，我们过多的去操作界面的细节；（前端、iOS、Android）

      • 比如说需要掌握和使用大量DOM的API，当然我们可以通过jQuery来简化和适配一些API的使用；

    • 另外关于数据（状态），往往会分散到各个地方，不方便管理和维护；

    他们就去思考，是否有一种新的模式来解决上面的问题：

    • 1.以组件的方式去划分一个个功能模块
    • 2.组件内以jsx来描述UI的样子，以state来存储组件内的状态
    • 3.当应用的状态发生改变时，通过setState来修改状态，状态发生变化时，UI会自动发生更新

    1.3. React的特点和优势

    1.3.1. React的特点

    声明式编程：

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

    图片声明式编程

    组件化开发：

    • 组件化开发页面目前前端的流行趋势，我们会讲复杂的界面拆分成一个个小的组件；
    • 如何合理的进行组件的划分和设计也是后面我会讲到的一个重点；

    图片组件化开发

    多平台适配：

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

    图片react多平台

    1.3.2. React的优势

    React由Facebook来更新和维护，它是大量优秀程序员的思想结晶：

    • React的流行不仅仅局限于普通开发工程师对它的认可，大量流行的其他框架借鉴React的思想；

    Vue.js框架设计之初，有很多的灵感来自Angular和React。

    • 包括Vue3很多新的特性，也是借鉴和学习了React
    • 比如React Hooks是开创性的新功能（也是我们课程的重点）
    • Vue Function Based API学习了React Hooks的思想

    Flutter的很多灵感都来自React，来自官网的一段话：（SwiftUI呢）

    图片来自Flutter官网

    • 事实上Flutter中的Widget – Element – RenderObject，对应的就是JSX – 虚拟DOM – 真实DOM

    所以React可以说是前端的先驱者，它总是会引领整个前端的潮流。

    1.4. React的现状

    另外在HackerRank中，2020年有一份调用，你更想要学习的framework（框架）：

    图片哪一个是你最想要学习的框架

    国内外很多知名网站使用React开发：

    图片image-20200608115008557

    目前国内在大型公司使用React的较多：

    图片高级前端工程师要求

    二. Hello React

    2.1. 原生案例实现

    为了演练React，我们可以提出一个小的需求：

    • 在界面显示一个文本：Hello World
    • 点击下方的一个按钮，点击后文本改变为Hello React
    • 在界面显示一个文本：Hello World
    • 点击下方的一个按钮，点击后文本改变为Hello React

    图片案例效果

    但是，我们使用React实现之前，先使用原生代码来实现，这样更加方便大家对比React和原生：

    • 当然，你也可以使用jQuery和Vue来实现，对它们分别进行对比学习

    原生实现代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <h2 class="title"></h2>
  <button class="btn">改变文本</button>

  <script>
    // 命令式编程: 每做一个操作,都是给计算机(浏览器)一步步命令
    // 声明式编程:
    // 1.定义数据
    let message = "Hello World";

    // 2.将数据显示在h2元素中
    const titleEl = document.getElementsByClassName("title")[0];
    titleEl.innerHTML = message;

    // 3.点击按钮,界面的数据发生改变
    const btnEl = document.getElementsByClassName("btn")[0];
    btnEl.addEventListener("click", e => {
      message = "Hello React";
      titleEl.innerHTML = message;
    })

  </script>

</body>
</html>

    2.2. React开发依赖

    开发React必须依赖三个库：

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

    第一次接触React会被它繁琐的依赖搞蒙，对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个库。

    其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情：

    • 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里。

    • 为什么要进行拆分呢？原因就是react-native。

    • react包中包含了react和react-native所共同拥有的核心代码。

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

      • web端：react-dom会讲jsx最终渲染成真实的DOM，显示在浏览器中
      • native端：react-dom会讲jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

    babel是什么呢？

    • Babel ，又名 Babel.js。
    • 是目前前端使用非常广泛的编辑器、转移器。
    • 比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
    • 那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。

    React和Babel的关系：

    • 默认情况下开发React其实可以不使用babel。
    • 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
    • 那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。
    • 后续还会讲到；

    所以，我们在编写React代码时，这三个依赖都是必不可少的。

    那么，如何添加这三个依赖：

    暂时我们直接通过CDN引入，来演练下面的示例程序：

    • 这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    2.3. Hello World

    下面我们通过一个Hello World的案例来看下如何使用React开发。

    需求非常简单：通过React，在界面上显示一个Hello World

    • 注意：这里我们编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法
    <div id="app"></div>

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

<script type="text/babel">
  // 通过ReactDom对象来渲染内容
  ReactDOM.render(<h2>Hello World</h2>, document.getElementById("app"));
</script>

    代码解析：

    • 依赖不需要多讲，开发React代码必须添加三个依赖；

    • ReactDOM.render函数：

      • 这里我们已经提前定义一个id为app的div
      • 这里我们传入了一个h2元素，后面我们就会使用React组件
      • 参数一：传递要渲染的内容，这个内容可以是HTML元素，也可以是React的组件
      • 参数二：将渲染的内容，挂载到哪一个HTML元素上

    显示效果：

    图片Hello World

    但是目前我们渲染的内容是定义死的，能否将其抽取到一个变量中呢？

    • 当然可以，我们可以通过{}语法来引入外部的变量或者表达式
    // 将数据定义到变量中let message = "Hello World";// 通过ReactDom对象来渲染内容ReactDOM.render(<h2>{message}</h2>, document.getElementById("app"));

    2.4. Hello React

    按照我们最初的案例，我们已经实现了Hello World，但是我们希望点击一个按钮后，修改为Hello React

    2.4.1. 错误的方式

    下面的代码是我们正常的执行逻辑，但是会报错：

    • 原因是默认情况下 ReactDOM.render 会覆盖挂载到的app原生中的所有内容；
    • 所以在执行完 ReactDOM.render 之后，就不存在button原生了；
    <body>
  
  <div id="app">
    <button class="change-btn">改变文本</button>
  </div>

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

  <script type="text/babel">
    // 将数据定义到变量中
    let message = "Hello World";

    // 通过ReactDom对象来渲染内容
    ReactDOM.render(<h2>{message}</h2>, document.getElementById("app"));

    // 获取btn
    const btnEl = document.getElementsByClassName("change-btn")[0];
    btnEl.addEventListener("click", (e) => {
      console.log(e);
    })
  </script>
</body>

    2.4.2. 正确的方式

    虽然可以实现，但是整个代码的流畅过于繁琐

    <body>

  <div id="app">
  </div>

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

  <script type="text/babel">
    // 将数据定义到变量中
    let message = "Hello World";

    // 通过ReactDom对象来渲染内容
    render();

    // 定义一个执行的函数
    function btnClick() {
      message = "Hello React";
      render();
    }

    function render() {
      ReactDOM.render((
        <div>
          <h2>{message}</h2>
          <button onClick={btnClick}>改变文本</button>
        </div>
      ), document.getElementById("app"));
    }
  </script>
</body>

    2.4.3. 组件的方式

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

    • 我们说过 ReactDOM.render 第一参数是一个HTML原生或者一个组件；
    • 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；

    在React中，如何封装一个组件呢？

    • 这里我们暂时使用类的方式封装组件：

      • render当中返回的jsx内容，就是之后React会帮助我们渲染的内容
      • 1.定义一个类，继承自React.Component
      • 2.实现当前组件的render函数

    具体的代码如下：

    class App extends React.Component {
  render() {
    return (<h2>Hello World</h2>)
  }
}

ReactDOM.render(<App/>, document.getElementById("app"));

    如果我们的Hello World是依赖变量的，并且会根据按钮的点击而改变呢？这里涉及到几个核心点

    1.数据在哪里定义

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

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

    • 参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中

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

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

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

    2.事件绑定中的this

    • 在类中直接定义一个函数，并且将这个函数绑定到html原生的onClick事件上，当前这个函数的this指向的是谁呢？

    • 默认情况下是undefined

      • 很奇怪，居然是undefined；
      • 因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；
      • 这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；
      • 那么在这里发生监听的时候，react给我们的函数绑定的this，默认情况下就是一个undefined；

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

      • 我们就需要在传入函数时，给这个函数直接绑定this
      • 类似于下面的写法：<button onClick={this.changeText.bind(this)}>改变文本</button>

    我们一起来看一下代码是如何实现的：

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
  </div>

  <!-- 添加React的依赖 -->
  <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->

  <script src="./react/react.development.js"></script>
  <script src="./react/react-dom.development.js"></script>
  <script src="./react/babel.min.js"></script>


  <!-- 开始开发 -->
  <script type="text/babel">
    // 封装App组件
    class App extends React.Component {
      constructor() {
        super();
        // this.message = "Hello World";
        this.state = {
          message: "Hello World"
        }
      }

      render() {
        return (
          <div>
            <h2>{this.state.message}</h2>
            <button onClick={this.btnClick.bind(this)}>改变文本</button>
          </div>
        )
      }

      btnClick() {
        // this.message = "Hello React";
        // this.state.message = "Hello React";
        // console.log(this.state);
        this.setState({
          message: "Hello React"
        })
      }
    }

    // 渲染组件
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

</body>

</html>
  • 相关阅读:
    python--异常处理
    Codeforces 1499D
    Codeforces 1263E
    Codeforces 1493D
    Codeforces 1492D
    Codeforces 1490G
    Codeforces 1487E
    Codeforces 1485D
    Codeforces 1485C
    P6917 [ICPC2016 WF]Balanced Diet
  • 原文地址：https://www.cnblogs.com/jianjie/p/14259548.html
Copyright © 2020-2023  润新知