React核心概念，搭配webpack基本使用。

React中几个核心的概念

虚拟DOM（Virtual Document Object Model）

• ：浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM 对象的API；

• 什么是React中的虚拟DOM：是框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套；

• 为什么要实现虚拟DOM（虚拟DOM的目的）：为了实现页面中， DOM 元素的高效更新

• DOM和虚拟DOM的区别：

• DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API；

• 虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；

  • 本质： 用JS对象，来模拟DOM元素和嵌套关系；
  • 目的：就是为了实现页面元素的高效更新；

Diff算法

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

创建基本的webpack4.x项目

1. 运行npm init -y 快速初始化项目
2. 在项目根目录创建src源代码目录和dist产品目录
3. 在 src 目录下创建 index.html
4. 使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D
   • 如何安装 cnpm: 全局运行 npm i cnpm -g
5. 注意：webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；
   • 默认约定了：
   • 打包的入口是src -> index.js
   • 打包的输出文件是dist -> main.js
   • 4.x 中 新增了 mode 选项(为必选项)，可选的值为：development 和 production;

在项目中使用 react

1. 运行 cnpm i react react-dom -S 安装包

• react： 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
• react-dom： 专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

2. 在index.html页面中，创建容器：

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

3. 导入 包：

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

4. 创建虚拟DOM元素：

//  第一个参数： 字符串类型的参数，表示要创建的标签的名称
//  第二个参数：对象类型的参数， 表示 创建的元素的属性节点
//  第三个参数： 子节点
const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')

5. 渲染：

// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById('app'))

JSX语法

1. 如何启用 jsx 语法？

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

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

• 添加babel-loader配置项：

module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

2. jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；
3. 在jsx中混合写入js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中
4. 在 jsx 中 写注释：推荐使用{ /* 这是注释 */ }
5. 为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性
6. 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
7. 在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！

当 编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；

React中创建组件

1. 第1种 - 创建组件的方式

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

// 使用组件并 为组件传递 props 数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

// 在构造函数中，使用 props 形参，接收外界 传递过来的数据
function Hello(props) {
  // props.name = 'zs'
  console.log(props)
  // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；

  return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
}

• 使用{…obj}属性扩散传递数据

2. 在导入组件的时候，如何省略组件的.jsx后缀名

// 打开 webpack.config.js ，并在导出的配置对象中，新增 如下节点：
resolve: {
    extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
    alias: {
        '@': path.join(__dirname, './src') // 表示项目跟路径src这一目录
    }
  }

3. class关键字创建组件

class 组件名称 extends React.Component {
    render(){
        return <div>这是 class 创建的组件</div>
    }
}

4.父组件向子组件传值

// 1.在父组件内的子组件上定义需要传递内容
<TodoItem 
    content={this.state.con} 
/>
// 2.在子组件通过this.props.content 来使用

5.生命周期

componentWillMount 组件即将被挂载到页面上执行
componentDidMount 组件被挂载到页面上

// props 和 state更改
shoundComponentUpdate 组件被更新之前执行（return false 会阻止更新）
componentWillUpdate 组件被更新之前（shoundComponentUpdate 返回true 会执行）
componentDidUpdate 组件更新完成之后

//  一个组件从父组件接受参数
// 只要父组件的render函数被重新执行，子组件这个生命周期会被执行(这个组件第一次存在父组件中，不会执行。如果这个组件之前已经存在父组件中，才会执行)
componentWillReceiveProps

componentWillUnmount 当这个组件即将被从页面上剔除