fbpx
close

ReactJS: Lifecycle của một component trong React (Phần 1)

Tác giả: Nguyen Văn Phong Ngày cập nhật: 03/10/2021 Chuyên mục: Kiến thức tổng hợp
Disclosure
Website Wiki.tino.org được cung cấp bởi Tino Group. Truy cập và sử dụng website đồng nghĩa với việc bạn đồng ý với các điều khoản và điều kiện trong chính sách bảo mật - điều khoản sử dụng nội dung. Wiki.tino.org có thể thay đổi điều khoản sử dụng bất cứ lúc nào. Việc bạn tiếp tục sử dụng Wiki.tino.org sau khi thay đổi có nghĩa là bạn chấp nhận những thay đổi đó.
Why Trust Us
Các bài viết với hàm lượng tri thức cao tại wiki.tino.org được tạo ra bởi các chuyên viên Marketing vững chuyên môn và được kiểm duyệt nghiêm túc theo chính sách biên tập bởi đội ngũ biên tập viên dày dặn kinh nghiệm. Mọi nỗ lực của chúng tôi đều hướng đến mong muốn mang đến cho cộng đồng nguồn thông tin chất lượng, chính xác, khách quan, đồng thời tuân thủ các tiêu chuẩn cao nhất trong báo cáo và xuất bản.

Vì kiến thức về Lifecycle của một component trong React khá dài nên Tino Group sẽ chia thành 2 phần cho các bạn dễ theo dõi nhé!

Giới thiệu chung về Lifecycle của một component trong React

Lifecycle hay còn gọi là vòng đời của một component. Đây là một phần quan trọng trong React, giúp bạn hiểu rõ hơn về các bước vận hành của một Component.

Trong React, lifecycle được xem là vòng đời hay chu kì của một component, từ lúc khởi tạo, cập nhật và kết thúc.

ReactJS: Lifecycle của một component trong React (Phần 1) 1

React cung cấp các phương thức được xây dựng sẵn để chúng ta có thể tham gia xử lý vào các giai đoạn của một component. Một component được khởi chạy sẽ trải qua 4 giai đoạn chính:

  • Initialization
  • Mouting
  • Updating
  • Unmouting

Chúng ta cùng tìm hiểu chi tiết về các lifecycle methods có trong mỗi gia đoạn nhé.

Giai đoạn Initialization

ReactJS: Lifecycle của một component trong React (Phần 1) 2

Đây là giai đoạn đầu tiên của một component, bắt đầu bằng cách khởi tạo state, props, các biến cần thiết hoặc bind các function thường. Điều này thực hiện bên trong phương thức constructor().

Nếu chúng ta không cần khởi tạo state và không bind các hàm khác, thì ta không cần phải viết một hàm constructor cho React component.

Method constructor() được khai báo phía trên tất cả các phương thức khác, và được gọi trước khi component được mount (render), nó nhận một argument là props.

Khi viết một constructor cho một class được kế thừa từ React.Component, ta luôn luôn gọi super(props) trước mọi câu lệnh khác. Điều này sẽ cho phép khởi tạo phương thức constuctor và kế thừa những phương thức khác của lớp cha là React.Component. Nếu không thì giá trị this.props ở hàm này sẽ là undefined, có thể dẫn đến lỗi.

Thông thường, hàm constructor() chỉ được sử dụng với 2 mục đích là:

  • Khởi tạo local state bằng cách gán giá trị cho state bởi câu lệnh this.state
  • Binding các hàm sự kiện vào một instance.

Không nên gọi setState() trong constructor(). Thay vì đó, nếu component của bạn cần sử dụng local state thì hãy gán giá trị của nó trực tiếp bằng this.state

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      website: 'Học ReactJS cùng wiki.tino.org'
    };
    this.handleClick = this.handleClick.bind(this);
  }
}

Những điều cần tránh khi sử dụng hàm constructor:

  • Hàm constructor() là nơi duy nhất bạn có thể sử dụng this.state để gán giá trị trực tiếp. Trong tất cả các hàm khác, bạn phải sử dụng this.setState().
  • Tránh xử lý tất cả các side-effect hoặc subscriptions trong đây.
  • Tránh sử dụng props làm giá trị của state. Đây là một lỗi hay gặp phải với những bạn mới bắt đầu.
constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

Gia đoạn Mouting

Giai đoạn này được thực hiện sau khi khởi tạo xong. Đây là quá trình gắn React element (Virtual DOM) của một component vào Real DOM để thể hiện kết quả lên trình duyệt.

Mouting có 3 phương thức là:

  • componentWillMount()
  • render()
  • componentDidMount()

componentWillMount()

Phương thức này được khởi chạy trước khi một component được mount (hay còn gọi là render) lần đầu tiên duy nhất. Nghĩa là nó khởi chạy sau hàm constructor() và trước hàm render().

Chú ý: Không nên cập nhật giá trị state hoặc props trong phương thức này, vì thời gian chuẩn bị render đến lúc render rất ngắn, đồng thời lúc này chưa có DOM nào để tương tác. Nên việc cập nhật giá trị ở đây sẽ không hiển thị kết quả như ta mong muốn.

componentWillMount() {
    // TODO something
}

render()

Mỗi component bắt buộc phải có hàm render() này.

Hàm render() return duy nhất một React element, nên khi cần trả về nhiều elements thì ta phải gom nhóm chúng lại thành một tag khác ví dụ như <form>, <div>… hoặc dùng thẻ rỗng <></> cho trường hợp bạn không muốn render thêm một thẻ khác.

render() {
    return (
      <>
        <h1>Lifecycle của một component trong React</h1>
        <h6>Author: Tran Tan Qui</h6>
      </>
    );
  }

Hàm render() mô tả những gì cần được hiển thị lên trình duyệt. Có 2 trường hợp để hàm render() được khởi chạy:

  • Trường hợp 1: Khi ta gọi hàm setState để cập nhật lại state trong component.
  • Trường hợp 2: Khi component đó là con có props được truyền vào từ component cha bị thay đổi.

componentDidMount()

Hàm này được gọi sau hàm render(), nghĩa là sau khi các element được render thành công lần đầu tiên. Tức là lúc này các element của component đã được gắn vào cây DOM, và đây là nơi được lựa chọn tốt nhất để chúng ta có thể xử lý các side effect như gọi API, thay đổi state, props… hoặc thiết lập bất kì các subscriptions (nhưng đừng quên hủy các tác vụ subscription trong hàm componentWillUnmount() nhé).

Xem ví dụ sau:

class WikiPost extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Title",
    };
  }

  componentWillMount() {
    console.log("Component will mount!");
  }

  componentDidMount() {
    console.log("Component did mount!");
    this.getListPost();
  }

  getListPost = () => {
    // TODO: Call API, setState() ...
  };

  render() {
    console.log("Render thành công");
    return (
      <>
        <h1>Lifecycle của một component trong React</h1>
        <h6>Author: Tran Tan Qui</h6>
      </>
    );
  }
}

Chúng ta bật F12, tab Console thì sẽ thấy được thứ tự khởi chạy của 3 method mouting theo ví dụ:

ReactJS: Lifecycle của một component trong React (Phần 1) 3

Giai đoạn Updating

Đây là giai đoạn thứ 3 sau khi component đã render thành công lần đầu tiên. Trong giai đoạn này, dữ liệu của state và props sẽ được cập nhật để đáp ứng với các events theo yêu cầu của người dùng. Điều này dẫn đến việc re-render ở component.

Tương ứng với nó ta có 4 phương thức chính:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • componentDidUpdate()

componentWillReceiveProps()

ReactJS: Lifecycle của một component trong React (Phần 1) 4

Hàm này sẽ khởi chạy khi một component nhận một props mới từ component cha, hàm này có nhận một argument là nextProps.

Nếu ta muốn cập nhât lại state để đáp ứng những thay đổi của props, lúc này chúng ta cần so sánh giá trị this.props và nextProps, sau đó sử dụng this.setState() để cập nhật.

Nếu một component cha được re-render thì component con cũng sẽ re-render theo, thậm chí props của component con không thay đổi. Ví thế hãy chắc rằng việc so sánh props hiện tại và props kế tiếp có thay đổi hay không để quyết định việc re-render.

shouldComponentUpdate()

ReactJS: Lifecycle của một component trong React (Phần 1) 5

Hàm này giúp tăng hiệu năng của React, để React biết được việc render có bị ảnh hưởng bởi props và state hiện tại hay không. Nếu nó return false thì các phương thức phía sau nó như componentWillUpdate(), render(), componentDidUpdate() sẽ không được thực hiện. Default hàm này return true để chạy được các hàm phía sau nó.

Hàm này nhận 2 arguments là nextProps và nextState, lúc này ta so sánh giá trị của this.props và nextProps, this.state và nextState và return false để nói cho React biết là bỏ qua việc update DOM. Và khi hàm này ở component cha return false thì không ảnh hưởng đến việc re-render của component con khi state của nó thay đổi.

React không khuyến khích việc so sánh ‘deep’ hoặc sử dụng JSON.stringify() trong hàm này. Nó kém hiệu quả và làm giảm hiệu năng.

componentWillUpdate()

ReactJS: Lifecycle của một component trong React (Phần 1) 6

Hàm này được gọi trước khi render khi component nhận state hoặc props mới. Hàm này làm công tác chuẩn bị trước khi việc update lại UI xảy ra, và nó được sử dụng cho lần render thứ 2 trở đi. Cũng tương tự hàm componentWillMount(), nó ít được tương tác trong application, vì việc setState hầu hết được gọi trong hàm componentWillReceiveProps()

componentDidUpdate()

ReactJS: Lifecycle của một component trong React (Phần 1) 7

Hàm này được gọi ngay sau khi đã re-render thành công (render lần thứ 2 trở đi, để áp dụng cho lần render đầu tiên thì sử dụng hàm componentDidMount()). Hàm này được sử dụng để xử lý DOM khi DOM đã được cập nhật. Hàm này nhận 3 argument là prevProps, prevState, snapshot (khi có getSnapshotBeforeUpdate()).

Đây là nơi lý tưởng để thực hiện các request network miễn là ta so sánh props hiện tại với props trước đó. Ta có thể gọi setState() ngay trong hàm này nhưng nó phải nằm trong điều kiện so sánh dữ liệu hiện tại và trước đó, nếu không có điều kiện bọc ngoài thì sẽ dẫn đến vòng lặp bất tận của component (infinite loop).

Nếu component có sử dụng hàm getSnapshotBeforeUpdate(), thì giá trị trả về sẽ được truyền ở argument thứ 3 của componentDidUpdate() là “snapshot”, nếu không thì giá trị của nó sẽ là ‘undefined’.

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Giai đoạn Unmounting

Đây là bước cuối cùng cũng như kết thúc một của lifecycle trong một component. Khi tất các tác vụ hoàn thành và ta cần tiến hành unmount DOM (component bị remove khỏi cây DOM). Gia đoạn này chỉ có 1 phương thức là componentWillUnmount()

Không nên gọi setState() ở hàm này bởi vì component sẽ không bao giờ re-render. Một khi component đã bị remove khỏi DOM thì sẽ không được render lại lần nào nữa. Hàm này thường dùng để clear các thao tác không cần thiết như xử lý ngưng bộ hẹn giờ, ngắt kết nối mạng, hoặc xóa các subscriptions được tạo trước đó.

Xét ví dụ sau:

class ChildComponent extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
    this.update = this.update.bind(this);
  }
  update() {
    this.setState({ val: this.state.val + 1 });
  }
  componentWillMount() {
    console.log("mounting");
  }
  render() {
    console.log("rendering!");
    return (
      <button onClick={this.update}>
        {this.state.val}
      </button>
    );
  }
  componentDidMount() {
    console.log("mounted");
  }
  componentWillUnmount() {
    console.log("bye!");
  }
}
class ParentComponent extends React.Component {
  mount() {
    ReactDOM.render(<ChildComponent />, document.getElementById("a"));
  }
  unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById("a"));
  }
  render() {
    return (
      <div>
        <h1>How to Mount/Unmount a Component in React.js</h1>
        <hr />
        <button onClick={this.mount.bind(this)}>Mount</button>
        <button onClick={this.unmount.bind(this)}>Unmount</button>
        <div id="a"></div>
      </div>
    );
  }
}

Ví dụ trên, khi chúng ta click vào nút “Mount” thì React sẽ gắn ChildComponent vào trong thẻ div có id=”a” trên DOM, khi đó trình duyệt sẽ hiển thị nội dung của ChildComponent. Sau đó chúng ta click nút “Unmount”, React sẽ xóa ChildComponent ra khỏi DOM và các element của nó cũng sẽ biến mất khỏi trình duyệt.

Phía trên là chi tiết về các phương thức của một lifecycle của component. Nhưng sau phiên bản React 16.3 thì có một số hàm không cần thiết sẽ được đổi tên lại cho phù hợp với ý nghĩa lập trình. Trong bài viết sau, chúng ta sẽ cùng tìm hiểu xem React cập nhật lifecycle như thế nào nhé!

Xem tiếp phần 2:  Lifecycle của một component trong React 

Bài viết có tham khảo thông tin từ link: https://vi.reactjs.org/docs/react-component.html

5/5 - (1 bình chọn)

Bài viết liên quan

Mục lục

Xem nhiều

giá tốt, chất lượng cao mình rất hài lòng
chất lượng dịch vụ tốt lắm...á
chất lượng dịch vụ rất tốt.
giá tốt, chất lượng cao mình rất hài lòng
Dịch vụ chăm sóc khách hàng tốt
Dùng rất oke nha mọi người
Dịch vụ chăm sóc khách hàng tốt, mình rất hài lòng về dịch vụ của TINOHOST
Đã mua rất nhiều tên miền tại Tinohost. Chất lượng tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
tuyệt vời chăm sóc khách hàng quá tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
Quá tốt - Quá xuất sắc và tuyệt
Hỗ trợ nhiệt tình. dịch vụ chất lượng
Đội ngũ support rất nhiệt tình.
Sử dụng dịch vụ của bạn Tinohost 2 3 năm nay chưa khi nào phải thất vọng.
host dùng chất lượng, miền giá rẻ
dịch vụ hỗ trợ rất nhanh, tốc độ hosting tốt
Hộ trợ tốt, nhanh. Tuyệt vời 🥰
tuyệt vời, dịch vụ cực tốt và hỗ trợ siêu nhanh
Làm việc nhanh chóng, giá thành hợp lí.
Hosting rẻ và nhanh thích hợp cho học sinh sinh viên như mình
dịch vu tốt ! Sẽ sử dụng thưởng xuyên !
Mỗi lần cần gì, nhắn Tino là được hỗ trợ ngay. Nên một đứa không biết gì về web như mình cũng tạo được blog. Cơ bản mình chỉ lo viết, mọi thứ có anh IT của Tino lo hết.
Nhìn chung thì Tino xứng đáng là một trong những nhà cung cấp host giá rẻ #1 tại VN. Bên này support khá nhanh và nhiệt tình nên quá trình sử dụng diễn ra tương đối trơn tru.
Chất lượng quá ok so với mức giá. Các SME có thể tham khảo để dựng web nhé.
uy tín chất lượng chuẩn cho 5 sao
Dịch vụ nhanh chóng thanh toán tiện lợi
Dịch vụ nhanh chóng, giá cả hợp lý
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
Dịch vụ tốt, giá cả hợp lý👍
Rất hay, rất tốt, rất hữu ích
Hỗ trợ rất nhanh và nhiệt tình
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
dịch vụ tốt, thanh toán nhanh chống
Hài lòng dịch vụ của tinohost
Sau khi sử dụng dịch vụ của TinoHost. Mình thấy website load nhanh hơn hẳn so với sử dụng ở nhà cung cấp cũ. Giá cả do mình đc mua với giá sale 99% của TinoHost nên rất là rẻ. Gói mình mua là gòi Hosting Bussiness 20GB. Thông số cấu hình cao nên web load khá mượt
Chúc TinoHost phát triển!
domain rẻ, có nhiều gói hữu ích thích hợp cho sinh viên
Hài lòng về dịch vụ và tư vấn
Dịch vụ tốt . Support nhiệt tình
Chất lượng OK
Nhanh chóng
dịch vụ rất tốt
Nhân viên support nhanh, hỗ trợ nhiệt tình, giao dịch tự động nên khá tiện
Đã dùng nhiều dịch vụ tại Tinohost, chất lượng tốt, rất hài lòng ...😀
Sự dụng rất hài lòng với các dịch vụ của tinohost
Dịch vụ tốt, uy tín chất lượng
Tino dịch vụ quá tuyệt vời
Giá rẻ, dịch vụ tốt, hỗ trợ nhanh chóng
dịch vụ rất tốt rất tuyệt vời
Giá hợp lý cho người mới dùng
Mình thấy Tinohost có giao diện thân thiện, dễ đăng ký sử dụng cho người mới tập tành làm web như mình. Hosting hỗ trợ có nhiều lựa chọn về dung lượng và giá cả! Thanh toán qua momo thuận tiện. Recommended!
wed quá ok làm việc nhanh ngọn
Dịch vụ tốt. Khá hài lòng vì support nhiệt tình
Dịch vụ quá tuyệt vời danh cho các bạn
Xin cảm ơn đội ngủ kỹ thuật. Các bạn rất chuyên nghiệp và thân thiện. Tôi sẽ giới thiệu các bạn cho bạn bè của mình.
Dịch vụ hỗ trợ tốt, ổn định, thanh toán dễ dàng.
Mình từng dùng VPS bên Vietel IDC, hay gặp lỗi vặt và bảo trì liên tục. Nhưng Tino thì rất ok
dùng tốt, nhanh, dễ sử dụng
Giao diện đẹp mắt, dễ sử dụng
Đề nghị xem lại vấn đề phục vụ khách hàng (livchat)!
Good. Tốc độ cao. Tùy chỉnh nhiều trên shared hosting.
hosting ngon, giá luôn rẻ, tôi làm code nhưng rất thích sài host tino
Tino cung cấp host rất chuyên nghiệp. Đội ngũ kỹ thuật hỗ trợ rất tận tâm và nhiệt tình. Mình sẽ tiếp tục ủng hộ Tino 🥰.
Rất tuyệt vời🙆🙆🙆🙆🙆🙆🙆🙆🙆
Xét về tầm giá thì TinoHost rất đáng để mua và sử dụng lâu dài.
Dịch vụ chất lượng, ủng hộ 1 năm nay rồi
tuyệt vời quá đi,tuyệt vời quá đi
Tốc độ ổn định, tư vấn nhiệt tình
mới tham gia, mong mọi người hỗ trợ thêm
Tốc độ khá tốt với gói rẻ nhất 9k
Giao dịch nhanh,support nhanh và tận tình,chuyển miền nhanh,Hosting Ok
mua sản phẩm dịch vụ tinhot rất tốt tặng ad 5tr ** luon nè🥰🥰🥰
tinohost
một truong những nơi bán hosting rẻ, chất lượng dành cho anh em nào cần để làm web
mua tại : tinohost.com
mình đã mua 2 tên miền + hosting của Tino Host . quả nhiên hiệu quả SEO cải thiện đáng kể và chứng chỉ bảo mật HTTPS miễn phí của Tino Host cũng ko kém phần quang trọng cho việc SEO website của mình
Tino host là một trong nhà cung cấp tốt nhất mình từng sử dụng. Với ưu đãi khuyến mại nhiều, giá thành rẻ kèm theo đó là sự support tuyệt vời của các admin. Nếu ai chưa lựa chọn được nhà cung cấp cho bản thân mình thì Tinohost sẽ là câu trả lời tốt nhất.
dịch vụ tốt, đội ngũ support nhiệt tình, cảm ơn #tinohost
Uy tín, chất lượng, nhân viên hỗ trợ nhiệt tình
mua 2 domain tại tinohost dùng rất chất lượng
Đã mua 02 domain và hosting tại TinoHost, hài lòng cách tư vấn và chăm sóc khách hàng của TinoHost :)
Giá rẻ cấu hình mạnh, black friday là sự bùng nổ của Tino
Hay web bán tài nguyên rất ngon
dịch vụ tốt, mua luôn host chất lượng cao của công ty nhân dịp blackfriday, cảm ơn #tinohost
Dịch vụ rất tốt, nhân viên tận tình.
Hỗ trợ nhiệt tình nhất trong các nhà cung cấp mih từng dùng. Không những server mạnh, ưu đãi có 1 không 2 mà còn nhiều plugin pro bản quyền đính kèm nữa. Quyết định gắn bó "Lifetime" với tino 😁
Dịch vụ tốt hỗ trợ nhanh chóng
Thích cách tư vấn tận tình và nhanh gọn của Tino mỗi khi có vấn đề trục trặc. Hosting ổn định, giá rẻ tốt lắm nhé mọi người
mình có mua 2 tên msiền của tino, mình rât thích cách tư vấn và chăm sóc khách hàng tại đây. Ngoài ra giá domain khá rẻ, phù hợp cho mọi người. 5 sao
Dịch vụ tốt, support nhiệt tình
tinohost tuyệt vời giá cả hợp lý
domain mua rất rẻ :))))
tốt, chất lượng, hostingok
Hosting tốt, giá cả cạnh tranh
Tuyệt vời , Hosting quá ổn
Chất lượng lắm ạ. Domain mua rẻ nhất thị trường
Dịch vụ tốt và chất lượng
Chất lượng lắm ạ. Domain mua rẻ nhất thị trường
Tino Host dùng quá ngon đi !💥💥💥💥💥
Tôi đã mua domain và hosting của các nhà cung cấp khác rồi, nhưng thực sự thấy không tốt bằng Tino, ngoài ra còn hỗ trợ rất tốt. Cảm ơn tino nhiều!
Next Reviews
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn,  Phường Bến Nghé, Q. 1, TP. Hồ Chí Minh

Văn phòng kinh doanh: Số 42 Trần Phú, Phường 4, Quận 5, TP HCM
GPKD số 0315679836 do Sở KH và ĐT TP Hồ Chí Minh cấp
Hotline: 0364 333 333
Góp ý/Phản ánh dịch vụ: 0933 000 886