在 React.js 中渲染 HTML 时没有额外的“data-reactid”DOM 属性？

Question

所以，我在我的一个 react.js 文件中做了这样的事情：

 render: function() { 
    var stuff = this.props.stuff;

    function getHtmlForKey(key_name, title) {
        var key_name = key_name.toLowerCase();
            return Object.keys(thing).filter(function(key) {
                return key && key.toLowerCase().indexOf(key_name) === 0;
            }).map(function(key, index) {
                var group_title = index === 0 ? title : '';
                if(profile[key] != null && thing[key] != "") {
                    return (
                        <span>
                        {group_title ? (
                            <li className="example-group-class">{group_title}</li>
                        ) : null }
                        <li key={key} className="example-class">
                            {thing[key]}
                        </li>
                        </span>
                    );
                }    
            }, this);
    }

    /** Grouping by keyword **/
    var group1 = getHtmlForKey('stuff1', 'Group Title 1');

    /** Return Facecards **/
    if (stuff) {
        return (
            <div className="col-md-6">
                <div className="media">
                    <div className="pull-left">
                        <a href="#" onClick={this.open}>
                            <img src={this.props.stuff} className="media" />
                        </a>
                    </div>
                    <div className="top">
                        {group1}
                    </div>
       }
}

当它渲染时，它会输出如下内容：

  <li class="example-group-title" data-reactid=".0.0.2.0.$2083428221.0.1.0:0.0">Group Title</li>

在我的另一个 react.js 文件中，我有：

    var StuffApp = require('./components/StuffApp.react');

    ReactDOM.render(
    <StuffApp />,
     document.getElementById('main-content')
    );

如何呈现 HTML，使其不包含所有额外的 DOM 属性标记（即 data-reactid）？我只是想尝试保存一些位，你知道吗？我一直在阅读与https://facebook.github.io/react/docs/top-level-api.html ReactDomServer 相关的这篇文章，但想知道是否有更简单的方法？如果没有，我将如何整合它？

Answer 1

您要查找的方法是ReactDOM.renderToStaticMarkup。

来自docs：

类似于 renderToString，除了它不会创建 React 内部使用的额外 DOM 属性，例如 data-react-id。如果您想将 React 用作​​简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省大量字节。

这只有在您在服务器上渲染时才会有所不同。此外，此标记与 React 不兼容，因此它仅对仅显示组件有用。

但是，你的这句话让我很困惑：

如何呈现 HTML，使其不包含所有额外的 DOM 属性标记（即 data-reactid）？我只是想试着节省一些，你知道吗？

如果你想节省比特，你不要在客户端（这是 React 运行的地方），你在服务器上这样做，这样你就可以将更少的比特传输到客户端。一旦应用程序在客户端的浏览器上运行，您就不必担心这些 DOM 属性占用的额外内存（实际上这是您要节省的唯一部分）。

Answer 2

别担心 - 从 React 版本 0.15.0-alpha.1 开始，根节点上只有 data-reactroot 属性。