React修行日志（二）

React中的几个核心概念

1. DOM与虚拟DOM
   1. DOM的本质是浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API；
   2. React中的虚拟DOM用JS对象来模拟页面上的DOM和DOM元素；
   3. 虚拟DOM的目的是为了实现页面中DOM元素的高效更新；
2. Diff算法
   1. tree diff：新旧两颗DOM树逐层对比的过程，目的是找到需要更新的元素；
   2. component diff：在进行tree diff时，对每一层中的组件进行对比的过程，目的是找到需要更新的组件；
   3. element diff：进行component diff时，如果两个组件类型相同则需进行元素级别对比，找到组件中需要进行更新的元素

webpack项目中引入React

3. 引入react相关js：npm i react react-dom -S
   • react:专门用于创建组件和虚拟DOM，同时组件的生命周期也在这个包中；
   • react-dom：专门进行DOM操作，主要应用场景就是ReactDom.render()；
4. 在html页面中创建容器元素；
5. 相应js文件中引入react相关包

import React from 'react'
import ReactDom from 'react-dom'

6. 创建虚拟DOM；
7. 利用react-dom将虚拟DOM渲染到容器中；

JSX启用及基本语法

概念

在js中混合写入类似于 HTML 的语法，符合XML规则的JS；通过babel在运行时转换为React虚拟DOM；

启用JSX

8. 安装babel插件

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
npm i babel-preset-react -D

9. 修改webpack.config.js配置文件：
   
10. 在根路径下新增 .babelrc 配置文件：语法与插件需与之前安装的相对应

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

JSX 基本语法

1. 语法本质 并不是直接把jsx渲染到页面上，而是内部先转换成createElement形式后再渲染；
2. 在jsx中混合写入js表达式 再jsx语法中，要不js代码写到花括号 {} 中
   1. 渲染数字
   2. 渲染字符串
   3. 渲染布尔值
   4. 为属性绑定值
   5. 渲染jsx元素
   6. 渲染jsx元素数组
   7. 将普通字符数组转换为jsx数组并渲染到页面上
3. 在jsx中写注释 需要在 {} 中写注释，单行注释使用 { /**/ }，多换行注释使用 //
4. for循环中的key React中，需要把key添加给被forEach或map或for直接控制的元素；
5. 给jsx中的元素添加class、for属性 此时需要用className代替class、HTMLFor代替for

启用css样式加载器

1. 安装加载器：npm i style-loader css-loader -D
2. 修改webpack.config.js配置文件：在第三方模块的配置规则中添加规则

在module.exports下的module->rules添加下面规则

{test:/\.css$/,use: ['style-loader', 'css-loader']},//打包处理css样式表，use数组中按倒序加载

此时样式表中的样式是全局性的（会对整个项目生效），此时可可在css-loader后面添加参数来启用普通css样式表的模块化功能

{test:/\.css$/,use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]']}

说明：
1、modules：css模块化只针对 类选择器和ID选择器生效，标签选择器则无效；
2、localIdentName：配置css模块ID生成规则
[path]：表示样式表 相对于项目根目录 所在路径
[name]：表示样式表文件名称
[local]：表示样式的类名定义名称
[hash:length]：表示32位的hash值
3. 使用样式表

import style from '@/css/cmtlist.css'

<h1 className={style.title}>下面是评论列表</h1>