React直出实现与原理

前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出。 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢?

为什么MVVM不能做直出?

对于MVVM,HTML片段即为配置,而直出后的HTML无法还原配置,所以问题不是MVVM能否直出,而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子:

<sapn>Hello {name}!</span>

上面这段HTML配置和数据在一起,直出后会变成:

<span>Hello world!</span>

这时候当我们失去了name的值改变的时候会导致页面渲染这个细节。当然,如果为了实现MVVM直出我们可能有另外的方法来解决,例如直出结果变成这样:

<span>Hello <span q-text="name">world</span>!</span>

这时候我们是可以把丢失的信息找回来的,当然结构可能和我们想象的有些差别。当然还有其他问题,例如直出HTML不一定能反向还原数据,由于篇幅问题,这里不展开讨论。

React如何直出?

如图:

  • React的虚拟DOM的生成是可以在任何支持Javascript的环境生成的,所以可以在NodeJS或Iojs环境生成
  • 虚拟DOM可以直接转成String
  • 然后插入到html文件中输出给浏览器便可

具体例子可以参考,https://github.com/DavidWells/isomorphic-react-example/,下面是其渲染路由的写法:

// https://github.com/DavidWells/isomorphic-react-example/blob/master/app/routes/coreRoutes.js

var React = require('react/addons');
var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);

module.exports = function(app) {

    app.get('/', function(req, res){
        // React.renderToString takes your component
        // and generates the markup
        var reactHtml = React.renderToString(ReactApp({}));
        // Output html rendered by react
        // console.log(myAppHtml);
        res.render('index.ejs', {reactOutput: reactHtml});
    });

};

OK,我们现在知道如何利用React实现直出,以及如何前后端代码复用。

但还有下面几个问题有待解决:

  • 如何渲染文字节点,每个虚拟DOM节点是需要对应实际的节点,但无法通过html文件生成相邻的Text Node,例如下面例子应当如何渲染:
React.createClass({
   render: function () {
          return (
                     <p>
                         Hello {name}!          
                         
                      </p>
     );   
  } 
})
  • 如何避免直出的页面被React重新渲染一遍?或者直出的页面和前端的数据是不对应的怎么办?

相邻的Text Node,想多了相邻的span而已

通过一个简单的例子,我们可以发现,实际上React根本没用Text Node,而是使用span来代替Text Node,这样就可以实现虚拟DOM和直出DOM的一一映射关系。

重复渲染?没门

刚刚的例子,如果我们通过React.renderToString拿到<Test />可以发现是:

<p data-reactid=".0" data-react-checksum="-793171045"><span data-reactid=".0.0">Hello </span><span data-reactid=".0.1">world</span><span data-reactid=".0.2">!</span></p>

我们可以发现一个有趣的属性data-react-checksum,这是啥?实际上这是上面这段HTML片段的adler32算法值。实际上调用React.render(<MyComponent />, container);时候做了下面一些事情:

  • 看看container是否为空,不为空则认为有可能是直出了结果。
  • 接下来第一个元素是否有data-react-checksum属性,如果有则通过React.renderToString拿到前端的,通过adler32算法得到的值和data-react-checksum对比,如果一致则表示,无需渲染,否则重新渲染,下面是adler32算法实现: ```javascript var MOD = 65521;

// This is a clean-room implementation of adler32 designed for detecting // if markup is not what we expect it to be. It does not need to be // cryptographically strong, only reasonably good at detecting if markup // generated on the server is different than that on the client. function adler32(data) { var a = 1; var b = 0; for (var i = 0; i < data.length; i++) { a = (a + data.charCodeAt(i)) % MOD; b = (b + a) % MOD; } return a | (b << 16); }

* 如果需要重新渲染,先通过下面简单的差异算法找到差异在哪里,打印出错误:
```javascript/**
 * Finds the index of the first character
 * that's not common between the two given strings.
 *
 * @return {number} the index of the character where the strings diverge
 */
function firstDifferenceIndex(string1, string2) {
  var minLen = Math.min(string1.length, string2.length);
  for (var i = 0; i < minLen; i++) {
    if (string1.charAt(i) !== string2.charAt(i)) {
      return i;
    }
  }
  return string1.length === string2.length ? -1 : minLen;
}

下面是首屏渲染时的主要逻辑,可以发现React对首屏实际上也是通来渲染的:

_mountImageIntoNode: function(markup, container, shouldReuseMarkup) {
    ("production" !== process.env.NODE_ENV ? invariant(
      container && (
        (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
      ),
      'mountComponentIntoNode(...): Target container is not valid.'
    ) : invariant(container && (
      (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE)
    )));

    if (shouldReuseMarkup) {
      var rootElement = getReactRootElementInContainer(container);
      if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
        return;
      } else {
        var checksum = rootElement.getAttribute(
          ReactMarkupChecksum.CHECKSUM_ATTR_NAME
        );
        rootElement.removeAttribute(ReactMarkupChecksum.CHECKSUM_ATTR_NAME);

        var rootMarkup = rootElement.outerHTML;
        rootElement.setAttribute(
          ReactMarkupChecksum.CHECKSUM_ATTR_NAME,
          checksum
        );

        var diffIndex = firstDifferenceIndex(markup, rootMarkup);
        var difference = ' (client) ' +
          markup.substring(diffIndex - 20, diffIndex + 20) +
          '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);

        ("production" !== process.env.NODE_ENV ? invariant(
          container.nodeType !== DOC_NODE_TYPE,
          'You\'re trying to render a component to the document using ' +
          'server rendering but the checksum was invalid. This usually ' +
          'means you rendered a different component type or props on ' +
          'the client from the one on the server, or your render() ' +
          'methods are impure. React cannot handle this case due to ' +
          'cross-browser quirks by rendering at the document root. You ' +
          'should look for environment dependent code in your components ' +
          'and ensure the props are the same client and server side:\n%s',
          difference
        ) : invariant(container.nodeType !== DOC_NODE_TYPE));

        if ("production" !== process.env.NODE_ENV) {
          ("production" !== process.env.NODE_ENV ? warning(
            false,
            'React attempted to reuse markup in a container but the ' +
            'checksum was invalid. This generally means that you are ' +
            'using server rendering and the markup generated on the ' +
            'server was not what the client was expecting. React injected ' +
            'new markup to compensate which works but you have lost many ' +
            'of the benefits of server rendering. Instead, figure out ' +
            'why the markup being generated is different on the client ' +
            'or server:\n%s',
            difference
          ) : null);
        }
      }
    }

    ("production" !== process.env.NODE_ENV ? invariant(
      container.nodeType !== DOC_NODE_TYPE,
      'You\'re trying to render a component to the document but ' +
        'you didn\'t use server rendering. We can\'t do this ' +
        'without using server rendering due to cross-browser quirks. ' +
        'See React.renderToString() for server rendering.'
    ) : invariant(container.nodeType !== DOC_NODE_TYPE));

    se(container, markup);
  }

最后

尝试一下下面的代码,想想React为啥认为这是错误的?

var Test = React.createClass({
  getInitialState: function() {
    return {name: 'world'};
  },
  render: function() {
    return (
        <p>Hello</p>
        <p>
            Hello {this.state.name}!
        </p>
    );
  }
});

React.render(
  <Test />,
  document.getElementById('content')
);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Openlayers4中的全屏

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽...

713
来自专栏PHP实战技术

PHP垃圾回收机制

PHP垃圾回收机制 1、每一个变量定义时都保存在一个叫zval的容器里面,这里面包含了数量的类型和和值,还包含了一个refcount(理解为存在几个变量个数)和...

2754
来自专栏PHP实战技术

PHP垃圾回收机制

1、每一个变量定义时都保存在一个叫zval的容器里面,这里面包含了数量的类型和和值,还包含了一个refcount(理解为存在几个变量个数)和is_ref(理解为...

42810
来自专栏Petrichor的专栏

python: and & or 探究

今天处理的数据集里,图片同时有 “.jpg” 和 “.JPG” 两种后缀名,因此我要实现一个 找出所有不同后缀图片 的功能。一开始,实现该功能的模块我是这么写的...

972
来自专栏强仔仔

利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的...

1957
来自专栏前端侠2.0

dragenter 和 dragleave 原

今天在做一个文件上传的功能!其它主要功能都很容易实现,最后却卡在一个地方: 我希望文件拖到指定的区域后,该区域能加亮,背景变色一下,离开后恢复。DOM结构类似于...

644
来自专栏DannyHoo的专栏

iOS开发中OC与H5网页交互之OC传值给JS(WKWebView)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1252
来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

611
来自专栏PHP在线

php面试题(二)

1 <?php echo count (false); $a = count ("567") + count(null) + count(false); ec...

3328
来自专栏极乐技术社区

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看。

5386

扫码关注云+社区