Vòng đời (lifecycle) trong React có thể nghĩ qua ba giai đoạn: mounting (gắn kết), updating (cập nhật), và unmounting (gỡ bỏ). Mounting xảy ra khi thành phần React render ra DOM (Document Object Model). Khi thay đổi được làm cho thành phần đó, nó vào giai đoạn updating.
Trong giai đoạn update của vòng đời, một loạt phương thức nội bộ chạy để kiểm tra thông tin mới và render lại thành phần. Unmounting đơn giản là khi thành phần bị gỡ khỏi DOM.
Bài viết này thảo luận ý nghĩa rộng của vòng đời và một số phương thức thường dùng. Có thêm phương thức vòng đời khác không thảo luận ở đây. Để biết thêm phương thức vòng đời khác, tham khảo bài giới thiệu này.
React Lifecycle là gì?
Khi thành phần tải vào DOM, nó vào giai đoạn đầu tiên của ba giai đoạn, hoặc vòng đời. Giai đoạn đầu gọi là mounting. Trong giai đoạn này, thành phần render như định nghĩa ban đầu. Nó sẵn sàng tương tác người dùng và vào giai đoạn thứ hai.
Ở giai đoạn thứ hai, người dùng tương tác với thành phần và làm thay đổi. Trong hầu hết trường hợp, người dùng thực hiện hành động thay đổi state thành phần. Chúng ta giờ ở giai đoạn update của vòng đời.
Trong giai đoạn update, React sẽ render lại thành phần hiển thị thay đổi. Trong ví dụ trên thay đổi state kích hoạt update, phương thức setState() sẽ gọi để thay đổi state ban đầu và bắt đầu quá trình render lại. Để biết thêm về setState, đọc bài giới thiệu này.
Cuối cùng, khi điều hướng ra khỏi thành phần cụ thể, ta có thể xóa nó khỏi DOM. Điều này gọi là unmounting và là giai đoạn ba của vòng đời. Mặc dù giai đoạn này không bắt buộc, khuyến nghị cho ứng dụng nhiều thành phần.
Phương thức Vòng đời Thường dùng
Bây giờ đã xem qua trình tự vòng đời thành phần React, hãy xem phương thức vòng đời thường dùng. Phương thức vòng đời là phương thức React được gọi ở các giai đoạn vòng đời khác nhau. Một số bắt buộc, một số tùy chọn. Chúng ta xem phương thức bắt buộc và thường dùng tùy chọn.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Mounting
Khi mounting class component, phương thức tùy chọn thường dùng đầu là constructor(). Ở đây trong phương thức constructor, state ban đầu thành phần có thể khai báo trực tiếp.
class App extends React.Component {
constructor(props) {
super(props);
this.state= {
currentUser : " "
}
}
}
Trong ví dụ này, ta đặt state ban đầu là đối tượng cho người dùng hiện tại. Phương thức constructor() yêu cầu phương thức boilerplate super(). Để biết thêm về constructor cơ sở super(), đọc hướng dẫn setState.
Với mục đích này, khi thành phần mount, ta giả định chưa ai đăng nhập. Để người dùng đăng nhập, cần biểu mẫu đăng nhập. Điều này đưa đến phương thức bắt buộc đầu, render().
Phương thức bắt buộc khi mounting thành phần là render(). Sau khi class component được xây dựng với state ban đầu, ta có thể render thành phần khác hoặc HTML.
render(){
return (
<LoginForm />
)
}
Cú pháp render() và câu lệnh return hơi khác các phương thức khác. Chú ý dùng ngoặc đơn sau return không phải ngoặc nhọn. Ở đây trong câu lệnh return, ta render thành phần LoginForm.
Khi người dùng đăng nhập, ta có quyền truy cập thông tin đăng nhập. Trong ứng dụng hoạt động, đăng nhập yêu cầu yêu cầu fetch đến server lấy thông tin khớp. Trong ngữ cảnh bài giới thiệu vòng đời, ta đặt state trực tiếp.
Trong ví dụ đơn giản, có người dùng John. Anh nhập mật khẩu và nhấn nút đăng nhập. Điều này gửi yêu cầu fetch đến server và server phản hồi với thông tin John. Bây giờ John đã đăng nhập, ta muốn anh ở trạng thái đăng nhập cho đến khi quyết định đăng xuất.
Để làm vậy, ta dùng phương thức tùy chọn phổ biến khác, componentWillMount(). Nếu phương thức vòng đời này gọi, nó thực thi sau khi thành phần render. Đây là nơi tốt đặt state mới.
componentWillMount() {
this.setState({ currentUser: "John" })
}
Bây giờ, sau render thành phần và trước mounting, state thành phần đặt với currentUser là John. Ngay khi trang refresh, state đặt với John, nên người dùng ở trạng thái đăng nhập.
Dùng phương thức setState() cũng đưa vào giai đoạn update của vòng đời. Khi setState() gọi, báo cho React biết thay đổi đã làm cho thành phần. React sẽ render lại thành phần hiển thị thay đổi cho người dùng. Trong trường hợp, sẽ hiển thị John đã đăng nhập.
Updating
Giai đoạn update trong vòng đời có khá nhiều phương thức vòng đời tùy chọn vượt quá phạm vi giới thiệu này. Đủ nói cho mục đích rằng khi thay đổi phát hiện (thường với setState), React gọi phương thức render() bắt buộc lại. Sau đó thành phần render lại phản ánh thay đổi.
Unmounting
Giai đoạn cuối vòng đời thành phần gọi là unmounting. Ở đây thành phần bị gỡ khỏi DOM. Mặc dù không bắt buộc, giúp ứng dụng nhiều thành phần hiệu quả hơn.
Unmounting chỉ có một phương thức tùy chọn, componentWillUnmount(). Người dùng John, giờ muốn đăng xuất. Khi nhấn nút đăng xuất, ta dùng componentWillUnmount() xóa hồ sơ anh khỏi DOM.
Ví dụ này hơi tạo nép, nhưng rõ ràng 보여 điều gì xảy ra mỗi giai đoạn vòng đời.
class UserContainer extends React.Component {
constructor(props) {
super(props);
this.state = { currentUser: " " }
}
componentWillMount() {
this.setState({ currentUser: "John" })
}
logout = () => {
this.setState({ currentUser: " " })
}
render() {
if this.state.currentUser === "John" {
return (
<UserProfile />
<button type="button" onclick={this.logout}>Logout</button>
)
} else {
return(
<button type="button>">Login</button>
)
}
}
}
class UserProfile extends React.Component {
componentWillUnmount() {
alert("Logged Out")
}
render() {
return (
<h1>Welcome back, John!</h1>
)
}
}
Chúng ta có hai thành phần. Đầu tiên UserContainer chỉ chứa thành phần UserProfile. UserProfile chứa thông tin người dùng.
Trong UserContainer, xây dựng thành phần và đặt state ban đầu như trước. Thành phần render với nút đăng nhập rất ngắn. Trước khi mount thành phần, đăng nhập John. Điều này khiến React update thành phần và render lại với thông tin John.
Bây giờ John đã đăng nhập, render thành phần UserProfile. Chứa tất cả thông tin John, nên cần xóa khỏi DOM ngay khi anh đăng xuất.
Khi nút đăng xuất nhấp, thực thi hàm logout đơn giản trả currentUser về state ban đầu chuỗi rỗng. Vì hàm logout gọi setState, React render lại container component. Bây giờ, không hiện UserProfile và ta nhận thông báo pop-up người dùng đã đăng xuất.
Kết luận
React lifecycle còn nhiều hơn bao quát ở đây. Mục tiêu bài là giới thiệu khái niệm cơ bản với ví dụ mã đơn giản. Bây giờ khái niệm vòng đời đã giới thiệu, tài liệu React chính thức sẽ rõ hơn.
Sau đọc hướng dẫn và bài bổ sung liên kết, bạn nắm vòng đời React và khả năng tự đi sâu. Như mọi khái niệm phức tạp lập trình, thực hành hàng ngày giúp giải quyết chi tiết.