ReactJS重新渲染/重绘服务器生成的视图

Question

So I have this app, Lets say it is similar to Facebook posting something on your wall,

Everything is rendered on a PHP server / Codeigniter Framework and sent to the client, I need these posts to be rendered using ReactJS because I have awesome things I like to do inside each of these post

1. Like
2. Comment
3. Edit / Report

I DO NOT WANT TO USE V8JS, because the client can not play with the php servers, just need the php script to work that's it,

Any thoughts how I could do this guys? Thanks so much,

One Idea is to may be,

Load the posts as server rendered and then do a GET request and render the same posts again using ReactJS? Will that work?

Or is there a way to attach all ReactJS functions and events to a server rendered html page?

Answer 1

For React on the client/web browser to attach to an existing DOM structure (that was server rendered for example), it uses an attribute called data-react-checksum which is added to the root DOM element. Calling React.renderComponentToString for example will include this attribute.

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

When you call renderElement on the same root element, React executes as normal calling render, etc. But, at the end of the render cycle, the data-react-checksum is compared to what was locally computed. If the value matches what was already in the DOM (provided by the server), the Virtual DOM attaches to the existing DOM elements. But to do that, as I mentioned it must match exactly.

Further, you'd need to also include the data-reactid attribute on the DOM elements that would be normally associated with React's virtual DOM.

If you can't execute the React render pipeline on the web server, you should rely on using Ajax to fetch the data. You could render the entire page via PHP, then fetch the data on the client and re-render the page. But, you'll need to decide if that makes sense for your application and users.

I'd suggest you consider just using React for the interactive sections of your web page, and construct those entire on the client as needed.