对比一个Vue组件和一个React组件

最新推荐文章于 2022-06-13 12:36:33 发布

小蓝Lany

最新推荐文章于 2022-06-13 12:36:33 发布

阅读量555

点赞数 2

分类专栏： JS 前端

本文链接：https://blog.csdn.net/weixin_44646986/article/details/104555113

版权

本文对比了Vue和React在组件化方面的各种特性，包括基本形式、双向绑定、条件渲染、列表渲染、父子组件通信、插槽、共享数据源、Ref引用、并列元素渲染以及动态组件。Vue的双向绑定通过指令实现，React则需要手动处理；Vue的具名插槽和依赖注入相对直观，而React使用Context API实现类似功能较复杂。

摘要由CSDN通过智能技术生成

Vue和React都是是以组件化的思维来编写页面，那么它们其实本质上有很多共同点，下面将对它们的组件形式进行对比。

vue以单文件组件为例子，而react以单文件的类组件为例子

基本形式

Vue组件的基本形式

<template>
  <div class="text">{
  {message}}</div>
</template>
<script>
export default {
    
   name: 'Component',
   data () {
    
     return {
    
   		message: 'Hello World'	
     }
   }
}
</script>
<style scoped>
.text {
    
	color: skyblue
}
</style>

React组件的基本形式

import React from 'react';

export class Component extends React.Component {
   
  constructor(props) {
   
    super(props)
    this.state = {
   
      message: 'Hello World'
    }
  }
  render() {
   
    return (
      <div className="text">
        {
    this.state.message }
      </div>
    );
  }
}

export default Component;

发现这里react的样式，还需要单独引入css文件

双向绑定

Vue的双向绑定

vue的双向绑定可以直接使用指令v-model

<template>
  <div>
  	<h3>{
  { message }}</h3>
    <input type="text" v-model="message" >
  </div>
</template>

<script>
export default {
    
  name: 'Component',
  data() {
    
    return {
    
      message: ''
    }
  }
}
</script>

React的双向绑定

react其实没有提供现成的双向绑定指令，需要我们自己去写监听事件

import React from 'react';

export class Component extends React.Component {
   
  constructor(props) {
   
    super(props)
    this.state = {
   
      message: ''
    }
  }
  handleChange(e) {
   
    this.setState({
   
      message: e.target.value
    })
  }
  render() {
   
    return (
      <div>
        <h3>{
    this.state.message }</h3>
        <input 
          type="text"
          value={
   this.state.message} 
          onChange={
   this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

export default Component;

条件渲染

Vue的条件渲染

<template>
  <div>
    <div v-if="isLogin">
      Welcome !!
    </div>
    <div v-else>
      plz signin first !!
    </div>
  </div>
</template>

<script>
export default {
    
  name: 'Component',
  data() {
    
    return {
    
      isLogin: true
    }
  }
}
</script>

React的条件渲染

import React from 'react';

export class Component extends React.Component {
   
  constructor(props) {
   
    super(props)
    this.state = {
   
      isLogin: true
    }
  }
  render() {
   
    if (this.state.isLogin){
   
      return (<div> Welcome !! </div>)
    } else {
   
      return (<div> plz signin first !! </div>)
    }
  }
}

export default Component;

列表渲染

Vue的列表渲染

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">
        {
  { item }}
      </li>
    </ul>
  </div>
</template>

<script>

最低0.47元/天解锁文章