Trong bài viết lần này chúng ta sẽ cùng hiểu 2 thuật ngữ Mount và Unmount. Trong đó Mount có nghĩa là gắn vào, Unmount
nghĩa là tháo ra gỡ ra.

Đây là 2 thuật ngữ chúng ta sẽ dùng rất nhiều khi làm việc với Reactjs, cụ thể làm làm việc với component.

Để ví dụ cho các bạn về 2 thuật ngữ này mình sẽ tạo ra một component được viết trong file Content.js như sau:

1
2
3
4
5
6

function Content() {
    return ( 
        <h1> Xin chao </h1>
    )
}
export default Content

Sau đó mình sẽ thêm component Content này vào file App.js như sau:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import Content from "./Content";
function App() {
    return (
        <div style={{padding: 32}}>
            <Content/>
        </div>
    )
}

export default App;

Bây giờ mình sẽ thêm 1 state vào để quyết định việc ẩn hiện của component Content này,sau đó thêm 1 button click để ẩn hiện nó

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import {useState} from "react";
import Content from "./Content";
function App() {
    const [show,setShow] = useState(false)
    return (
        <div style={{padding: 32}}>
            <button onClick={()=>setShow(!show)}>
                Click
            </button>
            {show && <Content/>}
        </div>
    )
}

export default App;

Để dễ hình dung hơn, mình có hình dưới đây
mount_unmount
Khi chúng ta click vào button, dòng <h 1> Xin chao </h 1> sẽ được mount và unmount vào trong DOM. Thực chất mình lấy ví dụ trong DOM là cho các bạn dễ hình dung
thực ra element cho tới khi được render vào DOM thì thật ra là bước sau của mount rồi 😄.

Hành vi Mount và Unmount được diễn ra trước đó rồi, thì tại sao lại như vậy? Đó là vì khi chúng ta click button, function App
sẽ được chạy lại, khi biến show = True thì component Content được gọi, thì tại thời điểm component Content được đưa vào React Element để
sử dụng thôi thì quá trình Mount đã xảy ra ngay thời điểm này rồi.

Chú ý nhỏ : thực ra ngay bản thân App.js cũng đã được Mount khi chúng ta f5 trình duyệt đó 😄 bạn thử tìm hiểu thêm tại sao lại như vậy nha.