vue 和 react语法对比异同点

vue 和 react 学习 异同点

本文不做两个框架比较，只对比了两个框架的语法对比，不代表任何观点，盗版必究，本人唯一qq：421217189 欢迎大家一起来学习探讨，壮我大前端（本文markdown直接生成，没有排版，也是为了防止那些不要脸的直接复制我文章的人，在此特声明，所有直接窃取文化知识的人，本人必将追究法律责任，本人qq：421217189，新增一个qq专为大家提供技术：15274527。）

先说一下两个框架的中文文档

Vue

react

可以点击直接前往

安装

vue

$ vue init webpack my-project $ cd my-project $ npm install $ npm run dev

react

$ create-react-app my-app $ cd my-app/ $ npm start

---

修改端口

vue

/config/index.js/

react

/package.json

hellow world 展示实例生成

vue

import Vue from 'vue' new Vue({ el: '#app', template:`

hello world

` })

react

import React from 'react' import ReactDOM from 'react-dom' ReactDOM.render(

hello world

, document.getElementById('root') )

---

dev 运行方式

vue

• npm run dev

react

• npm start

---

变量的使用

vue

import Vue from 'vue' new Vue({ el: '#app', data(){ return { msg: 'hello world', } }, template:`

{{ msg }}

` })

react

import React from "react"; import ReactDOM from "react-dom"; class State extends React.Component{ constructor(){ super(); this.state={ msg:'this is react' } } render(){ return(

{this.state.msg}

) } } ReactDOM.render( , document.getElementById('root') )

---

组件props的使用

vue

main.js

import Vue from 'vue' import app from './components/app.vue' new Vue({ el: '#app', components:{ app, }, template:'' })

app.vue

react

index.js

import React from "react"; import ReactDOM from "react-dom"; import Dome from "./reactDome.js" ReactDOM.render( , document.getElementById('root') )

reactDome.js

import React from "react"; class State extends React.Component { constructor(props) { super(props); } render() { return (

{this.props.msg}

) } } export default State;

---

组件props默认值、验证

react

import React from "react"; import ReactDOM from "react-dom"; class State extends React.Component { static defaultProps = { msg: 'I am react defaultProps' } constructor(props) { super(props); } render() { return (

{this.props.msg}

) } } ReactDOM.render( , document.getElementById('root') )

vue

app.vue

main.js

import Vue from 'vue' Vue.config.productionTip = false import App from '../src/components/app.vue' /* eslint-disable no-new */ new Vue({ el: '#app', template: '', components: { App } })

---

class和style的赋值

react

import React from "react"; import ReactDOM from "react-dom"; require('./App.css') class From extends React.Component{ constructor(){ super(); this.state = { className : 'mystyle' } } render() { let style = { color:'#333', fontSize:50, } return(

11111

2222

) } } ReactDOM.render( , document.getElementById('root') );

vue

• 在这里有一点要记住，react可以自动增加px尾缀，vue不会

---

事件

react

import React from "react"; import ReactDOM from "react-dom"; class App extends React.Component { constructor(){ super(); this.clickfunc = this.clickfunc.bind(this); this.state = { tar : true, } } clickfunc(){ this.setState({ tar:!this.state.tar }) } render() { return (

{this.state.tar?'点我':'再点我'}

) } } ReactDOM.render( , document.getElementById('root') )

vue

---

表单双向绑定

react

import React from "react"; import ReactDOM from "react-dom"; class Module extends React.Component { constructor(){ super(); this.state = { value:'react is good', }; this.changeFrom = this.changeFrom.bind(this); } changeFrom(event){ this.setState({ value : event.target.value }) } render(){ return (

{this.state.value}

) } } ReactDOM.render( , document.getElementById('root') );

vue

---

条件渲染模版

react

import React from "react"; import ReactDOM from "react-dom"; class Module1 extends React.Component{ render(){ return (

我是模版1

) } } class Module2 extends React.Component { render() { return (

我是模版2

) } } class Module extends React.Component{ constructor(){ super(); this.state = { tar : true } this.changeModule = this.changeModule.bind(this); } componentWillUpdate(){ console.log(this.state.tar) } changeModule(){ this.setState(s => ({ tar : !s.tar })) // console.log(this.state.tar); } render(){ if(this.state.tar){ return (

切换模版

) }else{ return (

切换模版

) } } } ReactDOM.render( , document.getElementById('root') )

vue

App.vue

mainjs

import Vue from 'vue' Vue.config.productionTip = false import App from './App.vue' /* eslint-disable no-new */ let cpt=new Vue({ el: '#app', template: '', components: { App }, })

---

列表渲染

react

这里写了一个点击按钮增加一个的方法，也不知道当时怎么想的 反正就是写了不需要的小伙伴删了就好

import React from "react"; import ReactDOM from "react-dom"; class Module extends React.Component { constructor(props) { super(props); } render() { var listtpl = this.props.listarr.map((todo, index) =>

{todo}

) return (

{listtpl}

) } } class AddModule extends React.Component{ constructor(){ super(); this.state={ listarr: [1, 2, 3, 4, 6, 7], } this.add=this.add.bind(this); } add(){ this.setState(s =>({ listarr: s.listarr.concat([this.state.listarr.length+2]) })) console.log(this.state.listarr) } render(){ return (

添加

) } } ReactDOM.render( , document.getElementById('root') )

vue

---

组件声明周期函数

react

import React from "react"; import ReactDOM from "react-dom"; import { setInterval } from "timers"; class State extends React.Component { static defaultProps = { msg: 'I am react defaultProps' }; //项目一开始调用 constructor(props) { super(props); this.state = { msg:11, msg2: props.msg } this.func = this.func.bind('this') } func(){ console.log(1); } //在初始化渲染执行之前立刻调用 componentWillMount(){ console.log('组件将要挂载'); //在这里使用setstate会让实例使用这个state this.setState({ msg: 'react componentWillMount' }); } //在初始化渲染执行之后立刻调用一次， componentDidMount(){ console.log('组件已经挂载完成'); } //组件更新时候调用 componentWillReceiveProps(){ console.log('组件props更改了'); this.setState({ msg2 : this.props.msg }) } shouldComponentUpdate(){ console.log('组件props更改了，即将渲染了') //需要提供返回值为true或者false false就不渲染了 return true; // return false; } //在shouldComponentUpdate之后 componentWillUpdate(){ console.log('现在有一个props或者state更新了') } componentDidUpdate(){ console.log('props更新完毕了') } componentWillUnmount(){ console.log('组件从dom移除了'); } render() { return (

{this.state.msg +'+++++++' +this.state.msg2}

) } } class App extends React.Component{ constructor(){ super(); this.state = { msg:'hellow', }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ msg: event.target.value }); } render(){ return (

) } } ReactDOM.render( , document.getElementById('root') )

vue

 

转载于:https://www.cnblogs.com/jinzhenzong/p/8184799.html