反应生命周期方法，是否为 componentWillReceiveProps

Question

I'm building a collapsible OrgChart component with React.

I'm not sure how to use the lifecycle methods to re-render the Edges (SVG path that links 2 nodes), based on user interactions. I would like to know if there is a better approach than using componentWillReceiveProps (or since it's going to be obsolete soon, componentDidUpdate and/or getDerivedStateFromProps instead) for this case

The Edges should only be painted once all the nodes have been painted first. However in my code, each Node paints its incoming Edge. This, because the HTML code that makes the chart collapsible using CSS requires Node and its Edge under the same div :

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

My OrgChart component has 3 main components:

• Chart.tsx : receives a graph object props that contains the list of nodes and edges, and uses it to build the chart. Also receives a few other props such as call back functions for chart or node manipulation (eg: onNodeSelected(id) , onChartMoved() )
• Node.tsx : paints both the Node and its incoming svg Edge.
• Edge.tsx : paints the SVG Edge

So far, I was thinking of organizing my code this way:

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

I would use a simple 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)};
}

Obviously, there is a lot of detail missing in your question. For example, I am missing the connection between augmentedGraph and rootNode .
In general, the memoization approach is used to remove state from the component, in this case, the augmented graph.
The parameters to the lambda that is passed to memoize are the keys on which you want to decide whether the input data has changed and you need to re-execute your calculation code.