Asked May 5th, 10:57 AM 89 1 1
  • 89 1 1
+2

Thắc mắc về rerender và commit của react

Share
  • 89 1 1

Cho e hỏi, giả sử ta có 1 component cha nhu sau:

export default function Cha(props) {
  const [state, setState] = useState(<Component1 />)

  const handleClick = (event) => {
      if(event.target.value === 'a') setState(<Component1 />);
      if(event.target.value === 'b') setState(<Component2 />);
  }

  return (
    <div style={{textAlign: "center"}}>
        <input type="submit" value='a' onClick={handleClick}/>
        <input type="submit" value='b' onClick={handleClick}/>
        <br />
        <br />
        {state}
    </div>
  );
}

Nếu component1 chứa:

<div>
    <h1>Giong nhau</h1>
    <p>Cua component A</p>
</div>

component2 chứa:

<div>
    <h1>Giong nhau</h1>
    <p>Cua component B</p>
</div>

Khi state của component cha thay đổi ( từ component 1 sang 2 ), e biết quá trình re render sẽ là component 1 sẽ unmount và thay thế bằng component 2, nhưng khi react commit thay đổi lên dom thật, ta thấy com 1 và 2 đều có phần tử giống nhau ( ở đây là <h1>Giong nhau</h1> ), nếu như thế thì react có giữ lại cái này ko ạ, hay vẫn xóa đi và lắp lại nó ạ

1 ANSWERS


Answered May 5th, 2:36 PM
Accepted
+1

Nó sẽ xóa hết đi và thay thế bằng component 2 nhé bạn, vì React sẽ tiến hành so sánh và thấy ngay ở virtualDOM cũ có component là Component1 còn virtualDOM mới lại lf Component2 nên nó sẽ loại bỏ toàn bộ phần nội dung bên trong đó và tạo ra dom mới. Còn chi tiết thì bạn sẽ càn tìm hiểu về phần Reconciliation trong ReactJS

Share