前端知识总结

最新推荐文章于 2024-09-09 12:57:45 发布

置顶 KEN卓越

最新推荐文章于 2024-09-09 12:57:45 发布

阅读量1k

点赞数 3

分类专栏：总结 vue 微信小程序文章标签： js基础原理及方法 vue生命周期、vue双向绑定原理、vue虚拟DOM 微信小程序 ES6 项目遇到的bug

本文链接：https://blog.csdn.net/I_am_ken/article/details/95985381

版权

总结同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

微信小程序

2 篇文章 0 订阅

订阅专栏

一、vue的基础知识

1、vue实现双向绑定原理

1、Object.defineProperty()中的set/get设置属性值/获取属性值

  Object.defineProperty(person,'name',{
  		value: ' jack',  //属性值
  		get: function(){
  			return value;
  		},//获取value值
  		set: function(newValue){
  			value = newValue;
  		},//设置值
  		configurable: false, // 配置是否可以改变
  		enumerable: false, // 是否可以出现在对象的枚举属性，即遍历中
  		writable: false, // 是否可写
  })

2、过程

  - a、Observer劫持并监听所有属性
  - b、发生变化，通知Dep观察者（update函数）
  - c、Watcher负责向观察者列表添加对应更新函数
  - d、Compile编译解析
  - e、初始化/更新view

2、vue生命周期

beforeCreate
- data和methods中的数据和方法还没初始化
created
- data和methods初始化完成
beforeMount
- 模板已经在内存编译好了，尚未挂载到页面
mounted
- 页面挂载完成，可以操作DOM
beforeUpdate
- 页面数据是旧的，data数据是新的，页面和最新数据还没同步
updated
- 页面和data已经保持最新
beforeDestory
- 进入销毁阶段，data、methodes…还可用
destroyed
- 组件已经完全销毁，data、methods以及过滤器，指令不可用

3、vue组件通信

父子通信
- 父组件绑定属性“：data-attr”数据
- 子组件在props接收驼峰式dataAttr数据
子与父通信
- 子组件$emit(‘to-parent’,newMsg)绑定属性传输数据
- 父组件绑定@to-parent="getChildren(e)"属性接收数据
兄弟通信
- 在main.js建立一个Vue.prototype.bus事件总线（中间层）
- 在borther1，this.bus.$emit(‘属性toborther2’，值)
- 在borther2接收，this.bus.$on(‘toborther2’,function(val){ that.msg = val })

vue父子组件的生命周期执行顺序

在这里插入图片描述

4、vue的虚拟DOM

虚拟DOM出现是为了减少频繁大面积的重绘引发的性能问题
虚拟dom和真实dom的区别：
- 1、虚拟dom不会排版与重绘。
- 2、真实dom频繁排版与重绘效率相当低。
- 3、虚拟dom进行频繁修改，然后一次性比较并修改真实dom中需要改的部分，最后并在真实dom中进行排版与重绘，减少过多dom节点排版与重绘损耗。
- 4、虚拟dom有效降低大面积的重绘与排版，因为最终与真实dom比较差异，可以只渲染局部。
虚拟DOM Diff
- 指的是通过Diff算法去比较虚拟DOM的变化
vue怎么更新节点
- 1、先根据真实DOM生成virtual DOM
- 2、当virtual DOM某个节点的数据改变后会生成一个新的Vnode
- 3、Vnode和oldVnode作对比，发现有不一样的就直接修改在真实的DOM，然后使oldVnode的值为Vnode
更新的生命周期: 虚拟dom的diff 在beforeUpdate 渲染在真实dom的：updated

5、路由

全局路由拦截(路由守卫)
- router.beforeEach(( to, from, next )=>{}) //跳转前
  - to: 即将进入的目标（路由对象）
  - from:当前导航正要离开的路由
  - next()进行下一个钩子，next(false)中断当前导航，如果此时URL改变，则会重置为from后的路由地址， next(’/’) next(path: ‘/’)终止当前导航，跳转到一个不同的地址，next(error)如果参数为一个error实例，则会终止导航
- beforeResolve(( to, from, next )=>{}) //跳转成功
- afterEach(( to, from, next )=>{}) //跳转后
局部路由拦截
- 路由内部钩子： beforeEnter(( to, from, next )=>{})
- 组件内部钩子
  - beforeRouteEnter(( to, from, next )=>{}) //从另外的组件进入该组件前触发该钩子
  - beforeRouteUpdate(( to, from, next )=>{}) //同一个组件，参数不一样，不一样数据
  - beforeRouteLeave(( to, from, next )=>{}) //该组件离开跳转到另外的组件时触发该钩子
路由传参
- this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots({ path: `/Re/$ {id}` })
- this.$router.push({ name: ‘Re’, params: { id: id } })
- this.$router.push({ path: ‘/Re’, query:{ id: id } })

6、vue的状态管理器vuex

state定义共享变量
mutations 同步修改共享变量（更改state,提交mutation），相当于事件更改，使用的时候store.commit（‘’）;
actions可以提交mutation的方法数据，也可以使用异步操作，使用store.dipatch()
getter 获取数据（可以相当于一个过滤器）

7、如何解决单页面的SEO问题

-1、服务端渲染

SSR
- 定义
  - 服务端渲染，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼接，组合成完整的html页面，再直接返回给浏览器
- 优势
  - 1、更好的SEO，由于搜索引擎爬虫抓取工具可以查看渲染页面
  - 2、更快内容到达时间，特别对于缓慢的网络情况或缓慢的设备
- 劣势
  - 1、构建设置和部署的更多要求
  - 2、更多服务器端负载
2、客户端渲染
- Nuxt.js

8、如何解决跨域问题

1、本地跨域：config/index.js文件配置代理，找到proxyTable字段

roxyTable: {
      '/api': { // 请求的代称，写在Axios里的BaseUrl
        target: 'http://localhost:8083',  // 真实接口请求URl地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {  // 替换，通配/api的替换成/
          '^/api': '/'
        }
      }

2、线上跨域：找一台跟后台接口同源的服务器用 nginx 来做接口转发

location /api {
	# 配置一
	proxy_pass http://abc.hahah.com/;
	# 配置二
	proxy_pass http://abc.hahah.com;
	# 配置三
	proxy_pass http://100.200.30.20;
}

二、微信小程序的基础

1、目录

app.js
- 系统的方法处理文件，主要处理程序声明周期的一些方法
app.json
- 路由地址、全局配置，导航头颜色、名称
app.wxss
- 全局界面样式
project.config.json
- 控制小程序版本，appid
sitemap.json
- 用来配置小程序及其页面是否允许被微信索引
pages
- 小程序各个页面文件
components
- 组件
images
- 图片
template
- 模板

2、生命周期

页面生命周期
- onLoad
  - 监听页面加载
- onShow
  - 监听页面显示
- onReady
  - 监听页面初次渲染完成
- onHide
  - 监听页面隐藏
- onUnload
  - 监听页面卸载
app生命周期
- onLaunch
  - 监听小程序初始化，只触发一次
- onShow
  - 监听小程序显示
- onHide
  - 监听小程序隐藏
- onError
  - 错误监听函数

3、路由

wx.switchTab
- 跳转到tabBar页面，并关闭其他所有非tabBar页面
wx.reLaunch
- 关闭所有页面，打开应用内某个页面
wx.redirectTo
- 关闭当前页面，跳转到应用内某个页面，不允许跳tabbar页面
wx.navigateTo
- 保存当前页面，跳转到应用内某个页面，不能跳到tabbar页面，最多十层页面栈
wx.navigateBack
- 关闭当前页面，返回上一页或多级页面

4、页面传递数据的方法

url参数传递
- 1、wx.navigateTo({ url: ‘…/list/list?username=’ + this.data.username })
- 2、wx.redirectTo
- 3、wx.reLaunch
本地缓存
- wx.setStorageSync(‘username’,this.data.username)
全局变量
- appjs里面app.globalData对象中新建属性

5、基本原理

双线程通信方式
- view视图层：渲染页面结构
  - 1、初始化状态
  - 2、首次渲染状态
  - 3、持续渲染状态
  - End
- 通过JSBridage通信
- AppService逻辑层：用来逻辑处理、数据请求、接口调用
  - 1、初始化状态：onLoad(只执行一次)、onShow（每次切换都会执行）
  - 2、等待激活状态：接收到“界面线程初始化完成”信号，讲初始化数据发送到“界面线程”，等待界面线程完成初始渲染
  - 3、激活状态：首次渲染完成，调用onReady函数
  - 4、后台状态：也能接收数据，局部渲染
  - End
虚拟DOM
- 1、js对象模拟DOM
- 2、比较两个DOM树
- 3、比较两个DOM树的差异
- 4、把差异应用到真正的DOM树上

6、数据请求封装

在utils封装wx.request请求
- 组件中引入应用

7、提高应用速度方法

提高页面加载速度
用户行为预测
减少默认data的大小
组件化方案

8、双向绑定

this.setData({})
bindinput绑定事件方法，监听变化

三、js的基础

1、原型、原型链

函数对象
- 所有函数prototype（显式原型）
- 函数、数组、对象都拥有__proto__（隐式原型）
- 原型对象，拥有prototype属性的对象，在定义函数时就被创建
- 新建一个实例new function指向的也是原型对象
构造函数
- 构造函数会拥有本身方法，也会拥有显式原型的方法，即实例继承构造函数的方法
原型链（查找属性，在__proto__中查找，通过__proto__形成原型链）
- prototype
- proto
- constructor

2、继承

含义
- 发生在对象与对象之间
方法
- 原型
  - 构造函数（子构造函数prototype继承父构造函数的原型方法）
- apply,call借调构造函数
  - 例：
function Fn(name,age){
this.name = name; this.age = 20;
}
function Son(name,age,sex){
Fn.call(this,name,age) ;
this.sex = sex
}
function Son2(name,age,sex){
Fn.apply(this,arguments) ; this.sex = sex
}
var s1 = new Son(“李四”,20,“男”)；
console.log(s1); // son:{ name:“李四”,age: 20,sex:“男” }
var s1 = new Son2(“张三”,29,“女”)；
console.log(s2); //son:{ name: “张三”，age:29,sex:“女”}

3、闭包

含义
- 就是能读取其他函数内部变量的函数
作用
- 好处
  - 1、保护函数内的变量安全，防止命名冲突
  - 2、内存维持一个变量，可以做缓存
  - 3、匿名自执行函数可以减少内耗
- 坏处
  - 1、增大内耗，造成内存泄漏
  - 2、闭包跨域访问，导致性能损失

4、跨域

含义
- 协议、域名、端口有一个不同就是跨域
解决跨域
- 1、CORS跨源通信：浏览器和服务器同时支持，浏览器IE不能低于IE10，前端正常ajax请求，需要服务器实现CORS接口，就可以实现跨域通信
- 2、JSONP：a、只能get请求，不能post b、dataType:“jsonp”, jsonp: “jsoncallback” c、先在客户端注册一个callback,然后把callback名字传给服务器，服务器生成json数据，然后以js语法方式生成function,function名字就是传递上来的参数jsonp.最后将json数据直接入参的方式，放置到function,生成一段js语法文档，返回给客户端
- 3、window.name：不同页面/不同域名仍然存在
- 4、document.domain将两个不同页面设置成相同练=的域名，设置成更高的父域
- 5、location.hash子框架具有修改父框架src的hash值
- 6、window.postMessage：HTML5的api允许两个窗口跨域发送信息，解决dom跨域通用方法

5、构造函数

任意一个普通函数用于创建一类对象时，称为构造函数或构造器

6、作用域链

作用域：变量和函数可访问范围，或者说变量或函数起作用的区域
作用域链：是一个对象列表，用来检索各个变量对象中的变量和函数，这样可以保证执行环境有权访问那些变量和函数

7、call、 apply、bind的区别

相同：改变this指向，作用一样
不同：接收的参数不一样，call(this,a,b,c),apply(this,arguments)立即执行，bind是返回对应函数，稍后执行，需要手动执行

8、JS怎么实现多线程

worker方法（H5）：

1、主线程

var worker = new Worker('worker.js');
//postMessage(msg);
  //postMessage方法把在新线程执行的结果发送到浏览器的js引擎线程里
  worker.onmessage = function(){
      //获取在新线程中执行的js文件发送的数据 用event.data接收数据
      console.log( event.data ) //接收数据
  };
  setTimeout( function(){
      worker.terminate();
      //terminate方法用于关闭worker线程
 },2000)
     
 setTimeout( function(){
     worker = new Worker("js/test22.js");
     //再次开启worker线程
 },3000)

2、worker.js线程逻辑

var i = 0;
function mainFunc(){
    i++;
    //把i发送到浏览器的js引擎线程里
    postMessage(i);//这个是worker传输数据的方法
}
var id = setInterval(mainFunc,1000);

postMessage('传输多个数据~');

9、null和undefined的区别

null是空值，类型为object
undefined表示“缺少值”，未定义

10、事件冒泡、事件捕获和事件委托

事件冒泡
- 含义
  - 自下而上（自内而外）的触发事件
- 如何防止事件冒泡
  - jq的e.stopPropagation
事件捕获
- 含义
  - 自上而下（自外而内）的触发事件
事件委托
- 含义
  - 只指定一个事件处理程序，将原本子元素上的处理程序委托给父元素执行
- 为什么
  - 新增子元素，不需添加事件，因为已经绑定父元素
- 怎么做
  - $(‘parent’).on(‘click’,‘li’,function(e){ })

11、原生方法

数组操作方法
- pop和push
  - pop从尾部删除1个元素
  - push增加若干元素
- shift和unshift
  - shift头部删除1个元素
  - unshift头部增加若干元素
- splice
  - 含义
    - 向数组中添加/删除项目，并返回被删除的项目
  - 参数
    - index:添加或删除项目的位置
    - howmany:要删除的项目的数量
    - item:向数组添加的新项目
- reverse
  - 将数组中元素顺序反转
- sort
  - 将数组元素进行排序
访问方法
- concat
  - 用于连接两个或多个数组，返回新数组
- join
  - 用于把数组中的所有元素放入一个字符串，即指定分隔符进行分隔
- slice
  - 通过索引位置获取新的数组，不会修改数组，只会返回新的子数组
- toString
  - 将其转换为字符串
- indexOf和lastIndexOf
  - indexOf返回指定字符串首次出现的位置（从左往右）
  - lastIndexOf返回指定字符串首次出现的位置（从右往左
迭代方法
- forEach
  - 遍历
- map
  - 遍历
- filter
  - 过滤器，把数组的某些元素过滤掉，然后返回剩下的元素
- every和some
  - every从迭代开始，一旦有一个不符合条件的则停止
  - some一直在找符合条件的值，找到就停止
- reduce和reduceRight
  - reduce升序从左往右（累加器）
  - reduceRight降序从右往左（累加）

12、数据类型

Null
Number
String
Boolen
Undefined

13、js设计模式

模块模式
构造函数模式
混合模式
工厂模式
单例模式
发布-订阅模式

14、js的占位显示色块（有点预加载的意思）

15、js的遍历

for
- 耗时23-24ms,break,continue,return支持
for…in
- 耗时4858ms
for…of
- 耗时480-485ms
forEach
- 耗时209ms，break,continue,return不支持使用

16、浅拷贝与深拷贝

1、区别：

含义：浅拷贝，复制基本类型的属性，复制引用类型属性，不复制堆内存中的引用对象。深拷贝，复制基本类型的属性，复制引用类型的属性，复制内存中的引用对象。
结果：浅拷贝，复制引用类型的对象值，被复制后的对象改变，也会跟着随之改变。指向同一个内存对象。深拷贝，复制引用类型的对象值，被复制后的对象改变，不会改变原对象的值。复制后会新建一个内存来存储新的对象值，各自独立。

2、实现方法

浅拷贝：a、遍历赋值 b、Object.assign({},obj)
深拷贝：a、JSON.parse(JSON.stringfy(obj))
b、function deepClone(initalObj, finalObj) {
var obj = finalObj || {}
for(var i in initalObj) {
if(typeof initalObj[i] === ‘object’){
obj[i] = (initalObj[i].constructor === Array) ? [] : {}
arguments.callee(initalObj[i],obj[i])
}else {
obj[i] = initalObj[i]
}
}
return obj
}
var str = {}
var obj = { a: {a: ‘hello’, b: 21}}
deepClone(obj, str)
console.log(str.a)
在这里插入图片描述

四、ES6的基本语法

1、var、let和const赋值

var 声明变量，可有变量提升作用，函数级作用域
let 声明变量，块级作用域
const声明常量

2、解构

含义
- 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
解构赋值的类型
- 数组
  - [a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4
- 对象
  - {foo,bar} = {foo: ‘aaa’,bar: ‘bbb’} //foo=‘aaa’, bar = ‘bbb’
- 字符串
  - [a,b,c,d,e] = ‘hello’ //a=h,b=e,c=l,d=l,e=o
- 数值和布尔值
  - let {toString: s} = 123; //s === Number.prototype.toString;
- 函数参数
  - function add([x, y]){ return x + y; }; add([1,2]); //3

3、箭头函数

this指向外层
使用call\apply\bind，this指的是绑定的对象

4、Set去重

Set是新的数据结构，成员的值是唯一的
[…set]
Array.from(new Set(array)) Set结构数组化

5、新增数据类型Symbol

含义
- 表示独一无二的值
- Symbol值通过Symbol函数生成
用途
- 1、用作属性名

6、``模板字符串

7、怎么实现继承

Class继承

8、模块化

9、promise

含义
- 对象构造函数
  - resolve表示成功回调
  - reject表示失败回调
方法
- promise.all
  - 要多个异步请求一起成功才返回成功
- promise.race
  - 只返回第一个执行完成的异步操作结果

10、async/await

含义
- 在方法外层必须 async异步函数
- await必须执行完异步操作，才会执行下一步
用法
- 内置执行器
- 返回Promise

五、html与css的基础

1、块级元素和内联元素

块级元素
- div/h1/li/ul/p/th/td
内联元素
- a/b/input/span/i/img

2、如何实现水平垂直居中

1、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);
2、position: absolute; top bottom left right:0; margin:auto;
3、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height的一半 margin-left: -25px; //宽的一半

3、如何实现左右两个固定宽度div在两侧，中间div自适应？

1、float布局
2、position布局
3、table布局
4、flex布局

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Description" content="">
  <title>css应用（并排三个box排列）</title>
  <style>
		html,body,div,h3{
            margin: 0;
            padding: 0;
        }

        .clearfix:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
        }

        .wrap{
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
            background-color:pink;
        }

        .left-box,.right-box{
            width: 400px;
            height: 200px;
        }

        .left-box{
            background-color: blue;
        }

        .right-box{
            background-color: green;
        }

        .center-box{
            background-color: red;
        }

        /* float 布局 */
        .float .left-box{
            float: left;
        }

        .float .right-box{
            float: right;
        }

        .float .center-box{
            height: 200px;
            margin: 0 400px;
        }

        /* position 布局 */
        .position{
            position: relative;
        }

        .position .left-box{
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
        }

        .position .right-box{
            position: absolute;
            right: 0;
            top: 0;
            height: 200px;
        }

        .position .center-box{
            height: 200px;
            margin: 0 400px;
        }

        /* table方法 */
        .table{
            display: table;
        }
        .table .inner{
            display: table-cell;
        }

        /* flex方法 */
        .flex{
            display: box;
            display: -webkit-box;
            display: -moz-box;
        }
        .flex .center-box{
            box-flex: 1;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
        }

  </style>
 </head>
 <body>

    <!-- float方法 -->
    <div class="wrap float clearfix">
        <div class="left-box"></div>
        <div class="right-box"></div>
        <div class="center-box">float布局</div>
    </div>

    <!-- position方法 -->
    <div class="wrap position">
        <div class="left-box"></div>
        <div class="right-box"></div>
        <div class="center-box">position布局</div>
    </div>

    <!-- table方法 -->
    <div class="wrap table">
        <div class="left-box inner"></div>
        <div class="center-box inner">table布局</div>
        <div class="right-box inner"></div>
    </div>

    <!-- flex方法 -->
    <div class="wrap flex">
        <div class="left-box"></div>
        <div class="center-box">flex布局</div>
        <div class="right-box"></div>
    </div>

 </body>
</html>

4、display:none;和visibility:hidden;区别

display//不占位隐藏
visibility//占位隐藏

5、清除浮动

1、添加子元素伪元素选择器
2、overflow: hidden;第一个盒子设置margin-bottom,第二个盒子设置margin-top

6、css属性继承

文本相关属性：font-family / font-size / font-style / line-height / text-align / color
列表相关属性：list-style
表格相关属性：border-spacing
其他属性：cursor / visibility

7、static/relative/absolute/fixed的区别

1、static默认值，不设置属性，会按正常的文档流
2、relative相对定位，相对它本身的位置
3、absolute绝对定位，可能是相对父元素的relative/absolute定位，也有可能是相对body定位
4、fixed定位对象是根据浏览器窗口进行定位

8、link和@import区别

link是html标签，页面加载时，link会同时被加载，没兼容性，样式权重高
@import是css加载，会等页面加载后才加载，IE5以上才能识别，比link低

9、BFC

含义
- 块级格式化上下文，块级元素的布局渲染规范
创建BFC
- float不是none
- position值不是static/relative
- display值是inline-block,table-cell,flex,table-caption,inline-flex
- overflow值不是visible

10、IE6的bug

图片有边框bug
- 解决：给图片border:0;或者border:none;
双倍边距
- 解决：display:inline;
默认高度
- 解决：font-size:0;或者overflow:hidden;
按钮元素默认大小不一致
- 解决：a标签模拟

六、浏览器的兼容性

1、不同浏览器margin和padding不同

解决：清除标签默认样式 *{ margin: 0; padding: 0; }

2、IE6双边距问题

解决：display:inline;

3、标签高度设置小于10px,在IE6和IE7会超出自己设置的高度

解决：overflow:hidden;或line-height小于高

4、图片默认有间距

解决：float布局

5、IE9不能使用opacity

解决：opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);

6、边距重叠问题

解决：给子元素增加父元素，父元素设置overflow:hidden;

7、cursor: hand在safari上不支持

解决：统一使用cursor:pointer;

七、HTTP相关状态请求

1、常见状态码

200 成功，一切正常
302 重定向
304未修改
403服务器禁止访问
404找不到请求的资源
500服务器错误

2、http的原理

1、输入链接
2、查找DNS
3、TCP三次握手成功
4、建立连接
5、客户端发送请求到服务器
6、服务器返回相应信息：状态行、协议版本好、成功或错误代码
7、客户端接收服务器返回信息显示在用户显示屏，然后断开链接
8、客户端渲染

3、http方法

GET获取数据
POST传输数据
PUT传输文件
HEAD获取报文首部
DELET删除文件
OPTIONS查询相应URL支持的HTTP方法

八、项目遇到的问题

1、vue

1、兼容IE10：组件babel-polyfill
2、打包后线上资源图片路径地址不对：修改cofig/index.js配置文件公共路径

2、微信小程序

1、富文本html在小程序不兼容：用wxParse组件编译成功小程序view标签

3、html、css

1、键盘挡住输入框挡住：css控制滚动页面

九、 react的基础

1、react的单向数据流原理

1、原理：react的数据自上而下传递渲染（即从父组件传输到子组件）。
2、传递的方法就是通过props进行传递

2、react虚拟dom

1、虚拟DOM的含义：就是通过真实Dom用js生成一个虚拟dom，有tagName，props，children等属性。
2、为什么要使用虚拟dom？
– 答：因为js操作真实dom的消耗性能是非常的大的，比如渲染一个div，它就有227个属性，这样的加载对性能的消耗是非常大的，所以选择虚拟dom就是为了提高js性能的一个很好的方法。
3、怎么操作虚拟dom的呢？
– 答：a、先真实dom渲染
b、js再根据真实dom构建一个虚拟dom，主要有tagName，props，children等
c、修改虚拟dom
d、对比前后两个虚拟dom的差异，产生一个patch
e、再拿patch渲染到真实dom

3、react生命周期

含义：react的生命周期有三大部分组成：挂载，渲染更新，卸载

挂载过程

1、constructor()必须写super接收props、context两个参数
2、componentWillMount
服务端渲染，数据已经constructor初始化，还没渲染dom
3、componentDidMount
组件挂载，dom已经渲染，这里可以可以调用ajax请求
4、componentWillUnmount
组件卸载，数据销毁

更新过程

1、componentWillReceiveProps
接受父组件的props改变，需要重新渲染组件的用的比较多
2、shouldComponentUpdate
控制组件重新渲染的生命周期，主要用于性能优化
3、componentWillUpdate
返回true后，进入重新渲染的流程
4、componentDidUpdate
组件更新完毕，重新渲染完成会进入这个生命周期
5、render
根据插入的jsx渲染成真实的dom

4、react 的组件通信

1、父子组件通信
父：绑定一个属性
子：通过props获取属性值
2、子父组件通信
父：绑定一个方法供子组件传值
子：先获取父组件的方法，通过父组件提供的方法进行传值
3、跨级组件通信
a、层层props
b、使用context
父组件设置context属性方法
子子组件接收父组件的conetxt属性方法，通过此属性方法进行传值
4、没有嵌套关系的组件之间通信
安装使用event插件
a组件引入绑定属性
b组件根据属性传输数据