草庐IT

javascript - React Native 有 'Virtual DOM' 吗？

coder 2023-07-05 原文

来自 ReactJS wiki关于虚拟 DOM 的页面:

React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change.

换句话说，Virtual DOM 允许我们通过避免直接操作 DOM 来提高性能。

但是React Native呢？ ？

我们知道，理论上在其他平台上有原生 View 和 UI 组件。 DOM 本身没有任何内容。 那么我们可以说 React Native 有“虚拟 DOM”还是我们在谈论其他东西？

例如，有一个section在 Weex specs 描述了直接使用 DOM 树的方法。我的假设是，我们可能认为 React Native 也应该有某种 DOM 树以及“虚拟 DOM”抽象层，这是 React 本身的主要思想。

所以我的问题是:

React Native 是否有某种“虚拟 DOM”(或其表示)？如果有，这种“虚拟 DOM”如何移植到各种平台？

更新:

这个问题的目的是阐明 React Native 如何管理原生 UI 组件的呈现。是否有任何具体方法，如果有，它的正式名称是什么？

更新 2:

This article描述了名为 Fiber 的新 React 架构这看起来像是这个问题的答案。

最佳答案

简而言之

嗯..本质上，是的，就像 Reactjs 的虚拟 DOM 一样，React-Native 创建了一个树层次结构来定义初始布局，并在每次布局更改时创建该树的差异以优化渲染。除了 React-Native 通过几个架构层管理 UI 更新外，这些架构层最终会转换 View 的呈现方式，同时尝试将更改优化到最低限度，以提供尽可能快的呈现。

更详细的解释

为了了解 React Native 如何在后台创建 View ，您需要了解基础知识，为此，我宁愿从头开始

1.Yoga布局引擎

Yoga是一个用 C 语言编写的跨平台布局引擎，它通过绑定(bind)到 native View (Java Android Views/Objective-C iOS UIKit)来实现 Flexbox。

React-Native 中各种 View 、文本和图像的所有布局计算都是通过 yoga 完成的，这基本上是我们的 View 显示在屏幕上之前的最后一步

2。影子树/影子节点

当 react-native 发送渲染布局的命令时，一组影子节点被组装起来构建影子树，它代表布局的可变 native 端(即:用相应的 native 各自语言编写，Android 的 Java 和iOS 的 Objective-C)然后转换为屏幕上的实际 View (使用 Yoga)。

3。 View 管理器

ViewManger 是一个接口(interface)，它知道如何将从 JavaScript 发送的 View 类型转换为它们的 native UI 组件。 ViewManager 知道如何创建影子节点、原生 View 节点以及更新 View 。 在 React-Native 框架中，有很多 ViewManager 可以使用原生组件。 例如，如果有一天你想创建一个新的自定义 View 并将其添加到 react-native，那么该 View 将必须实现 ViewManager 接口(interface)

4。用户界面管理器

UIManager 是拼图的最后一 block ，或者实际上是第一 block 。 JavaScript JSX 声明性命令作为命令式命令发送到 native ，告诉 React-Native 如何布局 View ，逐步迭代。 因此，作为第一个渲染，UIManager 将调度命令以创建必要的 View ，并将随着应用程序的 UI 随时间的变化而继续发送更新差异。

所以React-Native基本上还是利用了Reactjs的能力来计算之前和当前渲染表现的差异，并据此将事件派发给UIManager

要更深入地了解该过程，我推荐以下 presentation通过 Emil Sjölander来自弗罗茨瓦夫 React-Native EU 2017 大会

关于javascript - React Native 有 'Virtual DOM' 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41804855/

javascriptampReactNativenoreferrerreactjsreact-nativevirtual-domreact-fiber

有关javascript - React Native 有 'Virtual DOM' 吗？的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  4. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  5. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  6. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  7. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  8. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  9. ruby-on-rails - Rails 中的 NoMethodError::MailersController#preview undefined method `activation_token=' for nil:NilClass - 2

    似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节，但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关，我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中，但到目前为止，我还看不出我输入的内容与教程中的内容有什么区别。到目前为止，建议是在函数定义中添加或删除参数user，但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai

  10. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

随机推荐