干货干货!教大家如何选择教大家如何选择Vue和和React
Vue和React之间如何选择,这篇文章主要为大家详细介绍了Vue和React两者之间的相同之处,教大家该如何进
行选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
两者之间的相同之处两者之间的相同之处
同样是基于组件开发的轻量级框架,同样是专注于用户界面的视图view层。
如何选择如何选择
1.1 如果喜欢用模板搭建应用模板搭建应用(或者有这个想法)选择Vue
Vue应用默认的是把markup放在HTML中,数据绑定表达式和Angular一样,采用{{}}的形式,而指令(特殊的HTML属性)用
来向模板中添加功能
<div> <p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JS
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});
React使用的是JSX语法(在JavaScript中创建DOM),而不使用模板。
<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello React.js!'
};
}
reverseMessage() {
this.setState({
message: this.state.message.split('').reverse().join('')
});
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.reverseMessage()}>
Reverse Message
</button>
</div>
)
}
}
ReactDOM.render(App, document.getElementById('app'));
模板可以更好地把布局和功能分隔开,但是需要学习所有的HTML扩展语法,而渲染函数只需要标准的HTML和JavaScript。
注意:注意:vue2.0提供使用模板和渲染函数的选项
1.2 想要简单一点的语法,简单一点的语法,和更快的渲染速度更快的渲染速度,选择vue
使用Vue不需要转译,直接运行在浏览器中,但是React代码重度依赖于JSX和ES6语法。
1.2.1 两者处理数据的方式不一样
vue的数据可变,React的数据不可变
//vue
this.message = this.message.split('').reverse().join('');
//React