React & Vue 技术分享
本次不是一门课程学习,仅仅只是个人对于两大框架的理解进行相应的对比分享。公司人员全是Vue开发者,所以组织了一次React的技术分享。都是自己的分享写的不对请大佬们嘴下留情,多指点指点
- React和Vue不同之处和相同之处
- React和Vue生命周期对比
- 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实际代码中的区别
-
基础组件的区别
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'; }
-
状态更新的区别
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的时候, 你就要 初始化状态了 -
组件间的通信
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> ) } }