Javascript 反应+；WebWorkers，呈现ReactDOMServer.renderToString的字符串结果

在WebWorker中，我使用ReactDOMServer.renderToString

然后，我使用以下命令将该字符串传递回主UI线程：

    lines = lines.map(function(line){
        return ReactDOMServer.renderToString(ContactItem({line: line}));
    });

    postMessage({
        testResult: 'pass',
        testLines: lines
    });

但是回到主UI线程中，我不确定如何实际呈现该字符串…我需要使用

React.dangerlysetinerhtml

还是有更好的方法

WebWorker消息的字符串结果当然如下所示：

    MessageEvent bubbles: false 
    cancelBubble: false 
    cancelable: false 
    currentTarget: Worker 
    data: Object 
    name: "chuckles" 
    testLines: Array[25] 

     0: "<li class="Contact" data-reactid=".252oied3u2o" data-react-checksum="1411403885"><h2 class="Contact-name" data-reactid=".252oied3u2o.0">&gt;[test] foo✔</h2></li>" 
     1: "<li class="Contact" data-reactid=".29kk5vm2sqo" data-react-checksum="2115195156"><h2 class="Contact-name" data-reactid=".29kk5vm2sqo.0">&gt;[test] bar✔</h2></li>" 
     2: "<li class="Contact" data-reactid=".bg6xmnuqdc" data-react-checksum="1668960606"><h2 class="Contact-name" data-reactid=".bg6xmnuqdc.0">&gt;[test] baz✔</h2></li>" 
     3: "<li class="Contact" data-reactid=".1t3vx6pj4sg" data-react-checksum="2019185929"><h2 class="Contact-name" data-reactid=".1t3vx6pj4sg.0">&gt;p[test] makes stuff 5✔</h2></li>" 
     4: "<li class="Contact" data-reactid=".cebbpdy8e8" data-react-checksum="818500766"><h2 class="Contact-name" data-reactid=".cebbpdy8e8.0">&gt;p[test] makes stuff 6✔</h2></li>" 
     5: "<li class="Contact" data-reactid=".1bu0bdc3f9c" data-react-checksum="1304319087"><h2 class="Contact-name" data-reactid=".1bu0bdc3f9c.0">&gt;p[test] makes stuff 7✔</h2></li>"

     ...
     25: "<li class="Contact" data-reactid=".1bu6jdc3f9c" data-react-checksum="1404319082"><h2 class="Contact-name" data-reactid=".1bu0bdc3f9c.0">&gt;p[test] makes stuff 25✔</h2></li>"

MessageEvent气泡：false
取消泡泡：错误
可取消：false
当前目标：工人
数据：对象
名字：“笑”
测试线：数组[25]
0:“
[test]foo✔”
1:“
[测试]条✔”
2:“
[test]baz✔”
3:“
p[test]生成数据5✔”
4:“
p[test]生成数据6✔”
5:“
p[test]7✔”
...
25:“
p[test]生成数据25✔”

我有一个初步的答案，我认为这是可行的，但我不确定它是否充分利用了React虚拟DOM的功能，即使它是React库的一部分

在我的主UI线程中，我有：

     render: function() {

            var self = this;


            var lines = this.state.testLines.map(function (line, i) {
                return React.createElement('div', {key: i, dangerouslySetInnerHTML: {__html: line}});
            });

            return React.createElement('div', {}, lines);

        }

    if (typeof importScripts === 'function') {
        importScripts('//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js');
        importScripts('//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js');
        importScripts('/js/vendor/react-dom-server.js');
        importScripts('//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js');
     }

  onmessage = function (msg) {

    var data = msg.data;

    var lines = doTheThing(data);

    lines = lines.map(function(line){
        return ReactDOMServer.renderToString(ContactItem({line: line}));
    });

    postMessage({
        testResult: 'pass',
        testLines: lines
    });

    close();

};

在worker中，我有以下内容：

     render: function() {

            var self = this;


            var lines = this.state.testLines.map(function (line, i) {
                return React.createElement('div', {key: i, dangerouslySetInnerHTML: {__html: line}});
            });

            return React.createElement('div', {}, lines);

        }

    if (typeof importScripts === 'function') {
        importScripts('//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js');
        importScripts('//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js');
        importScripts('/js/vendor/react-dom-server.js');
        importScripts('//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js');
     }

  onmessage = function (msg) {

    var data = msg.data;

    var lines = doTheThing(data);

    lines = lines.map(function(line){
        return ReactDOMServer.renderToString(ContactItem({line: line}));
    });

    postMessage({
        testResult: 'pass',
        testLines: lines
    });

    close();

};

因此，使其发挥作用的关键是使用危险的LysetinerHTML，如下所示：

上面这一行是重要的一行：

return React.createElement('div', {key: i, dangerouslySetInnerHTML: {__html: line}});

---

…这是我所知道的唯一一种使用WebWorker呈现前端生成的字符串的方法。

危险的LySetinerHTML

在这种情况下似乎有效，但如文档中所述：

（）此功能主要用于与DOM字符串的协作 操纵库[…]

这里的情况似乎不是这样

此外，您还可以从组件外部操作组件的内部。根据我的经验，这可能使追踪意外行为的源头变得更加困难

更好的方法是继续在WebWorker线程中处理列表（我想您希望在那里进行一些大型计算），但将处理后的属性传递回主UI线程，以便将它们传递给列表容器，然后该容器可以在内部生成列表

例如，在Flux（）体系结构中，存储可能负责接收WebWorker的结果，然后将其传递给视图，从而触发组件渲染