React 生命周期方法，是否对 componentWillReceiveProps

Question

我正在使用 React 构建一个可折叠的 OrgChart 组件。

我不确定如何根据用户交互使用生命周期方法重新渲染边缘（链接 2 个节点的 SVG 路径）。我想知道在这种情况下是否有比使用componentWillReceiveProps 更好的方法（或者因为它很快就会过时，componentDidUpdate 和/或getDerivedStateFromProps）

只有在首先绘制所有节点后才能绘制边缘。但是在我的代码中，每个Node 都会绘制其传入的边缘。这是因为使用CSS 使图表可折叠的HTML 代码需要Node 及其Edge 在同一div 下：

NodeContainer = (props) => 
  <div className='nodeContainer'>
    <Node />
    <Edge />
  </div>

我的OrgChart 组件有 3 个主要组件：

• Chart.tsx：接收包含节点和边列表的graph 对象道具，并使用它来构建图表。还接收一些其他道具，例如用于图表或节点操作的回调函数（例如：onNodeSelected(id)、onChartMoved()）
• Node.tsx：绘制节点及其传入的 svg 边缘。
• Edge.tsx：绘制 SVG 边缘

到目前为止，我一直在考虑这样组织我的代码：

Chart.tsx

// augmentedGraph will have extra data for each node and edge.
// For example: the node coordinates, isCollapsed. The coordinates are purely a UI concern, hence why my incoming graph props should not contain the info.
class Chart extends Component {
  state = { augmentedGraph: this.props.graph }

  componentDidUpdate(prevProps, prevState) {

    if (this.props.graph.nodes.length !== prevProps.graph.nodes.length 
      || this.state.augmentedGraph !== prevState.augmentedGraph){

      // clone this.props.graph into this.state.augmentedGraph
      // and re-calculates all edges and nodes coordinates to add those properties to this.state.augmentedGraph
      ...

    }
  }

  // Will send callback function props to each Node (onNodeMoved, etc.), that will fire below method
  userModifiedChartHandler() {
    // re-calculates all edges and nodes coordinates and updates this.state.augmentedGraph
  }

  // recursively builds the chart html structure with Nodes and Edges.
  buildChart(node) {
    return ...
  }

  render() {
    const rootNode = this.state.augmentedGraph.nodes.root
    const chart = buildChart(rootNode)
    return ({chart})
  }
}

Answer 1

我会使用一个简单的memoization approach：

calculateCoordinates = memoize((nodesLength, graph) => { your recalculation code })

render() {
    const augmentedGraph = this.augmentGraph(this.props.graph.nodes.length, this.props.graph);
    return {buildChart(rootNode, augmentedGraph)};
}

显然，您的问题中缺少很多细节。例如，我缺少augmentedGraph 和rootNode 之间的连接。
通常，记忆化方法用于从组件（在本例中为增强图）中删除状态。
传递给memoize 的 lambda 参数是您要确定输入数据是否已更改并且您需要重新执行计算代码的键。