antd vue 树更新数据后不展开_Vue和React比较

Vue前端相关知识了解

一、vue和小程序的运行      

Vue的项目：

Vue是一个渐进式的响应式的前端框架

它的运行，包含了从node环境------vue-cli脚手架------vue项目的创建、运行

它的基础知识，有从数据的双向绑定渲染------基本html,css,js代码书写------路由配置------一些(判断、循环)样式，事件的于结构中的写法------组件使用，页面组件传值------vue与后端的数据接口(传参)-------vue的生命周期

小程序的项目：

小程序是基于小程序开发者工具(用自己的ID)来开发的应用

它的基础知识，从tabar设置------数据双向绑定------基本html,css,js代码书写------路由跳转------一些(判断、循环)样式，事件的于结构中的写法------组件使用，页面组件传值------小程序与后端数据接口(传参)------小程序的生命周期

二、初中级前端进阶

链接：https://juejin.im/post/5e7c08bde51d455c4c66ddad

基础能力

了解原生js和eventLoop，pormise，async await，设计模式，开发思想，代码规范，算法

算法

基础算法知识：

1.算法的复杂度分析。

2.排序算法，以及他们的区别和优化。

3.数组中的双指针、滑动窗口思想。

4.利用 Map 和 Set 处理查找表问题。

5.链表的各种问题。

6.利用递归和迭代法解决二叉树问题。

7.栈、队列、DFS、BFS。

8.回溯法、贪心算法、动态规划。

框架

熟练的应用：slot-scope、Vue.extends、JSX、nextTick、vue-router、Vuex、虚拟Dom

源码深入

Vue3和vue3源码(vue3响应式模型更接近于响应式类库的核心)

React、Typescript、代码质量、构建工具、性能优化略

三、前端框架用vue还是React

前端框架领域出现三足鼎立的形式：React angular Vue

下面从这些方面展开对React和vue的对比：

诞生

前几年，angular霸占市场很长时间；React横空出世，虚拟Dom从性能上碾压angular；vue1.0出现，他的优雅吸引了部分用户，之后16年vue2.0问世，它从性能和成本上隐操React。Angular推出angular2.0，吸收了React和vue的优点，三足鼎立。

编写语法

Vue的做法是：

webpack+vue-loader的单文件组件格式；html、css、js分离；

React的做法：

react是没有模板的，直接就是一个渲染函数，它中间返回的就是一个虚拟DOM树，React推荐的做法是 JSX+ inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all injs'。JSX实际就是一套使用XML语法，用于让我们更简单地去描述树状结构的语法糖。在react中，所有的组件的渲染功能都依靠JSX。你可以在render()中编写类似XML的语法，它最终会被编译成原生JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。JSX是基于 JS 之上的一套额外语法，学习使用起来有一定的成本。

构建工具

Vue：vue-cli

React：

React在这方面也提供了create-react-app，但是现在还存在一些局限性：

它不允许在项目生成时进行任何配置，而 Vue CLI 运行于可升级的运行时依赖之上，该运行时可以通过插件进行扩展。

它只提供一个构建单页面应用的默认选项，而 Vue 提供了各种用途的模板。

它不能用用户自建的预设配置构建项目，这对企业环境下预先建立约定是特别有用的。

而要注意的是这些限制是故意设计的，这有它的优势。例如，如果你的项目需求非常简单，你就不需要自定义生成过程。你能把它作为一个依赖来更新。

数据绑定

Vue:

vue是实现了双向数据绑定的mvvm框架

 

Vue采用数据劫持&发布-订阅模式的方式，vue在创建vm的时候，会将数据配置在实例当中，然后通过Object.defineProperty对数据进行操作，为数据动态添加了getter与setter方法，当获取数据的时候会触发对应的getter方法，当设置数据的时候会触发对应的setter方法，从而进一步触发vm的watcher方法，然后数据更改，vm则会进一步触发视图更新操作。

 

React:

react是单向数据流，react中属性是不允许更改的，状态是允许更改的。react中组件不允许通过this.state这种方式直接更改组件的状态。自身设置的状态，可以通过setState来进行更改。在setState中，传入一个对象，就会将组件的状态中键值对的部分更改，还可以传入一个函数，这个回调函数必须向上面方式一样的一个对象函数可以接受prevState和props。通过调用this.setState去更新this.state,不能直接操作this.state，请把它当成不可变的。 

 

调用setState更新this.state，它不是马上就会生效的，它是异步的。所以不要认为调用完setState后可以立马获取到最新的值。多个顺序执行的setState不是同步的一个接着一个的执行，会加入一个异步队列，然后最后一起执行，即批处理。

 

 

setState是异步的，导致获取dom可能拿的还是之前的内容，所以我们需要在setState第二个参数(回调函数)中获取更新后的新的内容。

diff算法

difirent---差异算法

vue中diff算法实现流程：

1. 1.     在内存中构建虚拟dom树

2. 2.将内存中虚拟dom树渲染成真实dom结构

3. 3.数据改变的时候，将之前的虚拟dom树结合新的数据生成新的虚拟dom树

4. 4.将此次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对(diff算法进行比对)，来更新只需要被替换的DOM，而不是全部重绘。在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。

5. 5.会将对比出来的差异进行重新渲染

 

React中diff算法实现流程：

reactnative是Facebook在2015年3月在F8开发者大会上开源的跨平台UI框架，需针对iOS、Android不同编写2份代码，使用react native需要按照文档安装配置很多依赖的工具，相对比较麻烦。weex的思想是多个平台，只写一套代码，而react-native的思想是多个平台可以写多套代码，但其使用的是同一套语言框架。 

weex的目标在于抹平各个平台的差异性，从而简化应用开发。而react-native承认了各个平台之间的差异，退而求其次，在语言和框架层面对平台进行抽象，从方法论的角度去解决多平台开发的问题。

ssr服务端渲染

服务器端渲染就是，从服务器请求数据后再渲染。

Ssr优势：

1.更利于SEO优化，爬虫可以直接爬到整个首次页面内容。

2.更利于首屏渲染

Ssr局限：

1.服务器端压力大(如果是高并发，会吃掉很多cpu资源)

2.开发条件受限

3.学习成本高

除了对webpack、React要熟悉，还需要掌握node、Koa2等相关技术。相对于客户端渲染，项目构建、部署过程更加复杂。

 

Vue：

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES2015+ 语法支持

打包和压缩 JS 和 CSS

HTML 头部标签管理

本地开发支持热加载

集成 ESLint

支持各种样式预处理器：SASS、LESS、 Stylus 等等

支持 HTTP/2 推送

 

React:

Next是一个React框架，允许使用React构建SSR和静态web应用

服务器渲染，获取数据非常简单

无需学习新框架，支持静态导出。

支持CSS-in-JS库

自动代码拆分，加快页面加载速度，不加载不必要的代码

基于Webpack的开发环境，支持模块热更新(HMR)

支持Babel和Webpack自定义配置服务器、路由和next插件。

能够部署在任何能运行node的平台

内置页面搜索引擎优化(SEO)处理

在生产环境下，打包文件体积更小，运行速度更快

 

生命周期

Vue:

(1)beforeCreate

(2)created

(3)beforeMount

(4)mounted

(5)beforeUpdate

(6)updated

(7)beforeDestroy

(8)destoryed

 

React:

【初始化阶段(5个)】：

(1)getDefaultProps

实例化组件之后，只在第一次实例化的时候执行

(2)getInitialState：为实例挂载初始状态，且每次实例化都会执行，也就是说，每一个组件实例都拥有自己独立的状态。

(3)componentWillMount：执行componentWillMount，相当于Vue里的created+beforeMount，这里是在渲染之前最后一次更改数据的机会，在这里更改的话是不会触发render的重新执行。

(4)render：渲染dom

Render()是一个纯函数，应该将时间放在生命周期函数中；如果shoudComponentUpdate()返回false，render()

(5)componentDidMount：相当于Vue里的mounted,多用于操作真实dom

【运行中阶段(5个)】

当组件mount到页面中之后，就进入了运行中阶段，在这里有5个钩子函数，但是这5个函数只有在数据(属性、状态)发送改变的时候才会执行

(1)componentWillReceiveProps(nextProps,nextState)

当父组件给子组件传入的属性发生变化时，子组件的这个函数才会执行

当执行的时候，函数接收的参数是子组件接收到的新参数，这个时候，新参数还没有同步到this.props上,多用于判断新属性和原有属性的变化后更改组件的状态。

(2)接下来就会执行shouldComponentUpdate(nextProps,nextState),这个函数的作用：当属性或状态发生改变后控制组件是否要更新，提高性能,返回true就更新，否则不更新，默认返回true。

  接收nextProp、nextState，根据根据新属性状态和原属性状态作出对比、判断后控制是否更新

  如果shouldComponentUpdate()返回false，componentWillUpdate,render和cpmponentDidUpdate不会被调用

(3)componentWillUpdate,在这里，组件马上就要重新render了，多做一些准备工作，千万千万，不要在这里修改状态，否则会死循环 相当于Vue中的beforeUpdate

(4)render，重新渲染dom

(5)componentDidUpdate，在这里，新的dom结构已经诞生了,相当于Vue里的updated

销毁组件

Vue

vue在调用$destroy方法的时候就会执行beforeDestroy生命周期函数，然后组件被销毁，这个时候组件的dom结构还存在于页面结构中，也就说如果想要对残留的dom结构进行处理必须在destroyed生命周期函数中处理。

React

react执行完componentWillUnmount之后把事件、数据、dom都全部处理掉了，也就是说当父组件从渲染这个子组件变成不渲染这个子组件的时候，子组件相当于被销毁，所以根本不需要其他的钩子函数了。react销毁组件的时候，会将组件的dom结构也移除，vue则不然，在调用destory方法销毁组件的时候，组件的dom结构还是存在于页面中的，this.$destory组件结构还是存在的，只是移除了事件监听，所以这就是为什么vue中有destroyed，而react却没有componentDidUnmount。

状态及管理工具

Vue 的转台管理工具：vuex

 

React的状态管理工具：redux

 

 

vue和react的核心都是专注于轻量级的视图层。

一个庞大复杂的项目，用过于简陋的开发框架无疑降低开发人员的生产力和效率。简单项目使用过于庞大的框架，学习成本、上手成本和实际开发项目的效率也会收到影响。

每个框架都有优略势，适合的才是最好的；想react社区3天更新一个版本，一个问题有几十种解决方案；适当取舍，灵活应用开发，为了跟随时代变化更新的不发，需要不断学习进步也就成为了前端开发领域的一大乐事。

 

 

四、三中模式的介绍

Mvc,mvp,mvvm