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

最新推荐文章于 2024-10-18 17:01:15 发布

原创最新推荐文章于 2024-10-18 17:01:15 发布 · 309 阅读

1 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍React中的虚拟DOM概念及其目的，探讨Diff算法的工作原理，并演示如何使用React和webpack创建项目及编写JSX语法。

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项目

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

在项目中使用 react

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

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

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

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

导入包：

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

创建虚拟DOM元素：

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

渲染：

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

JSX语法

如何启用 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/ }
    ]
}

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

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

React中创建组件

第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}属性扩散传递数据

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

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

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 当这个组件即将被从页面上剔除