React进度条组件prop变更后，可视化区域无法重渲染的解决咨询

Hey Ben, let's break down why your progress bar's visual component isn't updating when the progress prop changes, and how to fix it properly.

The Root of the Problem #

Right now, your calculation logic only runs once in componentDidMount—that's when the component first mounts. When the progress prop updates later, those calculations don't re-run, so your visual progress bar is still using the old values from mount time.

Your attempt with componentWillUpdate caused an infinite loop because any setState call inside it triggers another update, which calls componentWillUpdate again, and so on until React hits its maximum update depth limit. Plus, componentWillUpdate is deprecated in modern React, so we should avoid using it anyway.

Step-by-Step Solution #

1. Extract Calculation Logic to a Reusable Method
   First, pull your math from componentDidMount into a separate method so you can call it both on mount and when props change. This keeps your code DRY (Don't Repeat Yourself).

2. Use componentDidUpdate for Prop Changes
   componentDidUpdate is the safe, recommended place to handle post-update logic. We'll add a check to only re-run calculations when the progress prop actually changes (to avoid unnecessary work).

Here's how your updated component might look:

export default class ProgressBar extends React.Component {
  state = {
    progressPercentage: 0,
    // Add any other calculated state variables you need here
  };

  // Reusable calculation method
  calculateProgressValues = () => {
    const { progress } = this.props;
    // Replace this with your actual calculation logic from componentDidMount
    const totalModalPages = 5; // Example: total number of modal pages
    const percentage = (progress / totalModalPages) * 100;

    this.setState({ progressPercentage: percentage });
  };

  componentDidMount() {
    // Run calculations when component first loads
    this.calculateProgressValues();
  }

  componentDidUpdate(prevProps) {
    // Only re-run calculations if progress prop changed
    if (prevProps.progress !== this.props.progress) {
      this.calculateProgressValues();
    }
  }

  render() {
    const { progressPercentage } = this.state;
    return (
      <div className="progress-container">
        {/* Visual progress bar using calculated state */}
        <div 
          className="visual-progress-bar"
          style={{ width: `${progressPercentage}%` }}
        />
        {/* Text field that already works */}
        <span>Progress: {this.props.progress}</span>
      </div>
    );
  }
}

Key Notes #

• Why componentDidUpdate works: It runs after the component updates, so you don't risk triggering an infinite loop as long as you check if the prop actually changed before calling setState.
• Avoid redundant calculations: The check prevProps.progress !== this.props.progress ensures we only recalculate when necessary, which is better for performance.
• Deprecation heads-up: componentWillUpdate was replaced with componentDidUpdate and other lifecycle methods in React 16.3+, so sticking with componentDidUpdate keeps your code future-proof.

If your calculation logic is lightweight, you could also compute the values directly in the render method instead of storing them in state. But storing them in state is better for performance if the calculations are complex or if you use the values in multiple places.

内容的提问来源于stack exchange，提问作者Ben