React 基础与核心总结(理论篇)

1. 如果你是leader，做管理系统项⽬ Vue和React 怎么选择?

评估项⽬成员的⽔平，如果成员js基础较好、编码能⼒较强则选择React，否则Vue。
评估系统的⼤⼩，如果想构建⽣态系统，则选择React，如果要求快速，则选择Vue。当然现在Vue3.x在对Vue2的性能优化之后，开发大型复杂的项目的性能也更好了。
评估系统运⾏环境，如果你想要⼀个同时适⽤于Web端和原⽣APP的框架，请选择React(RN)。当然现在Vue也有相应的原生框架weex。

技术没有哪个更好或者是更优秀，只有适合的才是最合适的。

另外关于大型项目，能否做大型项目关键在于项目组的业务划分、部门之间的协调效率上，因为大型项目不是一两个人，三五个人能够完成的。一个项目之所以称为大项目是在于它是公司大量部门协同合作下的产物。也就是说，解决了项目划分等问题，使用vue和react都是可以的。

2. Vue和React区别

两个语言有共同点和区别。由于是两种不同的语言，区别肯定很多，这里只是列举一些比较重要的点。

共同点：

都是 JavaScript 的 UI 框架
都是优秀的 MVVM 前端框架（对MVC和MVVM的理解），但react严格上是只针对mvc的view层，vue则是完全的mvvm模式。
不同于早期的 JavaScript 框架“功能齐全”，Reat 与 Vue 只有框架的骨架，其他的功能如路由、状态管理等都是框架附属的模块。
都支持数据驱动视图，不操作真实dom就能自动渲染页面。
都支持native源生的方案，react的RN（reactNative）和vue的weex
都支持服务端渲染
都支持组件化开发和虚拟dom（virtual Dom）
都支持props进行父子组件间数据通信
都比较容易上手，但VUE 相较于 React 更容易上手，主要是React的JSX语法和我们平时的习惯不同

区别：

1）数据绑定方式不同

vue实现了数据的双向绑定，react可以说是单向绑定。但两者都实现了单向数据流。

2）组件写法及模板语法不同

react是jsx（html，css写进js），vue是html，css，js写在同一个文件里。Vue 使⽤的是web 开发者更熟悉的模板与特性，Vue的API跟传统web模板契合度更⾼，⽐如Vue的单⽂件组件是以模板+JavaScript+CSS的组合模式，对应用的升级更方便、更容易，可以更轻松地使用和修改现有应用程序。

3）数据更新方式不同（也就是反应式系统不同），这是最大的区别

Vue提供反应式的数据，当数据改动时，界⾯就会⾃动更新。react需要setState方法对数据进行更新，这一点比Vue 数据更加可控。

React 整体是函数式的思想，在 React 中是单向数据流，推崇数据不可变的思想。

而 Vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 DOM。

所以，React 的性能优化需要手动去做，而Vue的性能优化是自动的，但是Vue的响应式机制也有问题，就是当 state 特别多的时候，Watcher 会很多。

4）DOM的更新策略不同（diff算法）

react 会自顶向下全diff；Vue 会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面，重新生成新的虚拟dom tree, 新旧dom tree进行比较，进行patch打补丁方式，局部跟新dom. 所以react为了避免父组件跟新而引起不必要的子组件更新，可以在shouldComponentUpdate做逻辑判断，减少没必要的render，以及重新生成虚拟dom，做差量对比过程.

在 vue中，通过Object.defineProperty 把这些 data 属性全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。（Vue3.x的更新机制优化）

Diff 算法借助元素的 Key 判断元素是新增、删除、修改，从而减少不必要的元素重渲染。