Open chenfei-hnu opened 4 years ago
部分参考 https://cn.vuejs.org/v2/guide/comparison.html
1.使用 Virtual DOM来处理页面渲染 2.提供了响应式的视图组件 3.将注意力集中保持在核心业务组件，而将其他功能如路由和全局状态管理交给相关的库
详细参考 计算出Virtual DOM的差异的方式和速度不同，Vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以React中会需要 shouldComponentUpdate/PureComponent 来进行控制
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染所有子组件，遵从Immutable的设计思想，永远不在原对象上修改属性，基于 Object.defineProperty 或 Proxy 的响应式依赖收集机制无从下手（永远返回一个新的对象，不知道修改了旧对象的哪部分） 为弥补这个问题，React 创造了Fiber，创造了异步渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时可能会需要使用不可变的数据结构来使组件更容易被优化。 然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。 React Hook中可以使用React.memo来封装组件进行浅比较优化，对于函数等引用数据类型可以通过第二个参数来控制对比过程，或者使用useCallback对函数进行封装，然后作为props传递，对于减少缓存计算量使用useMemo进行优化
在 Vue 应用中，每个组件都有自己的渲染 watcher，其中已经使用Object.defineProperties/Proxy对所有状态属性进行劫持监听，在diff的过程中，只会对 component 上声明的 props、listeners等属性进行更新，发生改变时才进行当前组件的重新渲染，再重新计算子组件的 props，而不会深入到组件内部进行更新，子组件的渲染 watcher监听到直接的数据发生变化，再觉得是否重新渲染自身组件，所以系统能精确知晓哪个子组件确实需要被重渲染。 Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。
Templates更接近于原来的HTML，更容易从设计稿进行转化，JSX可以使用Javascrip表达式及组件作用域中的变量，更容易进行数据视图关联，因此开发工具的支持相较于Templates也更好
在 React 中，所有的组件的渲染功能都依靠 JSX 使用 JSX 的渲染函数有下面这些优势： 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。
对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易，使得设计师和新人开发者更容易理解和参与到项目中
react 单组件样式使用styled-components进行编码，以JS形式的语法和原生css的语法差异较大
Vue 设置样式的默认方法是单文件组件里类似 style 的标签。单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。 通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules，全部都在
部分参考 https://cn.vuejs.org/v2/guide/comparison.html
1.共同的部分
2.子组件渲染
详细参考 计算出Virtual DOM的差异的方式和速度不同，Vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以React中会需要 shouldComponentUpdate/PureComponent 来进行控制
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染所有子组件，遵从Immutable的设计思想，永远不在原对象上修改属性，基于 Object.defineProperty 或 Proxy 的响应式依赖收集机制无从下手（永远返回一个新的对象，不知道修改了旧对象的哪部分） 为弥补这个问题，React 创造了Fiber，创造了异步渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时可能会需要使用不可变的数据结构来使组件更容易被优化。 然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。 React Hook中可以使用React.memo来封装组件进行浅比较优化，对于函数等引用数据类型可以通过第二个参数来控制对比过程，或者使用useCallback对函数进行封装，然后作为props传递，对于减少缓存计算量使用useMemo进行优化
在 Vue 应用中，每个组件都有自己的渲染 watcher，其中已经使用Object.defineProperties/Proxy对所有状态属性进行劫持监听，在diff的过程中，只会对 component 上声明的 props、listeners等属性进行更新，发生改变时才进行当前组件的重新渲染，再重新计算子组件的 props，而不会深入到组件内部进行更新，子组件的渲染 watcher监听到直接的数据发生变化，再觉得是否重新渲染自身组件，所以系统能精确知晓哪个子组件确实需要被重渲染。 Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。
3.JSX vs Templates
JSX
在 React 中，所有的组件的渲染功能都依靠 JSX 使用 JSX 的渲染函数有下面这些优势： 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。
Templates
对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易，使得设计师和新人开发者更容易理解和参与到项目中
4.组件作用域内的 CSS
react 单组件样式使用styled-components进行编码，以JS形式的语法和原生css的语法差异较大
Vue 设置样式的默认方法是单文件组件里类似 style 的标签。单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。 通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules，全部都在