zoukankan      html  css  js  c++  java
  • 从小程序看react

    小程序采用双线程模型,这里主要是为了安全,采用双线程模型是指 一个线程负责渲染界面,一个线程负责执行js代码。那么 两个线程是如何合作的呢?

    渲染线程需要监听用户的事件,然后通知到执行线程,同样 执行线程如果希望更改界面,也需要通知到渲染线程,如何开辟一个线程来运行js代码,下面我们讨论这三个问题。
    第一个问题 可以采用react的事件机制来解决:
    https://www.cnblogs.com/forcheng/p/13187388.html

    第二个关于界面的渲染:
    通过createElement方法创建出node对象,此为新的Node对象,保存到新的虚拟dom对象中,框架中使用setTimeout或者promise 循环对比新老虚拟dom,在不断的对比中不断得到差异,然后不断更新dom。在这里 更新dom的频率远远低于createElement被调用的次数,所以 需要建立一个缓存机制,将多次的createElement操作汇聚在一起,然后最后一起对比。

    第三个问题:
    第三个问题实际上和react没有关系,它涉及到的知识点更加多,包括线程,web core, js core,事件循环等多个知识点。

    客户端提供js运行环境,业务层代码与渲染层通过标记位联系,在webview加载了一个组件后,通知执行线程加载对应的业务代码,执行线程 获取到对应的业务代码后,放在js core里面执行,业务代码内部 如果调用了setData则 会通过native通知到渲染线程,渲染线程使用虚拟dom维护 data。同时 渲染线程在接受到事件后,将事件通知到执行线程,执行线程执行该事件。

    react原理:
    react通过组件树构建出node树,然后通过对比新老node树完成界面更新,同时通过自己的事件机制完成 组件与事件的绑定。


    虚拟dom实现了 按照业务逻辑绘制界面的诉求
    事件机制实现了 渲染端与业务代码端的分离
    事件循环实现了充分利用cpu的能力和避免多线程编程的困难
    JS Core提供了单独的js运行环境,使得界面绘制与代码执行在物理层面隔离开来
    组件化实现了代码复杂度的降低

  • 相关阅读:
    Maven关于web.xml中Servlet和Servlet映射的问题
    intellij idea的Maven项目运行报程序包找不到的错误
    修改Maven项目默认JDK版本
    刷题15. 3Sum
    刷题11. Container With Most Water
    刷题10. Regular Expression Matching
    刷题5. Longest Palindromic Substring
    刷题4. Median of Two Sorted Arrays
    刷题3. Longest Substring Without Repeating Characters
    刷题2. Add Two Numbers
  • 原文地址:https://www.cnblogs.com/mrzhu/p/13574281.html
Copyright © 2011-2022 走看看