当父级重新渲染时，React 子级会更新 DOM

Question

i'm a bit confused with how React re-render.

const Parent = () => {
  const [ value, setValue ] = useState(0);

  return (

<div>
 <Child></Child>
 <button onClick={() =>setValue(value => value + 1)}>Set Value </button>
</div>

}

const Child = () => { 
   console.log('child rerender');
return (<div>Children</div>); 
}

so basically, when i click the button in Parent, the Parent re-render which lead to the rerender of Child component, and the console log chid rerender .

So my question is will the rerender of Child Component only means re-run the JS part ( console.log('child rerender') ), and the DOM of Child will stay the same ( without any DOM repaint and reflow)? Or it actually unmount the Child and mount it again to DOM tree, even though its DOM content stay the same.

Thanks

Answer 1

See the FAQ .

The function will run, the virtual DOM will be reconciled against the real DOM, and then the real DOM won't be updated because nothing will have changed.

Answer 2

You shouldn't need to care about whether React mounts and unmounts components (except in specific cases). (You can force it to do so by changing a component's key .)

In this case, I believe what happens to the concrete DOM is that as React does its VDOM<->DOM reconciliation, it notes that the structure of the DOM hasn't changed, nor have any text values (since the value isn't shown anywhere), so it does nothing to the concrete DOM.