react和vue的组件通信

组件通信

vue

  • 属性传递
  • 发布订阅(EventBus):$on / $emit
  • Provied / inject
  • slot
  • $parent / $children
  • vuex
    react
  • 属性
  • 发布订阅
  • React.createContext
  • redux / react-redux / mobix / dva

通过属性传递,属性传递有什么问题:只能父传给子,子不能传给父

  • 实现子能传给父,子能改父(vue属性+发布订阅):vue通过发布订阅实现子改父:在父亲里订阅一个方法,在子里通过$emit触发执行,触发执行时能把儿子的东西传给父亲
  • react通过传回调函数,:父传子 通过属性
    子改父:父亲把自己的方法当做属性传给儿子的时候,儿子拿到父亲的方法,在儿子里把方法执行了
    react需自己实现发布订阅,vue自带 o n / on/ emit模式
    所以,在真实项目中,vue通过 属性+发布订阅为主实现父子组件通信
    react通过 属性+回调函数实现父子通信

祖先元素和各个后代元素的通信:
Provide/inject或者 react的createContext,
把所有后代元素用到的信息全部放到祖先元素的上下文中,后代元素想用的时候,直接拿来用
A和B有共同的祖先,A和B通信:把信息传给祖先,A和B都能在祖先里拿信息(麻烦)

vue提供了slot插槽,调取组件的时候,单独给这个组件传递一些信息

任意组件之间的通信:只能用本地存储方案
vuex,redux的公共状态管理(存在虚拟内存里,性能优化)一刷新就没了:
localstorage(存在浏览器)持久化存储:app首页显示的数据,(首页内容不经常变,10min左右):向Locastorage存的时候设置存储时间,取出的时候算一下时间,超过10Min就重新去服务器获取. 5兆
cookie 自己能设置时间,但有大小限制 4k:客户端存储
session 服务器端存储
服务器设置session,服务器返回给客户端的信息,在响应头中带着set-cookie = ‘connect sid’ 当前客户端和服务器端建立唯一标识的sessionId。
客户端拿到值后,会把信息种植到本地cookie,“httponly”只能看,不能改
客户端再次向服务器发送请求的时候,会默认在请求头中cookies把connect sid发送给服务器
cookie能和服务器传来传去,服务器设置的session的时间都是cookie的过期时间(一致)

在这里插入图片描述

发布了149 篇原创文章 · 获赞 5 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_26327971/article/details/105167265