React系列(一) -邂逅React开发 - 网站源码_资源分享

译者：coderwhy

我对个人始终讨厌采用遇见这个词，我期望每一人在和一个新控制技术碰触的这时候，都是这场迷人的遇见。

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

现在后端应用领域最盛行的是五大架构：

VueReactAngular

四个架构

而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来实现，对它们分别进行对比学习

原生植物实现标识符如下：

<body> <div class=”app”> <h2 class=”title”>Hello World</h2> <button class=”change-btn”>改变文本</button> </div> <script> // 1 let message = “Hello World”; // 3.将数据表明到titleEl中 titleEl.innerHTML = message; // 4.改变按钮文本 const btnEl = document.getElementsByClassName(“change-btn”)[0]; btnEl.addEventListener(click, (e) => { message = “Hello React”; titleEl.innerHTML = message; }) </script> </body>

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引入react依赖：https://unpkg.com/react@16/umd/react.development.jsreact-dom依赖：https://unpkg.com/react-dom@16/umd/react-dom.development.jsbabel依赖：https://unpkg.com/babel-standalone@6/babel.min.js方式二：下载后，添加本地依赖方式三：通过npm管理（后续脚手架再采用）

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

这儿有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息

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对象来渲染文本 Reactl = 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.Component2.实现当前组件的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>

他们一起上看呵呵标识符是如何实现的：

class App extends React.Component { constructor() { super(); this.state = { message: “Hello World” }; } render() { return ( <div> <h2>{this.state.message}</h2> <button onClick={this.changeText.bind(this)}>改变文本</button> </div> ) } changeText() { this.setState({ message: “Hello React” }) } } ReactDOM.render(<App/>, document.getElementById(“app”));