ReactJs和React Native的关系

最新推荐文章于 2025-06-16 15:53:05 发布

原创最新推荐文章于 2025-06-16 15:53:05 发布 · 1.1w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#ReactJs和React Native的关系

本文探讨了React与ReactNative的基本概念及其工作原理。React旨在使前端视图组件化并简化DOM操作；ReactNative则利用前端技术开发原生移动应用。两者都采用组件化开发，并通过虚拟DOM提高渲染效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习和开发react native的过程中，看了社区很多大牛的的文章，自己总结的一些东西。

1.react Js的目的是为了使前端的V层更具组件化，能更好的复用，它能够使用简单的html标签创建更多的自定义组件标签，内部绑定事件，同时可以让你从操作dom中解脱出来，只需要操作数据就会改变相应的dom。

2.react native的目的是用前端的技术将jsx通过babel编译成reactElement，在创建对应的原生组件在移动端运行的app，但是性能可能比原声app差一点。

3.react和react native的底层原理是相同的，都是使用js实现虚拟dom树来驱动页面的渲染，react是驱动HTML dom的渲染，react native是驱动原生组件的渲染。

4.二者都是基于组件（component）开发，然后组件和组件之间通过props传递方法，每个组件都有一个状态（state），当某个方法改变了这个状态值时，整个组件就会重绘，从而达到刷新。另外，说到重绘就要提到虚拟dom了，就是用js模拟dom结构，等整个组件的dom更新完毕，它会有一个diff的过程，对比出哪些组件发生了变化，然后才渲染到页面，简单来说只更新了相比之前改变了的部分，而不是全部刷新，所以效率很高。

虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。