【分享】renderjs知识分享

分类：uni-app

DCLOUD社区关于renderjs的资料相当少。这里分享一些实测，同时也方便自己日后查看。

实测后发现，renderjs其实还是蛮简单的，难怪官方给的资料那么少。

<template>  
    <view class="content">  
        <view class="target"  
            :prop="theReactivityStateWhatRenderjsWantToListen"  
            :change:prop="renderjsModuleName.methodName"  
            @click="normalMethod"  
            @click="renderjsModuleName.renderjsMethod">  
            {{otherReactivityState}}  
            <!--  :prop  将逻辑层的某个响应式状态绑定到:prop中，这样就可以在renderjs层监听该响应式状态了-->  
            <!--  :change:prop  指明当renderjs层监听到:prop绑定的逻辑层响应式状态变更时，调用renderjs层的renderjsModuleName.methodName方法来处理它-->  
            <!--第一个click，绑定逻辑层的normalMethod方法；第二个click，绑定renderjs层的renderjsMethod方法。当.target组件被click时，调用其绑定的normalMethod方法或renderjsMethod方法来处理它-->  
            <!--注意：两个click不能同时写，而只能二选一，否则会报错！-->  
            <!--在同一个click中可以同时绑定多个normalMethod，但不能同时绑定多个renderjsMethod，更不能同时混合绑定normalMethod和renderjsMethod-->  
            <!--例如@click="normalMethod1(), normalMethod2()" 是合法的；但@click="renderjsMethod1(), renderjsMethod2()"是不合法的，此时仅renderjsMethod2()有效-->  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            theReactivityStateWhatRenderjsWantToListen: ...,  
            otherReactivityState: ...  
        },  
        medthod: {  
            normalMethod(event) {  
                ...  
            }  
        }  
    }  
</script>  

<script module="renderjsModuleName" lang=renderjs>  
    export default {  
        mounted() {  
            //renderjs模块可以使用vue的除beforeDestroy、destroyed、beforeUnmount、unmounted之外的生命周期钩子。  
        },  
        methods: {  
            methodName(newValue, oldValue, ownerInstance, instance) {  

                //当逻辑层的theReactivityStateWhatRenderjsWantToListen被更新时，也即<template>中被 :prop绑定的逻辑层响应数据被更新时，  
                //此方法，也即<template>中被“:change:prop”绑定的renderjs层的方法，将被调用。  

                //注意参数的顺序  
                   1. newValue：更新后的theReactivityStateWhatRenderjsWantToListen的值  
                   2. oldValue：更新前的theReactivityStateWhatRenderjsWantToListen的值  
                   3. ownerInstance：Instance的owner，触发本方法的组件所在的组件的 ComponentDescriptor 实例  
                   4. Instance：触发本方法的组件的 ComponentDescriptor 实例  
                   5. 如果没猜错，ownerInstance和Instance应该分别是模板中”.content“组件和”.target"组件的ComponentDescriptor实例  
            },  
            renderjsMethod(event, ownerInstance) {  
                ....  
                //renderjs层可以通过ownerInstance.callMethod方法调用逻辑层的方法，并在调用时向被调用的方法传入参数（parameter）  
                ownerInstance.callMethod('normalMethod', parameter)  
            }  
        }  
    }  
</script>

在上述模板中，

”:prop“用于绑定逻辑层中的希望被renderjs模块侦听的响应式数据，例如上例中的theReactivityStateWhatRenderjsWantToListen。
”:change:prop“用于指定当 ”:prop“绑定的响应式数据更新时renderjs模块需要调用的方法，例如上例中的renderjsModuleName.methodName方法。
通过更新逻辑层的theReactivityStateWhatRenderjsWantToListen，就可以自动调用renderjs层的renderjsModuleName.methodName，这是逻辑层（<script>中的代码，单独占用一个线程）调用视图层（或称renderjs层。<template>模板和renderjs代码，它们共用另一个线程）的机制。
renderjs层可以通过ownerInstance.callMethod方法调用逻辑层的方法，并在调用时向被调用的方法传入参数（parameter），这是视图层（或称渲染层、renderjs层。<template>模板和renderjs代码，它们共用一个线程）调用逻辑层（<script>中的代码，单独占用另一个线程）的机制。
在@click这样的事件中，特别是在touchmove这样的频繁视图（跟手操作）事件中，可采用绑定“renderjs模块名.renderjs方法名”的方法，使renderjs层的事件处理方法响应事件，从而减少视图层和逻辑层间的相互通讯，提高性能。

一个很重要的问题：得到ComponentDescriptor后，可以做什么？
下面这个页面告诉你一切：WXS响应事件
ComponentDescriptor本是微信特有的；但renderjs也实现了这个接口，所以该接口renderjs也能用。

1 赞关注分享