react从0到1记录01

作者: An的杂货铺 | 来源:发表于2020-05-09 10:03 被阅读0次

1、react简介

react 起源于facebook用来架设自己的insgram网站，后在2013年开源出来。因其独特的设计思想，属于前端框架的革命性创新，性能出众，代码逻辑简单。受到越来越多的关注，目前web开发的主流工具之一。
angular 于2009年起源于谷歌，一款mvc框架，起初并不支持组件化开发。

需要清楚的两个概念，库和框架

library(库):提供了可以直接调用的实现某些功能的特定的api，特点，小而巧。可以比较方便的从一个库切换到另一个库，代码几乎不变。
Framework（框架）：提供了一整套的解决方案，特点大而全。一个项目想从一个框架切换到另外一个框架，就需要重构，较困难。

2、目前的三大主流框架

Angular.js：出现较早，学习曲线陡峭，angular1比较麻烦，angular2-angular5进行了框架的改革，增加了组件化开发的概念，开始支持typescript编程。

Vue.js：当下最火的前端框架，由国内团队开发，文档相对来说更友好一些。

React.js:前端最流行的一款框架，设计优秀，性能强悍。

3、React与Vue的一些对比

组件化方面

说到组件化要明白组件化和模块化的含义和差别，以及理解组件化开发的优点。

模块化：更多的是从代码的角度来分析的，将一些实现某些特定功能的代码进行封装，抽离为单个模块，在需要的地方直接调用。便于项目的维护和开发。

组件化：是从ui的角度来分析的，将一些可以复用的元素、模板抽离为单独的组件，同样也便于项目的维护和开发。

进行组件化开发，便于随着项目的规模的增大，可以将已有的组件多次复用，方便快速的将组件拼接为一个完整的页面。

vue是如何来实现组件化的？
vue中带.vue后缀的文件就可以视为一个组件，它包含三部分：template(结构)、script(行为)、css（样式），通常在vue中通过创建.vue后缀的文件来创建一个组件。

React是如何实现组件化的？
尽管react中有组件化的概念，但并没有像vue中这样的组件模板文件。react一切都是以js来实现的，因此react的学习，必要的前提是有扎实的js基础，知道es6、es7的相关内容。

开发团队方面

React由facebook的前端官方团队进行维护和更新，其技术实力更雄厚。
Vue由以尤雨溪为主的团队进行开发和维护。

社区方面

React开源较早，社区比较强大，一些开发中出现的问题，最优的解决方案，文档，博客一类可以很方便的找到，可以给与开发者很大的帮助。
Vue出现稍晚，社区相对于react来说小一些。

移动app开发体验方面

vue结合weex，提供了移动端app开发的体验，目前项目的案列多是阿里旗下的一下app在使用。

react 结合reactnative 提供了无缝迁移到移动端app的开发体验，是目前较成熟的应用较广的技术。

4、学习react原因

同angular相比，react设计巧妙，一切基于js并且实现了组件化开发。
开发团队强大稳定，不必担心断更的问题。
社区强大，很多问题在社区能找到对应的解决方案
提供了无缝转到reactnative上的开发体验，
很多中大型企业的前端技术选型采用的是react。

5、react中的几个核心的概念

虚拟Dom

Dom的本质

浏览器中的概念，以js对象来表示页面的元素，提供了操作Dom对象的API。

什么是react中的虚拟Dom

以js对象来模拟页面上的dom元素以及dom元素的嵌套关系。

虚拟Dom的目的

实现页面中，Dom元素的高效更新。

Dom和虚拟Dom的区别

Dom：浏览器中的提供的概念，用js对象表示页面上的元素，并提供了操作元素的API
虚拟Dom：框架当中的概念，以js模拟Dom元素和嵌套关系
目的：实现页面的高效更新。

diff算法

tree diff 、component diff、element diff
tree diff ：新旧两棵Dom树逐层对比的过程就是tree diff ,当整个Dom树逐层对比完毕，那么需要更新的元素，自然而然能够被找到。

component diff ：进行tree diff 时，每一层级中组件的对比称为component diff。
如果对比前后，组件类型相同，则暂时认为组件不需要更新。
如果对比前后，组件类型不同，则需要创建新组件同时移除旧组件，并将新组件追加到页面。

element diff ：在进行component diff 时如果组件的类型相同，那么就再进行组件中元素的对比，这叫做element diff.

diff算法概念图

虚拟Dom存在的必要性：

虚拟Dom存在的必要性

以js来模拟一个Dom对象

js模拟Dom对象

6、创建一个基本的webpack4.x的项目为后续创建react项目最基础

a.创建一个空文件夹作为项目的目录（最好是不包含大写英文字母，否则后面在使用webpack-dev-server来运行时会有一堆警告出现在控制台）
b.命令行运行该文件夹，执行npm init -y 来初始化项目
c.在项目根目录下创建src源代码目录和dist产品目录
d.在src目录中创建index.html首页模板，以及主入口文件index.js
f.安装webpack 执行 npm/cnpm install webpack webpack-cli -D
g.webpack4.x版本提供了约定大于配置的概念，目的是为了尽量减少配置文件的体积。其中默认约定了以下内容：
打包的入口文件：src目录下的index.js
打包的输出文件：dist目录下的main.js
4.x版本新增了必选项mode，值为development或production.

一个基本的webpack4.x版本项目架构

此外，webpack4.x中常用的插件 webpack-dev-server和html-webpack-plugin
安装完之后需要进行相关配置，这样可以让项目更高效的运行，可以热更新。
安装webpack-dev-server:npm/cnpm install webpack-dev-server -D

然后在配置文件中做如下配置

package.json文件中配置webpack-dev-server
配置完毕后，就可以通过npm run dev来运行
--open(自动打开浏览器) --port 设置端口号 --hot 热更新 --host 设置主机名
安装html-webpack-plugin设置模板文件

npm/cnpm install html-webpack-plugin -D
这样一个基本的webpack4.x的项目便构建起来。
在webpack.config.js配置过后来使用如下图

html-webpack-plugin的配置

7、在项目中开始使用react

a.安装react 和react-dom;npm/cnpm install react react-dom -S
react 是用来创建虚拟dom结构的，创建组件，组件的生命周期都在这个包里面。
react-dom是用来进行操作dom的，主要的应用场景，是ReactDom.render()
b.在index.html页面来创建容器，将来创建的虚拟dom结构都会被渲染到这个指定的容器。
c.在主入口文件index.js中引入安装的react的资源包
import React from 'react'
import ReactDom from 'react-dom
d.在主入口文件创建虚拟dom元素
React.createElement(n1,n2,n3)
n1:字符串类型参数，代表需要创建的dom元素标签名
n2:对象类型的参数代表创建元素的属性节点
n3:子节点包含文本节点
const myDom = React.createElement('h1'，{id:'Box'}，'我是一个h1标签')
e.渲染虚拟dom元素
ReactDom.render(myDom,document.getElementById('app'));
包含两个参数：需要渲染的dom元素，以及制定的dom容器（一个dom对象）。

8、Jsx语法

jsx语法就是符合xml规范的js语法，语法格式相对html来说要严格的多。
使用jsx语法可以在js中用写html标记语言的方式来创建虚拟dom元素，但是使用之前需要安装和配置对应的babel插件。
jsx语法的本质，依然是在运行的时候，通过babel转换成了React.createElement的形式

启用jsx语法的准备工作

a:安装babel插件

npm/cnpm install babel-core babel-loader@7 babel-plugin-transform-runtime -D
cnpm/npm install babel-preset-env babel-preset-stage-0 -D
安装能够识别和转化jsx语法的包 babel-preset-react
cnpm/npm install babel-preset-react -D

b:在根目录添加 .babelrc配置文件

{
"presets":["env"，"stage-0"，"react"]，
"plugins":["transform-runtime"]
}

c:在webpack.config.js中添加babel-loader的配置项

module:{
   rules:[
      {test:/\.js|jsx$/，use:'babel-loader'，exclude:./node_modules/}
]
}

有时候会出现安装的babel-core和babel-loader版本不兼容问题 babel-loader8.x的版本和babel-core6.x的版本会出现兼容问题，此时要么升级babel-core 要么降级babel-loader。

jsx语法的本质

并不是直接将jsx渲染到页面上，而是内部先转换成了createElement的形式然后又渲染的。

在jsx中混合写入js的表达式

jsx语法中要把代码写进{}中。
比如，jsx中进行的下面的操作
渲染数字
渲染字符串
渲染布尔值
为属性绑定值
渲染jsx元素
渲染jsx元素数组
将普通的字符串数组转化为jsx数组并且渲染到页面上使用forEach或者map
在jsx中写注释的方式 {/* 注释 */}

为jsx中的元素添加class类名

要是用className来代替class；
用htmlFor替换label的for属性

其他

使用jsx语法创建Dom的时候，所有的Dom节点，必须有唯一一个根元素来进行包裹。
另外，由于jsx是遵循xml的规范，因此更加严格，标签必须成对出现。
当编译引擎在编译jsx代码的时候，如果遇到了<，那么会把它当做html代码来进行编译，遇到了{}就会把花括号内部的代码当做普通的js代码去编译。
图示

jsx语法使用基本介绍

9、在react中如何创建组件

创建组件的第一种方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收，并必须向外return一个合法的jsx语法创建的虚拟Dom。

构造函数创建组件

function Hello(){
      return <div>我是一个构造函数创造的组件</div>
}

为组件传递数据

function Hello(props){
    //console.log(props)
    props.age = '100';
    //  无论是在vue还是在react， props永远都是只读的，无法被重新赋值。
    //console.log(props);
    //return null
    //如果一个组件中返回null，则表示此组件是空的，不会渲染,否则一定要返回一个合法的jsx语法的虚拟dom
return <div>我是一个构造函数创造的组件-----{props.age}-------{props.name}</div>
}

其他几个重要的点

父组件与子组件之间数据的传递
解构{...obj}的使用
可以将组件封装到单独的文件中
组件的名称必须是大写的
将组件抽离为单独的jsx文件时，在jsx文件中不要忘记引入React
通过配置webpack.config.js可以在引入组件的时候，省略掉.jsx的后缀名。
如下图

通过配置webpack来省略.jsx的后缀名
通过配置webpack.config.js 可以使用别名来代替根目录
如图

配置别名@来代表根目录src