React 基础配置

React 与 vue 的对比

组件化方面

1. 什么是模块化：是从代码的角度来进行分析的，把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发；
2. 什么是组件化：是从UI界面的角度来进行分析的；把一些可复用的 UI 元素，抽离为单独的组件；便于项目的维护和开发；
3. 组件化的好处：随着项目规模的增大，手里的组件越来越多；很方便就能把现有的组件，拼接为一个完整的页面；
4. Vue 是如何实现组件化的：通过.vue，文件，来创建对应的组件；
   • template：结构
   • script：行为
   • style：样式
5. React 如何实现组件化：React 中有组件化的概念，但是，并没有像 vue 这样的组件模板文件；React 中，一切都是以 js 来表现的；因此要学习 React，js 要合格；ES6 和 ES7（async 和 await）要会用；

移动 APP 开发体验方面

1. Vue，结合 Weex 这门技术，提供了迁移移动端开发的体验（Weex，目前只是一个小的玩具，并没有很成功的大案例）
2. React，结合 ReactNative，也提供了无缝迁移到移动端 APP 的开发体验（RN 用的最多，也是最火最流行的）

React 中几个核心的概念

虚拟 DOM（Virtual Document Object Model）

1. DOM 的本质是什么：浏览器中的概念，用 JS 对象来表示页面上元素，并提供了操作 DOM 对象的 API；
2. 什么是 React 中的虚拟 DOM：是框架中的概念，程序员用 JS 对象来模拟页面上的 DOM 和 DOM 嵌套；
3. 为什么要实现虚拟 DOM（虚拟 DOM 的目的）：为了实现页面中，DOM 元素的高效更新；

【注意】：浏览器中，并没有直接提供获取 DOM 树的 API；因此，我们无法拿到浏览器内存中的 DOM 树，所以提出了虚拟 DOM 树，用 js 对象模拟
【总结】：用 JS 对象，来模拟页面上 DOM 嵌套关系（虚拟 DOM 是以 JS 对象的形式存在的）；

一个网页呈现的过程

1. 浏览器请求服务器获取页面 HTML 代码；
2. 浏览器要在内存中，解析 DOM 结构，并在浏览器内存中，渲染出一颗 DOM 树；
3. 浏览器把 DOM 树，呈现到页面上；

Diff 算法

1. tree diff：新旧两颗 DOM 树，逐层对比的过程，就是 tree diff；当整颗 DOM 逐层对比完毕，则所有需要被按需更新的元素，必然能够找到；
2. component diff：在进行 tree diff 的时候，每一层，组件级别的对比，叫做 component diff；
   1. 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；
   2. 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上；
3. element diff：在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做 element diff；

在项目中使用 react

1. 运行npm i react react-dom -S安装包
   1. react：专门用于创建组件和虚拟 DOM 的，同时组件的生命周期都在这个包中；
   2. react-dom：专门进行 DOM 操作的，最主要的应用场景，就是reactDOm。render()
2. 在index.html页面中，创建容器

<!-- 容器，将来使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中-->
<div id="app"></div>

3. 导入包

import React from 'reac'
import ReactDOM from 'react-dom'

4. 创建虚拟 DOM 元素

// 创建虚拟DOM
// 参数1：创建的元素的类型，字符串，表示元素的名称
// 参数2：是一个对象或null，表示当前这个DOM元素的属性
// 参数3： 子节点（包括其他虚拟DOM获取 文本子节点）
// 参数n： 其他子节点
// <h1 id="myh1" title="this is a h1">这是一个h1</h1>
const myh1 = React.createElement(
  'h1',
  { id: 'myh1', title: 'this is a h1' },
  '这是一个h1'
)

5. 渲染

// 使用ReactDOM把虚拟DOM渲染到页面上
// 参数1：要渲染的那个虚拟DOM元素
// 参数2： 指定页面上一个容器，（dom元素）
ReactDOM.render(myh1, document.getElementById('app'))

JSX 语法

什么是 JSX 语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比 HTML 严谨很多）

如何启用 JSX 语法

1. 安装 babel 插件
   • 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D
   • 运行npm i babel-preset-env babel-preset-stage-0 -D
2. 安装能够识别转换 JSX 语法的包babel-preset-react
   • 运行npm i babel-preset-react -D
3. 添加.babelrc配置文件

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

4. 添加babel-loader配置

module: {
  // 所有第三方 模块的配置规则
  rules: [
    {
      test: /\.js|jsx$/,
      use: 'babel-loader',
      exclude: /node_modules/,
    },
  ]
}