unijs路由切换后没有走render方法

一、unijs路由切换后没有走render方法

需求是用openlayers在uniapp框架下做一个移动gis类的软件，选择用renderjs实现地图与dom的交互，一开始也是小白，通过百度资料以及一步步测试后掌握了renderjs的使用，以及地图功能的实现。renderjs主要服务于APP，因为uni-app为vue+js+html进行编写，整个是h5的技术栈。而app上并没有document等基础对象。那么，涉及到这些的前端类库就无法使用，例如html2、canvas、canvas2、image。而要用这些怎么办，这是用就出现了renderjs这种视图层工具来进行渲染。

大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）

在视图层操作dom，运行for web的js库（可以操作dom，意味着拥有window、document等这些全局变量，在app-vue的service层没有这1.原生层数据通过监听传入renderjs层(可以通过调用原生层的方法触发)

2.直接调用renderjs层方法传出数据注意：1.在renderjs层不能使用uni或其他框架的API，例如uni.request、uni.getlocation等等方法，需在原生层调用后触发监听将数据传入。

2.在APP端renderjs层的data与原生层的data互不相干

3.this.$ownerInstance.callMethod方法必须通过点击事件执行

4.地图方法都要写在renderjs层中，不能使用子组件需要自己自定义一个按钮，点击按钮后才能获取到值。renderjs代码页面

二、Vue - 渲染函数render

1、简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

2、当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h

3、示例：分别使用html语法和render函数来实现根据传入的 level（h1-h6）页面渲染不同的标题格式

4、【2】使用render函数的形式（修改child1子组件）

5、 render函数即渲染函数，它是个函数，render函数的返回值是VNode（即：虚拟节点，也就是我们要渲染的节点）

6、 createElement是 render函数的参数，它本身也是个函数，并且有三个参数。接来下我们重点介绍这三个参数

7、【1】createElement第一个参数是必填的，可以是String| Object| Function

8、【2】createElement第二个参数是选填的，一个与模板中属性对应的数据对象****常用的有class| style| attrs| domProps| on

9、【3】createElement第三个参数是选填的，代表子级虚拟节点(VNodes)，由 createElement()构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的

10、在render函数中，没有提供v-model的实现，所以你必须自己实现相应的逻辑。这就是深入底层的代价，但与v-model相比，这可以让你更好地控制交互细节。

11、对于.passive，.capture，.once这些事件修饰符, Vue提供了相应的前缀可以用于 on

12、 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

13、复杂的render函数书写异常痛苦，这就是为什么会有一个Babel插件，用于在 Vue中使用 JSX语法，它可以让我们回到更接近于模板的语法上。

14、 JSX语法学习文档: vuejs/JSX JSX语法简介

三、render方法的原理是什么呢,在什么时候触发呢

1、React中的render方法是核心，它负责在组件更新时生成虚拟DOM，并将虚拟DOM与实际DOM进行比较，从而只更新需要改变的部分，提升性能。

2、render方法有两种形式。在其中，JSX代码通过babel编译后转换成JS格式，本质上，就是利用React的createElement方法来创建虚拟DOM节点。

3、虚拟DOM最终会被渲染为实际的DOM元素。更新过程中，React调用render方法返回的虚拟DOM树与旧的虚拟DOM进行差异比较，仅更新需要变化的部分，以此提高效率。

4、render方法何时触发呢？在类组件中，当调用setState更新状态时，会触发render方法。而在函数组件中，使用useState hook更新状态时，若状态未发生变化，render方法不会被触发。

5、总结来说，render方法是React组件更新机制的关键，它通过虚拟DOM与实际DOM的比较，实现高效的组件渲染与更新。在类组件中，通过setState来触发渲染；而在函数组件中，使用useState hook更新状态时，只有状态发生变化时才会触发渲染，避免无谓的更新操作，优化性能。