社区首页 >问答首页 >ReactJS重新呈现/重绘服务器生成的视图

问ReactJS重新呈现/重绘服务器生成的视图
EN

Stack Overflow用户

提问于 2015-05-29 03:00:01

回答 1查看 141关注 0票数 0

所以我有这个应用程序，让我们说它类似于Facebook在你的墙上发布的东西，

所有内容都是在PHP / Codeigniter上呈现并发送给客户端的，我需要使用ReactJS来呈现这些帖子，因为我喜欢在这些帖子中做一些很棒的事情

喜欢
评论
编辑/报告

我不想使用V8JS，因为客户端不能玩php服务器，只需要php脚本就行了，

有什么办法让我这么做吗？非常感谢，

一种想法是，

加载服务器呈现的帖子，然后执行GET请求，然后使用ReactJS再次呈现相同的帖子？那能行吗？

还是有一种方法可以将所有ReactJS函数和事件附加到呈现的html页面的服务器上？

EN

回答 1

Stack Overflow用户

发布于 2015-05-29 04:18:42

为了在客户机/web浏览器上作出反应，将其附加到现有的DOM结构(例如服务器呈现)，它使用一个名为data-react-checksum的属性，该属性被添加到根DOM元素中。例如，调用React.renderComponentToString将包含此属性。

<div data-react-checksum="452232529">

当您在同一个根元素上调用renderElement时，React作为普通调用render执行，等等。但是，在render循环结束时，将data-react-checksum与本地计算的data-react-checksum进行比较。如果该值与DOM (由服务器提供)中的内容相匹配，则Virtual将附加到现有的DOM元素。但要做到这一点，正如我提到的，它必须完全匹配。

此外，您还需要在DOM元素上包含data-reactid属性，这些元素通常与React的虚拟DOM相关联。

如果无法在web服务器上执行React呈现管道，则应该使用Ajax来获取数据。您可以通过PHP呈现整个页面，然后在客户端获取数据并重新呈现页面。但是，您需要决定这对您的应用程序和用户是否有意义。

我建议您考虑只对web页面的交互部分使用React，并根据需要在客户机上构建这些部分。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30527842

复制

相关文章

重绘与回流_html回流重绘

渲染编程算法

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。也就是我们各种各样的Dom标签

全栈程序员站长

2022/11/01

1.4K0

HTML默认是流式布局，css与js会打破这种布局，改变DOM的几何属性与外观属性。在绘制时根据渲染树布局，再根据布局绘制，这就是回流重绘。

岳泽以

2022/11/21

6390

重排与重绘

原文地址：http://www.cun-xu.cn/index.php/2018/12/25/重排与重绘/

IMWeb前端团队

2019/12/03

1.2K0

回流和重绘

我们要明确页面在文档加载完成之后到完全显示中间的过程是根据文档生成DOM树（包括display:none的节点）在DOM树基础上根据节点的几何属性（margin/padding/width/height等)生成render树（不包括display:none、head节点但会包含visibility:hidden节点）在render树基础上进行进一步渲染包括color,outline等样式 reflow: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 rep

念念不忘

2019/03/29

8800

“重绘” 和 “重排”

重绘是指一个元素外观改变所触发的浏览器行为，大概就是外观属性的改变，像，背景颜色，等

用户3055976

2019/10/31

8030

HTML中的重绘与回流

在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？　　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style Rules一起构建出了Render Tree，对于Render Tree的理解：Render Tree和DOM Tree类似，但是Render Tree能够识别样式，在Render Tree上，每一个node（节点）都有自己的Style（样式），但隐藏的节点或是不会用于显示的部分不会包含在Render Tree上。

刘亦枫

2020/03/19

1.5K0

浏览器的重排重绘

github css https git 开源

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

HZFEStudio

2021/09/12

1.1K0

MFC-4简单的窗口重绘（非部分重绘）

#include <afxwin.h> #include "resource.h" #include <afxtempl.h> //定义模板类的头文件 class MyDocument : public CDocument { public: CArray<CPoint,CPoint &> pArray;//<保存的数据类型,读取保存数据类型的返回值> void AddPoint(CPoint p) { pArray.Add(p); } CPoint GetPoint(int i) {

liulun

2022/05/09

6900

页面优化——重绘和回流[通俗易懂]

渲染 https 网络安全

一、写在前面页面优化在面试的过程中经常遇到的问题，今天就来总计一下重绘和回流的问题。二、重绘和回流是什么我们都知道一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点进行几何布局形成render树(渲染树)，当渲染树构建完成后，页面就根据DOM树开始布局，渲染树也根据设置的样式渲染这些节点。在这一过程中，比如我们删除DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树也发生变化，那么肯定要重新构建DOm树，而DOM树和渲染树紧密相连，DOM树渲染完了，渲染树也会随之进行渲染，这个过程就称为回流。在比如说，我们给一个元素修改颜色，这样的行为是不会影响页面的布局的，DOM树不会发生改变，但是颜色变了，渲染树得重新绘制，这就是重绘。所以说回流一定会触发重绘，重绘不一定触发回流。题外话： 1、由于display:none的元素不在页面渲染，渲染树的构建不包含这些节点。但是visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。 2、尽量避免使用表格布局，当我们不给表格的td设置固定的宽度的时，一列的td的宽度会以最宽的td的宽作为渲染的标准，假设前几行的td在渲染时都渲染好了，结果下面的某行特别宽，table为了统一宽度，前几行的td会回流重新计算宽度，这是一个比较耗时的操作。三、怎么样减少回流回流会重构DOM树，渲染树也得重新渲染，比较麻烦，哪些行为可以引发回流，如何去避免呢？ 1、DOM的删除行为比如删除某个节点，或者给父元素插入子节点，这类操作都会触发回流。如果我们插入多个子节点的话，可以使用documentfragment。 2、几何属性的变化比如说元素的宽度变了，border变了，字体大小变了，这种直接会引发页面的布局的改变，也会触发回流。如果我们需要改变多个属性，做好的是将这些改变定义在一个class中，直接修改class名，这样只会触发一次回流。 3、元素的位置发生改变修改一个元素的左右margin，padding之类的操作，所以在元素位移的动画，不要更改margin之类的值，使用定位脱离文档流后进行改变位置。 4、获取文章的偏移量之类的属性例如我们需要获取scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性的时候，浏览器为了保证值的正确性也会回流进行获取，所以如果你要不多次操作，最好取完进行缓存。 5、页面初次渲染触发回流页面的初次渲染触发回流这样无法避免。 6、浏览器窗口尺寸的改变 resize事件的发生也会触发回流。

全栈程序员站长

2022/11/17

9460

JS引发页面重排重绘的代价

示例目标是修改div内容，3种实现方式，看下每种方式的执行时间 <html> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> <div id="myDiv3"></div> <script> var times = 10000; // 方式1 console.time(1); for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a'

dys

2018/04/02

1.2K0

DOM优化之重绘和回流

android javascript 渲染费用中心

浏览器内核中的JS 引擎和渲染引擎是独立存在的，当我们用JS去操作DOM时，本质上是JS引擎和渲染引擎之间进行的“跨界交流”。

九旬

2020/10/23

9020

使用重绘项美化WinForm中的控件

如果你觉得项目中的ComboBox、ListBox或其它的Winforms控件不能满足你的显示要求，包括窗体在内很多控件都支持重绘修改显示样式。下面的示例完成对ComBox数据项的重绘，希望能起到抛砖引玉的作用。

张果

2022/05/09

1.1K0

使用重绘项美化WinForm中的控件

你真的了解回流和重绘吗

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。

嘿嘿嘿

2018/12/25

1.3K0

浏览器的回流与重绘 (Reflow & Repaint)

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。会导致回流的操作：

Nealyang

2019/09/29

6890

重绘和回流（Repaint & Reflow），如何优化

由于节点的几何属性发生改变或者由于样式改变而不影响布局的，称为重绘，例如outline,visibility,color,background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点的可见性。

刘嘿哈

2022/10/25

7820

浏览器的渲染流程--重排、重绘、合成

css 渲染编程算法

定义：当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑，重排需要更新完整的渲染流水线，所以开销也是最大的。

用户7741497

2022/03/06

1.1K0

页面重绘和回流（重排）以及优化

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。回流何时发生：

windseek

2018/06/15

1K0

什么是回流与重绘 (Reflow & Repaint)

node.js css api

在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。

w候人兮猗

2020/12/21

8780

你真的了解回流和重绘吗

最近有空对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。

嘿嘿嘿

2018/12/19

5K4

浏览器渲染之回流重绘

渲染 https http 网络安全 css

回流和重绘是前端开发的高频词汇之一，你可以在各种面经，性能优化相关文章可以看到，但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。

政采云前端团队

2021/09/30

1.7K0

相似问题

SvelteJS与ReactJS呈现差异(重绘/再流)

24

如何强制reactJS重绘？

21

快速重绘视图

10

重绘视图Android

10

视图不会重绘

12

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例