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