React组件挂载/卸载与render中if-else的关系及子组件构造与重渲染问题

Great question—this is a super common point of confusion when working with React's reconciliation process. Let's break this down clearly, step by step.

React’s reconciliation algorithm (the process that updates the real DOM from your virtual DOM) uses two key checks to decide whether to update an existing component or replace it entirely:

1. The type of the element (e.g., <div> vs <ComponentA>)
2. The key prop (if provided)

When your render function uses if-else to return different elements/components:

• If the elements are of different types (e.g., <ComponentA> vs <ComponentB>), React will immediately unmount the current component (triggering its unmount lifecycle hooks like componentWillUnmount or useEffect cleanup functions) and mount the new one (triggering constructor, componentDidMount, or useEffect setup callbacks).
• If the elements are of the same type, React will try to update the existing component instance with new props/state instead of unmounting it—unless you use distinct key props to tell React they’re separate instances.

Let’s clarify the difference between when a child component is constructed vs when it rerenders:

• Constructor (or initial mount logic)：
  • For class components: The constructor runs exactly once, when the component is first mounted. It won’t run again during rerenders.
  • For function components: The entire function runs on every rerender, but initializers like useState(initialValue) only use the initial value on the first mount. Hooks like useEffect(() => {}, []) (with an empty dependency array) also only run once on mount.
• Rerender timing:
  • A child rerenders when:
    1. Its parent component rerenders (unless the child is memoized with React.memo)
    2. Its own props change
    3. Its own state changes
  • During a rerender, React updates the component’s UI with new props/state but does not trigger mount/unmount lifecycle steps. For class components, this means render runs again but constructor and componentDidMount don’t. For function components, the function body executes again but mount-only hooks don’t re-run.

The key prop is React’s way of identifying unique component instances, even if they’re the same type. It’s most commonly used in lists, but it’s critical for if-else switches too:

• Without a key, React treats same-type components as the same instance. So if you switch between <ComponentA id="1"> and <ComponentA id="2">, React will just update the existing ComponentA’s id prop instead of creating a new instance.
• With distinct keys, React recognizes them as separate instances. So switching between <ComponentA key="1" id="1"> and <ComponentA key="2" id="2"> will trigger an unmount of the first instance and a mount of the second.

Here’s a quick code example to illustrate:

// Without key: Updates existing ComponentA instance
function Parent() {
  const [useFirst, setUseFirst] = useState(true);
  return useFirst ? <ComponentA id="1" /> : <ComponentA id="2" />;
}

// With key: Unmounts old ComponentA, mounts new one
function Parent() {
  const [useFirst, setUseFirst] = useState(true);
  return useFirst ? <ComponentA key="1" id="1" /> : <ComponentA key="2" id="2" />;
}

Let’s tie this all together with the specific scenario you asked about:

1. If A and B are different component types (e.g., <UserProfile> vs <ProductList>):
   • Every time the if-else switches, React will unmount the current component (running its cleanup logic) and mount the new one (running its mount logic). No key is needed here—React’s type check is enough to trigger a full replacement.
2. If A and B are the same component type but with different props:
   • Without a key, React will update the existing component’s props and rerender it (no unmount/mount).
   • With unique keys, React will unmount the old instance and mount a new one, resetting any internal state or mount-only logic for the component.

For example, with function components:

function Parent() {
  const [showA, setShowA] = useState(true);

  return (
    <div>
      <button onClick={() => setShowA(!showA)}>Toggle Component</button>
      {showA ? <ChildComponent label="A" /> : <ChildComponent label="B" />}
    </div>
  );
}

function ChildComponent({ label }) {
  useEffect(() => {
    console.log(`Child ${label} mounted`);
    return () => console.log(`Child ${label} unmounted`);
  }, []);

  return <div>Child {label}</div>;
}

• Without a key, clicking the button will only update the label prop—you’ll never see the unmount/mount logs.
• Add key={label} to <ChildComponent>: Now clicking the button will log "Child A unmounted" followed by "Child B mounted" (and vice versa), since React treats them as separate instances.

内容的提问来源于stack exchange，提问作者Mong H. Ng