小编shi*_*anb的帖子

我正在编写一个复杂的反应应用程序并使用Cortex作为我的中心模型.皮质的哲学是它包装你的数据和更改数据,从根调用完整的重新渲染.这非常有用,尤其是当您有非分层视图更改状态并影响另一个时.

我面临的问题是在重新渲染时保持状态/道具.例如,我有一个特定的层次结构,如下所示:

<Page>
  <EditorCard>
     <Editor/>
     <PublishButton/>
  </EditorCard>
</Page>

在EditorCard需要的JavaScript的情况下Editor,为了使更改Editor上单击PublishButton(我用的内外部库Editor,其公开的编辑方法).因此,Editoron 通过调用传递给它的函数ComponentDidMount将实例设置为propon EditorCard.

我的问题是,当我点击PublishButton我更改皮质对象的值,导致从根重新渲染,并为此松开道具Editor(因为组件已经安装ComponentDidMount不再被调用).

我处理这个问题的方法是缓存getDefaultProps.

在EditorCard我的默认道具里面是:

  getDefaultProps: function() {
    return {
      cachedData: {},
    }
  },

并将编辑器实例保存为 this.props.cachedData.editor = editorInstance

这可以在多次重新渲染中保存道具.

这是如何使用getDefaultProps缓存的？在通过多次重新渲染保存道具时,我打破了这个黑客的一些核心反应规则？如果是这样,你能建议一个更好的结构？

我试图通过改变我提供给d3线函数的lineData数组,每5秒画一系列线:

以下是相关代码的摘录:

var svg = d3.select("body").append("svg:svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("id", "svgMain")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(drag);

var lines = svg.append("g")
      .attr("id", "lines");

function changingLines() {
      lines.selectAll("line")
        .data(lineData)
        .enter().append("line")
        .attr("x1", function(d, i) { console.log(d[0][0]); return d[0][0];})
        .attr("y1", function(d, i) { console.log(d[0][1]); return d[0][1];})
        .attr("x2", function(d, i) { return d[1][0];})
        .attr("y2", function(d, i) { return d[1][1];})
        .style("stroke", "#000")
        .style("stroke-width", "0.5")
        .attr("class", "lines");

     lines.selectAll("line").exit().remove();
     setTimeout(changingLines, 2000);
 } …