React cung cấp các phương thức lifecycle và hooks để quản lý các giai đoạn khác nhau trong vòng đời của component. Việc hiểu rõ các phương thức này giúp bạn có thể tối ưu hóa ứng dụng React của mình.
Lifecycle Methods trong Class Components
React class components có một số lifecycle methods (phương thức vòng đời) cho phép bạn quản lý hành vi của component trong suốt quá trình từ khi được tạo cho đến khi bị xóa. Dưới đây là các phương thức lifecycle quan trọng:
componentDidMount
Được gọi ngay sau khi component đã được render lần đầu tiên, thích hợp để gọi API hoặc thực hiện các tác vụ phụ thuộc vào DOM.
class MyComponent extends React.Component { componentDidMount() { console.log("Component đã được render lần đầu tiên!"); } render() { return <div>Content</div>; }
}
componentDidUpdate
Được gọi mỗi khi state hoặc props thay đổi, sau khi component render lại. Thường dùng để thực hiện các cập nhật sau khi có sự thay đổi.
class MyComponent extends React.Component { componentDidUpdate(prevProps, prevState) { if (prevState.value !== this.state.value) { console.log("State đã thay đổi!"); } } render() { return <div>Content</div>; }
}
componentWillUnmount
Được gọi trước khi component bị xóa khỏi DOM. Thường dùng để dọn dẹp các công việc như hủy bỏ các subscription hoặc các tác vụ bất đồng bộ.
class MyComponent extends React.Component { componentWillUnmount() { console.log("Component sẽ bị xóa!"); } render() { return <div>Content</div>; }
}
Hooks trong Functional Components
Kể từ React 16.8, React đã giới thiệu hooks, cho phép sử dụng state và các lifecycle methods trong các functional components. Các hooks phổ biến bao gồm useState, useEffect, và nhiều hook khác.
useState
useState là hook dùng để khai báo và quản lý state trong functional component. Nó trả về một mảng gồm giá trị state và hàm cập nhật giá trị state.
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>{count}</p> <button onClick={() => setCount(count + 1)}>Tăng</button> </div> );
}
useEffect
useEffect là hook dùng để thay thế các lifecycle methods như componentDidMount, componentDidUpdate, và componentWillUnmount. useEffect sẽ được gọi sau khi component render.
import React, { useState, useEffect } from 'react'; function Timer() { const [time, setTime] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); return () => clearInterval(intervalId); }, []); return <p>Time: {time}</p>;
}
useContext
useContext là hook giúp bạn dễ dàng truy cập vào giá trị context mà không cần phải sử dụng Context.Consumer.
import React, { useContext } from 'react'; const ThemeContext = React.createContext("light"); function ThemedComponent() { const theme = useContext(ThemeContext); return <div>Current theme: {theme}</div>;
}
🔚 Kết luận
- Lifecycle Methods trong class components giúp bạn quản lý hành vi của component qua các giai đoạn vòng đời, như khi component được mount, cập nhật, hoặc unmount.
- Hooks cung cấp một cách tiếp cận mới mẻ và mạnh mẽ để làm việc với state và lifecycle methods trong functional components. Điều này giúp code dễ đọc và dễ duy trì hơn.
- useState và useEffect là hai hook cơ bản nhưng rất mạnh mẽ, giúp bạn dễ dàng quản lý trạng thái và các side effects trong ứng dụng.