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

   React 按钮 - Button.jsx

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

   React 按钮 - btn.css

   .btn {
   	color: 'red';
   }
   

2. 状态更新的区别

   Vue

   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 `
   1
   `;
   	}
   
       render() {
       	let a = this.state.count;
       	a++;
           return (
   
           	{this.state.count}
           	这是一个按钮
           	
   
           		
   {a}
           	
           
   )
       }
   }
   

   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 组件通信 父 -> 子

   **父组件代码**
   
   
   

   **子组件代码 prop接受**
   
   
   

   Vue 组件通信 子 -> 父

   **父组件代码**
   
   
   

   **子组件代码**
   
   
   
   

   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(
       		
   
       			
       		
       	)
       }
   }
   
   

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

   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(
       		
   
       			
       		
       	)
       }
   }
   
   

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

) } }