什么叫前后端同构？
为领会决某些问题（好比SEO、提拔衬着速度等）react供给了2个办法在办事端生成一个HTML文本格局的字符串。在得到了那个HTML格局的字符串之后，凡是会将其组拆成一个页面间接返回给用户的阅读器。
到那里，办事端的活已经干完了，然后就是阅读器那边干活。
阅读器拿到HTML文本后，立即停止衬着将内容呈现给用户。然后加载页面所需的 .js 文件，然后施行JavaScript脚本，然后起头初始化react组件…………
到那里问题就来了。react初始化组件后会施行组件内所有render ()办法，然后生成虚拟DOM的树形构造，然后在恰当的时候将虚拟dom写到阅读器的实在dom中。因为react老是按照虚拟dom来生成实在dom，所以最初会把办事器端衬着好的HTML全数替代掉。
上面那个工作说不是问题确实也不是问题，无非就是用户看到页面然后闪现一下。说是问题还实是个问题，产物会拿着那弊端从用户体验的角度在各类场所和你死磕半个月。磕累了你索性把办事端衬着关了，然后运营又拿着SEO的问题筹办和你起头撕逼了。
伶俐如 Facebook 的工程师当然想到了那些问题，所以他们在ReactDOMServer.renderToString(element) 办法中供给了一个checksum机造。
关于checksum官网 并没有太多介绍，但是国表里的各路博客介绍了很多。我不断想找react开发者关于那个机造的介绍不断没找到……。
前后端同构就是包管前端和后端的dom构造一致，不会发作反复衬着。react利用checksum机造停止保障。
什么叫React首屏衬着？
简单的说就是react在阅读器内存中第一次生成的虚拟 dom 树。切记是虚拟 dom ，而不是阅读器的dom。
领会react的应该晓得，所有react组件都有一个render()办法（若是利用function体例编写的组件会把function里的所有代码都塞到render()办法中去）。当ReactDOM.render( element, container, [callback] )办法施行时，会施行以下步调：
所有组件的会先辈行初始化（es6施行构造函数）。所有组件的render()办法会被挪用一次，完成那个过程后会得到一颗虚拟的 dom 树。react会将虚拟dom转换成阅读器dom，完成后挪用组件的componentDidMount()办法告诉你已经拆载到阅读器上了。在上面那个过程成中，步调2完成后即为完成react的首屏衬着。连系checksum机造步调3有可能不会施行。
当组件形态发作变动时（setState()生命周期函数被挪用）或者 父组件衬着时（父组件的render()办法被挪用），当前组件的render()办法城市被施行，都有可能会招致虚拟dom变动，但是那些变动和首屏衬着没任何关系了。
React前后端同构首屏衬着
领会了同构和首屏衬着，就好理解若何处理首屏不反复衬着的问题了。
起首办事端衬着完之后会有一个checksum值写在根元素的属性上：
那个checksum是按照办事端生成的HTML内容哈希计算得到的。
然后在阅读器加载完所有的js文件之后，起头施行前面介绍的ReactDOM.render( element, container, [callback] )初始化衬着的三个步调。当施行完第二步生成虚拟dom后，react会根虚拟dom用不异的算法计算一个哈希值，若是和checksum一致则认为办事器已经完成衬着，不会再施行第三步。
若是checksum比对纷歧致，在开发情况和测试情况会在阅读器console中输出以下警告内容：
消费情况不会输出任何警告。
同构衬着的内容就那么多，原理其实蛮简单的，无非就是包管DOM一致。但是连系代码分片、异步加载、办事端调接口异步组拆数据等等功用后，若何包管办事端和阅读器端第一次衬着的dom一致还得花很多功夫。不外原理清晰了，工作总能办成。
评论列表