vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件
  6DMaaPzJglxt 2023年12月05日 28 0



文章目录

  • ⭐前言
  • ⭐react 组件传值实例
  • 💖父组件传值给子组件（props）
  • 💖子组件传递事件给父组件props绑定事件
  • 💖父组件触发子组件的事件Ref
  • ⭐vue3 组件传值实例
  • 💖 父组件传递数据给子组件props
  • 💖 子组件传递事件给父组件使用emit
  • 💖 父组件获取子组件实例使用Ref
  • ⭐总结
  • ⭐结束



vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件_前端

⭐前言

大家好，我是yma16，本文分享关于vue、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件。
react渲染原理
React 是一个基于组件的 JavaScript 库，用于构建用户界面。React 的主要原理是将用户界面抽象为一组嵌套的组件，每个组件都拥有自己的状态和行为。当组件的状态发生改变时，React 会自动重新渲染组件，并将更新后的组件插入到 DOM 树中。

React 的渲染过程主要涉及以下几个步骤：

  1. 首先，React 会根据 JSX 语法解析出虚拟 DOM（Virtual DOM）对象树，该虚拟 DOM 对象树只是一个 JavaScript 对象，其中包含了组件的状态、属性和子节点等信息。
  2. 然后，React 通过比较新旧虚拟 DOM 对象树，找出需要更新的部分，只更新需要更新的部分，称之为 “DOM Diff”。
  3. 接着，React 调用 render 方法生成新的虚拟 DOM 对象树，并将其与旧的虚拟 DOM 对象树进行比较。
  4. 如果新旧虚拟 DOM 对象树相同，则不进行任何操作。
  5. 如果新旧虚拟 DOM 对象树不同，则根据差异进行更新，生成新的虚拟 DOM 对象树。
  6. 最后，React 将更新后的虚拟 DOM 对象树渲染到真实的 DOM 上，完成渲染过程。

React 的渲染过程主要基于虚拟 DOM 和差异化算法。通过虚拟 DOM 对象树的比较，React 能够高效地进行局部更新，提高了应用程序的性能和用户体验。
vue渲染原理
Vue的渲染原理可以大致分为以下几个步骤：

  1. 解析模板：Vue会将模板字符串解析成抽象语法树(AST)，这个过程中会标记出模板中的所有指令、插值语法、事件等信息。这一步由模板编译器完成。
  2. 根据AST生成渲染函数：Vue会从抽象语法树中生成一个可执行的渲染函数(render function)，这个函数可以接收一个参数——渲染上下文(render context)，并返回一个VNode节点。
  3. 渲染函数执行：当组件需要重新渲染时，Vue会执行渲染函数，生成一个新的VNode节点树。
  4. Diff算法对比新旧VNode：Vue将上一步生成的新VNode节点树和上一次渲染的旧VNode节点树进行对比，通过Diff算法找出需要更新的节点。
  5. 生成补丁(patch)：Diff算法找出需要更新的节点后，会生成一个补丁对象(patch)，这个补丁对象描述了要对哪些节点进行何种修改操作。
  6. 将补丁应用到真实的DOM上：最后，Vue将生成的补丁对象应用到真实的DOM节点上，完成组件的更新。

注：以上是Vue2.x版本的渲染原理，Vue3.x版本的渲染原理有所不同，主要是采用了基于Proxy的响应式数据自动更新机制以及模板编译器与运行时渲染器分离等新特性。

⭐react 组件传值实例

项目截图

vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件_前端_02

💖父组件传值给子组件（props）

App.tsx通过标签内属性传递editInstance给EmailPage.tsx

vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件_vue_03


父组件 App.txs

传递一个grapesjs实例到EmailPage

import './App.css';
import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';

function App() {

  return (
      <div className="App">
        <EmailPage editInstance={grapesjs} ></EmailPage>
      </div>
  );
}

export default App;

子组件 EmailPage.tsx 解构props
解构接收props的editorInstance

import grapesJSMJML  from '../components/email-edit/index'
import { forwardRef, useEffect, useState,useImperativeHandle } from 'react'

const EmailPage=(props:any)=>{
    const [editor,setEditor]=useState();
    useEffect(()=>{
        const editorInstance:any = props.editInstance
            .init({
                fromElement: true,
                container: '#gjs-email',
                plugins: [grapesJSMJML ],
            });
        try{
            editorInstance.Commands.run('mjml-clear')
        }
        catch (e) {
            console.error('e',e)
        }
        setEditor(editorInstance)
    },[props.editInstance])
    return (
        <div id={'gjs-email'} className={'design-editor'}/>

    )
}

export default EmailPage;

💖子组件传递事件给父组件props绑定事件

同理我们也可以在props传递一个事件给props，在子组价触发即可

💖父组件触发子组件的事件Ref

父组件 App.txs 使用ref获取组件实例

import './App.css';
import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';
import { useState,useEffect,useRef } from 'react';

function App() {
  const emailRef:any=useRef();
  useEffect(()=>{console.log(emailRef)},[emailRef])
  return (
      <div className="App">
        <EmailPage editInstance={grapesjs} ></EmailPage>
      </div>
  );
}

export default App;

子组件 EmailPage.txs使用useImperativeHandle 暴露方法和属性
暴露两个方法分别是 getHtml和getBodyContent，最后使用forwardRef抛出组件实例

import grapesJSMJML  from '../components/email-edit/index'
import { forwardRef, useEffect, useState,useImperativeHandle } from 'react'
import zh from "../components/email-edit/locale/zh";


const EmailPage=(props:any,ref:any)=>{
    const [editor,setEditor]=useState();
    const [domRef,setDomRef]=useState();
    useEffect(()=>{
        const editorInstance:any = props.editInstance
            .init({
                fromElement: true,
                container: '#gjs-email',
                plugins: [grapesJSMJML ],
            });
        try{
            editorInstance.Commands.run('mjml-clear')
        }
        catch (e) {
            console.error('e',e)
        }
        setEditor(editorInstance)
    },[props.editInstance])
    const getBodyContent=()=>{
        // @ts-ignore
        const inlineHtml=editor.Commands.run('mjml-code-to-html-inline')
        const matchBody=new RegExp('<body[^>]*>([\\s\\S]+?)<\\/body>','ig');
        const matchBodyText=inlineHtml.match(matchBody)
        // @ts-ignore
        return matchBodyText?matchBodyText[0]:''
    };

    const getHtml=()=>{
        // @ts-ignore
        return editor.Commands.run('mjml-code-to-html-inline')
    }
    useImperativeHandle(ref, () => ({
        getHtml:getHtml,
        getBodyContent:getBodyContent
    }));

    return (
        <div id={'gjs-email'} className={'design-editor'}
             ref={(ref:any)=>{
                 setDomRef(ref)
             }}
        />

    )
}

export default forwardRef(EmailPage);

⭐vue3 组件传值实例

项目截图

vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件_前端_04

💖 父组件传递数据给子组件props

子组件 defineProps 定义接受的参数
IframeContent.vue

<template>
  <div class="iframe-container">
    <div class="iframe-content" v-if="!isPage&&!isModel">
      <div style="width: 100%">
        <span> 标题：{{ title }} </span>
        {{kind}}
        <a-button
          @click="jumpPage"
          type="primary"
          style="float: right; margin: 5px"
        >
          跳转</a-button
        >
      </div>
      <iframe :src="url" class="iframe-box"></iframe>
    </div>
    <div class="iframe-content" v-else-if="!isModel">
      <UserTable></UserTable>
    </div>
    <div class="iframe-content" v-else>
      <ChatTable></ChatTable>
    </div>
  </div>
</template>
<script lang="ts" setup>

import {computed} from 'vue'
// @ts-ignore
const props = defineProps<{
  url: string;
  title: string;
  kind: string;
}>();

const isPage=computed(()=>{
  console.log('props',props)
  return props.kind=='page'
})

const isModel=computed(()=>{
  console.log('props',props)
  return props.kind=='model'
})

const emit = defineEmits<{
  (e: "change", id: number): void;
  (e: "update", value: string): void;
}>();
const jumpPage = () => {
  window.open(props.url);
};
</script>

父组件 标签内传递数据给子组件
传递参数给iframe-content组件

<script setup lang="ts">
// @ts-ignore
import IframeContent from "../iframe/IframeContent.vue";
import { reactive} from "vue";
interface contentType {
  url: string;
  title: string;
  kind:string;
}
const contentConfig: contentType = reactive({
  url: "url",
  title: "title",
  kind:'kind'
});

</script>

<template>
  
          <iframe-content
            :url="contentConfig.url"
            :title="contentConfig.title"
            :kind="contentConfig.kind"
          />
</template>

💖 子组件传递事件给父组件使用emit

子组件

<template>
  <div class="iframe-container">
    <div class="iframe-content" v-if="!isPage&&!isModel">
      <div style="width: 100%">
        <span> 标题：{{ title }} </span>
        {{kind}}
        <a-button
          @click="jumpPage"
          type="primary"
          style="float: right; margin: 5px"
        >
          跳转</a-button
        >
      </div>
      <iframe :src="url" class="iframe-box"></iframe>
    </div>
    <div class="iframe-content" v-else-if="!isModel">
      <UserTable></UserTable>
    </div>
    <div class="iframe-content" v-else>
      <ChatTable></ChatTable>
    </div>
  </div>
</template>
<script lang="ts" setup>

import {computed} from 'vue'
// @ts-ignore
const props = defineProps<{
  url: string;
  title: string;
  kind: string;
}>();

const isPage=computed(()=>{
  console.log('props',props)
  return props.kind=='page'
})

const isModel=computed(()=>{
  console.log('props',props)
  return props.kind=='model'
})

const emit = defineEmits<{
  (e: "change", id: number): void;
  (e: "update", value: string): void;
}>();
const jumpPage = () => {
  window.open(props.url);
};
</script>

父组件通过@绑定事件change和update就能接受子组件触发的change和update事件

💖 父组件获取子组件实例使用Ref

通过使用ref绑定formRef去获取校验事件

<template>
  <div class="container">
    <div class="loginUser-container">
      <div class="loginUser-title">管理平台</div>
      <a-form
        :model="state.formState"
        :label-col="state.layoutConfig.labelCol"
        :wrapper-col="state.layoutConfig.wrapperCol"
        :rules="state.formRule"
        ref="formRef"
        layout="vertical"
        autocomplete="off"
      >
        <a-form-item label="账号" name="username">
          <a-input
            v-model:value="state.formState.username"
            allowClear
            placeholder="请输入账号"
            :disabled="state.spinning"
          />
        </a-form-item>

        <a-form-item label="密码" name="password">
          <a-input-password
            v-model:value="state.formState.password"
            :disabled="state.spinning"
            allowClear
            placeholder="请输入密码"
          />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="state.wrapperCol">
          <a-checkbox
            v-model:checked="state.formState.remember"
            :disabled="state.spinning"
            >记住密码</a-checkbox
          >
        </a-form-item>

        <a-form-item :wrapper-col="state.submitWrapperCol" class="submit-box">
          <a-button
            type="primary"
            html-type="submit"
            @click="loginAction"
            :loading="state.spinning"
            style="width: 100%; font-size: 16px; font-weight: bolder"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
      <div class="description">
        <span class="description-prefix">没账号？</span>
        <span
          @click="jumpRegister"
          class="description-after"
          :disabled="state.spinning"
          >去注册</span
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import { loginUser } from "../../service/user/userApi";

import type { FormInstance } from "ant-design-vue";

interface FormStateType {
  username: string;
  password: string;
  remember: boolean;
}
interface FormRuleType {
  username: Object;
  password: Object;
}
interface stateType {
  formState: FormStateType;
  formRule: FormRuleType;
  layoutConfig: any;
  wrapperCol: any;
  submitWrapperCol: any;
  spinning: boolean;
  backgroundImgUrl: string;
}
// 路由
const router = useRouter();
//store
const store = useStore();
const formRef = ref<FormInstance>();
const state: stateType = reactive({
  formState: {
    username: "",
    password: "",
    remember: false,
  },
  spinning: false,
  formRule: {
    username: [{ required: true, message: "请输入账号！" }],
    password: [{ required: true, message: "请输入密码！" }],
  },
  layoutConfig: {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 24,
    },
  },
  wrapperCol: { offset: 0, span: 24 },
  submitWrapperCol: { offset: 0, span: 24 },
  backgroundImgUrl:
    "http://www.yongma16.xyz/staticFile/common/img/background.png",
});
/**
 * 初始化表单内容
 */
const initForm = () => {
  const userInfoItem: any = window.localStorage.getItem("userInfo");
  interface userInfoType {
    username: string;
    password: string;
    remember: boolean;
  }
  const userInfo: userInfoType = userInfoItem
    ? JSON.parse(userInfoItem)
    : {
        username: "",
        password: "",
        remember: false,
      };
  if (userInfo.username && userInfo.password) {
    state.formState.username = userInfo.username;
    state.formState.password = userInfo.password;
    state.formState.remember = userInfo.remember;
  }
};
/**
 * 前往注册！
 */
const jumpRegister = () => {
  // 带 hash，结果是 /about#team
  router.push({ path: "/register" });
};

/**
 * 前往home！
 */
const jumpHome = () => {
  // 带 hash，结果是 /about#team
  router.push({ path: "/" });
};
/**
 * 记住密码
 * @param params
 */
const rememberAction = (params: Object) => {
  window.localStorage.setItem("userInfo", JSON.stringify(params));
};
/**
 * 登录
 */
const loginAction = () => {
  if (formRef.value) {
    formRef.value.validate().then(async (res: any) => {
      state.spinning = true;
      const params = {
        username: state.formState.username,
        password: state.formState.password,
      };
      if (state.formState.remember) {
        rememberAction({ ...params, remember: state.formState.remember });
      }
      try {
        console.log('登录',params)
        // @ts-ignore
        await store.dispatch(
          "user/loginUser",
          params
        );
        // 跳转
        setTimeout(() => {
          jumpHome();
        }, 500);
        state.spinning = false;
      } catch (r: any) {
        message.error(JSON.stringify(r));
        state.spinning = false;
        throw Error(r);
      }
    });
  }
};

onMounted(() => {
  //初始化
  initForm();
});
</script>

⭐总结

综合比较react和vue，对于选型我分成两种情况讨论。

  1. vue项目选型——vue3 vben admin
    a. 外包项目（可维护性强，中文文档多，容错率高）
    b. 国内开发者众多的团队，因为vue中文文档比较多
    c. 使用vue较多的团队，适合快速上手
  2. react项目——qiankun
    a. 自研大型项目（个人觉得react项目不好抄袭）
    b. 外企团队，因为react的文档大部分都是英文
    c. 使用react较多的团队，适合快速上手

个人比较看好vue，有以下3点。
a. 国内开发人数众多，搭建可以用中文在社区交流vue3，扩大国内开发影响力
b. vue3的组件传值等我都比react好用，react用的费劲
c. vue的生态良好，版本也一直在迭代更新

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件_react.js_05

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 感谢你的阅读！


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年12月05日 0

暂无评论

推荐阅读
  hCqS9nAImRxU   2024年05月17日   52   0   0 Vue
  uCg8iP04yNRs   2024年05月17日   49   0   0 Vue
  gYl4rku9YpWY   2024年05月17日   57   0   0 Vue
  uCg8iP04yNRs   2024年05月17日   30   0   0 Vue
  xfU1fQ69BoWe   2024年05月20日   83   0   0 JavaScript
  3A8RnFxQCDqM   2024年05月20日   60   0   0 Vue
  uCg8iP04yNRs   2024年05月18日   69   0   0 JavaScript
  hGgw0bajsGf1   2024年05月18日   96   0   0 Vue
  f18CFixvrKz8   2024年05月20日   90   0   0 JavaScript
  VS6kEJaSGjz7   2024年05月20日   79   0   0 JavaScript
  uCg8iP04yNRs   2024年05月17日   46   0   0 JavaScript
  yCJS27XXARYK   2024年05月17日   50   0   0 JavaScript
  fxrR9b8fJ5Wh   2024年05月17日   52   0   0 JavaScript
  XTMpiCm7c52e   2024年05月17日   57   0   0 JavaScript
  Wo2WjWKSubMZ   2024年05月17日   50   0   0 Vue
  uCg8iP04yNRs   2024年05月17日   52   0   0 Vue
  onf2Mh1AWJAW   2024年05月17日   60   0   0 Vue
  3A8RnFxQCDqM   2024年05月17日   59   0   0 Vue
  0LYBELHOQl6a   2024年05月17日   62   0   0 Vue
  uCg8iP04yNRs   2024年05月17日   51   0   0 Vue
6DMaaPzJglxt
6DMaaPzJglxt
作者其他文章 更多
git初始化管理远程仓库

2023-12-05

THREE实战4_3D纹理

2023-12-05

数据库简答题考点1

2023-12-05

SQL的数据定义

2023-12-05

操作系统简答题考点

2023-12-05

C语言实现插入排序

2023-12-05

尾插法建立链表

2023-12-05

webgl学习笔记2_javascript基础快速学习

2023-12-05

vs2019中同步到github上的用户名错误_控制面板和vs的git全局设置重新登录

2023-12-05

考古Servlet+JDBC实现简约的登录注册界面

2023-12-05

最新推荐 更多
终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

2024-05-20

博客园美化：增加顶部炫彩loading进度条

2024-05-20

lodash已死？radash库方法介绍及源码解析 —— 函数柯里化 + Number篇

2024-05-20

TypeScript入门介绍

2024-05-20

XML Schema 复杂元素类型详解：定义及示例解析

2024-05-20

什么是单点登录？如何实现？

2024-05-20

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

2024-05-18

解释下什么是事件代理？应用场景？

2024-05-18

Vue项目中有封装过axios吗？主要是封装哪方面的？

2024-05-17

浅谈Vue.js与原生开发

2024-05-17

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

2024-05-17

Vue模板语法、属性绑定、条件渲染的学习

2024-05-17

vue3编译优化之“静态提升”

2024-05-17

VUE-局部使用

2024-05-17

你是怎么处理vue项目中的错误的？

2024-05-17

实现抖音 “视频无限滑动“效果

2024-05-17

说说webpack proxy工作原理？为什么能解决跨域?

2024-05-17

我为什么还要造一个前端轮子？

2024-05-17

一款摸鱼神器！帮助你利用上班时间背单词！

2024-05-17

next-route

2024-05-17

常用标签
数据数据数据数据javalinuxlinuxpythonCentOSredisJavapython区块链技术区块链信息系统字符串MySQL资讯项目管理mysql教程MySQL