文章目录
- 1、条件判断、列表渲染等
- vue
- react
- 2、表单
- vue
- react
- 3、数据流
- vue
- react
- 4、虚拟dom
- vue
- react
- 5、模板和JSX
- vue
- react
- 6、用法
- react
- vue
- 7、生态
- react
- vue
- 8、slot
- react
- vue
- 9、setState与vue赋值
- react
- vue
- 总结
1、条件判断、列表渲染等
vue
有v-if、v-for等vue指令
react
完全是js控制，只不过用了jsx
2、表单
vue
v-model双向绑定，其实是oninput的一个语法糖
react
完全js控制，用onChange实现双向绑定，但是react叫受控组件，也就是input的文字是受一个变量控制的
3、数据流
vue
数据双向绑定
react
单向数据流（数据变化必须通过setState）
4、虚拟dom
vue
可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
react
每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。
5、模板和JSX
vue
Vue依赖于模板语法
react
react用jsx
6、用法
react
更接近js原生
vue
更偏配置，但是这是对新手来说，其实了解背后的原理了，都是挺好的
7、生态
react
react比较杂乱，或者说更灵活
vue
基本就固定一套
8、slot
react
react如何实现类似slot？子组件通过this.props.children占一个位置，父组件调用子组件时在子组件中间写上传入
// 父组件
<Child>你好</Child>
// 子组件
<div>
{this.props.children}
</div>vue
vue中我觉得slot和高阶组件差不多，也是传入一个组件，返回一个新的组件
9、setState与vue赋值
react
通过 this.setState 来赋值，异步的时候可以加回调函数，有点像 vue 的 this.$nextTick
vue
通过 this.key = value 来直接赋值
总结
网上有些人总说大型项目要用 react，中小型用 vue？
其实用 Vue 和 React 都没啥问题。
真的到了大型的应用，问题就不在于是用 Vue 还是 React 了，而在于项目的设计、架构、以及项目管理和监督。例如是否保证严格的代码审查，是否保证每次开发时设计的可扩展性，等等。
Vue 和 React 的差别，就是两种对于前端框架的理解方式不同。一个认为应该用 template 加指令的形式，把模板和 js 代码分离，给用户定好规则（如 data watch computed 等）。另一个认为应该用 jsx 的形式，把模板作为 js 代码的一部分，剩下的用户自己去搞定。仅仅如此
