支持复杂场景的vue和react集成引用的JS插件

Posted 2023-03-29

参考技术A 众所周知，React更纯粹，Vue做的封装更多，所以大多数的难度都是集中在react的组件引用vue组件的过程中

请参考 https://github.com/devilwjp/vuereact-for-vuecli3-demo

请参考 https://github.com/devilwjp/vuereact-for-cra-demo

由于react hooks的取名规范是use开头，所以将use开头的方法全部修改成了apply开头，老的use开头方法仍然有效

在react组件中使用vue组件，如果要使用vue的sync修饰，使用 sync <Object>

在react组件中使用vue的组件

在react组件中，向vue组件传递具名插槽和作用域插槽，以及绑定自定义事件，以及v-model应用
react本身并不支持v-model，所以需要通过 model的value和setter也不需要变化

在react组件动态引用vue组件，类似vue的<component />

与react不同，vue有全局注册组件的功能，使每个组件不需要再单独引入
将vue全局组件的id作为参数传入applyVueInReact中，或者将id作为component属性的值传入VueContainer中
示例：在react中使用全局的vue版本element-ui的DatePicker

在Vue的组件中使用React组件

在Vue组件中，向React组件传递具名插槽和作用域插槽，以及绑定自定义事件
由于React没有插槽的概念，所有都是以属性存在，Vue的具名插槽和作用域插槽会被转化为React的属性，其中作用域插槽会转换成render props的方式
并且Vue组件的事件也会被转化成React的属性

比如react版本的antd的Card组件，在react中的使用示例如下

react版本的antd，在vue组件中使用的示例如下

作用：使得所有的Vue组件可以使用redux的状态管理
对工具包开启redux状态管理，这个场景一般存在于以React为主的项目中，为了使Vue组件也可以共享到redux，需要在项目的入口文件引入applyRedux方法（整个项目应该只引一次），将redux的store以及redux的context作为参数传入（或者至少在redux的Provider高阶组件引入的地方使用applyRedux方法）

React组件连接redux的方式这里就不再做介绍了，应该使用react-redux的connect方法
这里介绍Vue组件如何使用redux，工具包尽可能的实现了vue组件使用vuex的方式去使用redux，通过vm.$redux可以在组件实例里获取到redux状态管理

作用：使得所有的Redux组件可以使用Vuex的状态管理
对工具包开启vuex状态管理，这个场景一般存在于以Vue为主的项目中，为了使React组件也可以共享到vuex，需要在项目的入口文件引入applyVuex方法（整个项目应该只引一次），将vuex的store作为参数传入

类似react-redux的connect方法，在React组件中使用，由于vuex的关键字比redux多，所以将参数改成了对象，包含了mapStateToProps、mapCommitToProps、mapGettersToProps、mapDispatchToProps，每个都是一个纯函数，返回一个对象（和redux的connect使用方式完全一致）

在React的router里懒加载Vue组件

在Vue的router里懒加载React组件

每个通过applyVueInReact的的vue组件，以及通过applyReactInVue的react组件，都可以收到一个data-passed-props的属性，这个属性可以帮助你不做任何包装的，被之后再次使用applyVueInReact或applyReactInVue的组件收到全部的属性（由于是跨框架透传，原生的透传方式并不会自动做相应的封装和转换）

由于在每一次跨越一个框架进行组件引用时，都会出现一层包囊，这个包囊是以div呈现，并且会被特殊属性标注
React->Vue，会在vue组件的dom元素外包囊一层标识data-use-vue-component-wrap的div
Vue->React，会在react组件的dom元素外包囊一层标识__use_react_component_wrap的div
如果引发样式问题，可以全局对这些标识进行样式修正