Vue与React的对比学习 - 01

React & Vue 技术分享

​ 本次不是一门课程学习，仅仅只是个人对于两大框架的理解进行相应的对比分享。公司人员全是Vue开发者，所以组织了一次React的技术分享。都是自己的分享写的不对请大佬们嘴下留情，多指点指点

1. React和Vue不同之处和相同之处
2. React和Vue生命周期对比
3. React和Vue实际代码中的区别

1. React和Vue不同之处和相同之处

• 相同之处

  两者均采用虚拟Dom（virtual Dom）- 用Js模拟DOM结构，DOM变化的对比，放在Js层，以提高重绘性能

• 不同之处

React	Vue
单向数据绑定(props -> state)	双向数据绑定(如: v-model)
更强调数据的不可变	基于是数据可变的
.JSX | .JS | .TSX	.Vue
类式的写法，API很少	声明式的写法(结合TS更复杂)

2. 生命周期对比

React：

Vue：

注：在React16.8中更新和废弃了部分生命周期，组件函数化；Vue3.0中也支持了类式写法

3. React和Vue实际代码中的区别

1. 基础组件的区别

   Vue 按钮 - Button.Vue

   <template>
   	<button @click='btnClick' class='btn'>这是一个按钮</button>
   </template>
   
   <script>
   	export default {
            name: 'button',
   	}
   	
   	btnClick() {
   		doSomething;
   	}
   </script>
   
   <style type="text/css">
   	.btn {
   		color: 'red';
   	}
   </style>
   

   React 按钮 - Button.jsx

   import React from 'react';
   import 'btn.css';
   
   export default class Button extends React.Component {
   	btnClick() => {
   		doSomething;
   	}
   
       render() {
           return <button onClick='btnClick' className='btn'>这是一个按钮</button>
       }
   }
   

   React 按钮 - btn.css

   .btn {
   	color: 'red';
   }
   

2. 状态更新的区别

   Vue

   <template>
   	<div>
   		<span>{{count}}</span>
   		<button @click='btnClick' class='btn'>这是一个按钮</button>
   	</div>
   </template>
   
   <script>
   	export default {
            name: 'button',
            data() {
            	return {
            		count: 0,
            	}
            }
   	}
   	
   	btnClick() {
   		this.count ++ ;
   	}
   </script>
   
   <style type="text/css">
   	.btn {
   		color: 'red';
   	}
   </style>
   

   React

   import React from 'react';
   // import 'btn.css';
   
   export class Button extends React.Component {
   	// constructor(props) {
       //    super(props);
       //    this.state = {
       //        count: 0,
       //    }
       // 		this.btnClick = this.btnClick.bind(this);
       // }
       
       state = {
       	count: 0,
       }
   
   	btnClick() => {
           //  this.setState((prevState) => ({
   		//     count: prevState.count + 1
   		// 	}))
   		this.setState({count: this.state.count ++})
   	}
   	
   	forDom() => {
   		return `<li>1<li>`;
   	}
   
       render() {
       	let a = this.state.count;
       	a++;
           return (<div>
           	<span>{this.state.count}</span>
           	<button onClick='this.btnClick'>这是一个按钮</button>
           	<ul>
           		<li>{a}</li>
           	</ul>
           </div>)
       }
   }
   

   React的常见疑问：

   constructor（）是ES6写法所特有的, 代替了ES5的 getDefaultProps(){} , getInitialState(){}
   1 到底要不要写?
   答: 如果你需要设置默认的状态就要写

   2 super( ) 要不要传 props ?
   答: constructor () 必须配上 super(), 如果要在constructor 内部使用 this.props 就要 传入props , 否则不用

   3 绑定事件到底要不要在构造函数constructor（）中进行？
   答: JS 的bind 每次都会返回一个新的函数, 为了性能等考虑, 要在constructor中绑定事件

   4 什么情况下在constructor（）中初始化事件 和 初始化状态?
   比如: input 需要一个默认value的时候, 你就要 初始化状态了

3. 组件间的通信

   Vue 组件通信 父 -> 子

   **父组件代码**
   <template>
       <message-box :message="showMessage"></message-box>
   </template>
   <script>
       import MessageBox from './header';
       export default {
           name: 'index',
           components: {
               'message-box': MessageBox
           },
           data () {
               return {
                   showMessage: '首页'
               }
           }
       }
   </script>
   

   **子组件代码 prop接受**
   <template>
       <div>
           {{msg}}
       </div>
   </template>
   <script>
       export default {
           name: 'message-box',
           props: {
               message: String
           },
           data () {
               return {
                   msg: this.message
               }
           }
       }
   </script>
   

   Vue 组件通信 子 -> 父

   **父组件代码**
   <template>
       <message-box :changeMessage="changeMessage"></message-box>
   </template>
   <script>
       import MessageBox from './message';
       export default {
           name: 'index',
           components: {
               'message-box': MessageBox
           },
           data () {
               return {
                   showMessage: '首页'
               }
           },
           methods: {
               changeMessage () {
                   this.showMessage = '分页'
               }
           }
       }
   </script>
   

   **子组件代码**
   <template>
       <button @click='changeMsg'>
           {{msg}}
       </button>
   </template>
   <script>
       export default {
           name: 'message-box',
           data () {
               return {
                   msg: '详情页'
               }
           },
           metheds: {
               changeMsg () {
                   this.$emit('changeMessage');
               }
           }
       }
   </script>
   
   

   Vue 非父子 1. 通常采用Vuex； 2. 不用Vuex，则可以使用空的Vue实例作为中央事件总线

   React 组件通信 父 -> 子

   **父组件代码**
   import React, { Component } from 'react';
   import {MessageBox} from './message';
   
   export default class PageIndex extends Component {
   	constructor(props){
       	super(props)
       	this.state = {
       		showMessage: '首页'
       	}
       }
       
       render() {
       	return(
       		<div>
       			<MessageBox msg={this.state.showMessage}/>
       		</div>
       	)
       }
   }
   
   

   **子组件代码**
   import React from 'react';
   
   export default class MessageBox extends React.Component {
   	constructor(props){
       	super(props);
       }
       
       render() {
       	return (
       		<div>{this.props.msg}</div>
       	)
       }
   }
   
   

   React 组件通信 子 ->

   **父组件代码**
   import React, { Component } from 'react';
   import {MessageBox} from './message';
   
   export default class PageIndex extends Component {
   	constructor(props){
       	super(props)
       	this.state = {
       		showMessage: '首页'
       	}
       }
       
       changeMsg(params) => {
       	this.setState({showMessage: params});
       }
       
       render() {
       	return(
       		<div>
       			<MessageBox msg={this.changeMsg}/>
       		</div>
       	)
       }
   }
   
   

   **子组件代码**
   import React from 'react';
   
   export default class MessageBox extends React.Component {
   	constructor(props){
       	super(props);
       }
       
       change() => {
       	this.props.msg('子组件传给父组件的值');
       }
       
       render() {
       	return (
       		<button onClick='this.change'>子组件</div>
       	)
       }
   }