Home / Tin tức / sự khác biệt giữa componentwillmount và componentdidmount trong reactjs là gì?

Sự Khác Biệt Giữa Componentwillmount Và Componentdidmount Trong Reactjs Là Gì?

admin - 28/07/2021 516

Giới thiệu văn bản bài xích viết

Chào các em, lúc này anh đang trả lời phần đông tín đồ đọc về vòng đời của Component trong reactjs.

Bạn đang xem: Sự khác biệt giữa componentwillmount và componentdidmount trong reactjs là gì?

1. componentWillMount là gì

Pmùi hương thức componentWillMount được tiến hành trước khi hình ảnh được render ra màn hình nghỉ ngơi cả hệ thống cùng client side.

2. componentDidMount là gì

Pmùi hương thức componentDidMount được thực thi sau thời điểm render đầu tiên được có mặt nghỉ ngơi phía client. Thông thường đầy đủ request dạng AJAX, DOM hoặc cập nhật state chúng ta nhằm trong cách thức này

3. componentWillReceiveProps là gì

Pmùi hương thức componentWillReceiveProps được call Khi quý hiếm trong props được update trước khi hình ảnh được render ra.

Xem thêm: Hướng Dẫn Chơi Last Day On Earth, : Survival : Last Day On Earth: Survival

4. shouldComponentUpdate là gì

Pmùi hương thức shouldComponentUpdate trả về kết quả true hoặc false. Pmùi hương thức này giúp chúng ta nhận biết component sẽ tiến hành cập nhật hay là không được update. Giá trị phương diện định là true. Nếu mình chắc chắn là rằng component không cần thiết phải render sau khoản thời gian state hoặc props được update thì bạn cũng có thể trả về thành quả false.

Xem thêm: Hack Bug Súng Cf - Phần Mềm Bug Súng Cf

5. componentWillUpdate là gì

Phương thức componentWillUpdate được Điện thoại tư vấn trước lúc component được rendering (vẽ ra hình ảnh trên web)

6. componentDidUpdate là gì

Phương thơm thức componentDidUpdate được Điện thoại tư vấn sau khoản thời gian component được rendering (vẽ ra hình ảnh trên web)

7. componentWillUnmount là gì

Phương thức componentWillUnmount được Gọi sau khi component unmount tự dom. Chúng ta vẫn unmount component vào tệp tin main.js

lấy một ví dụ dưới đây bọn họ đã phối giá trị ban sơ trong state trong constructor. Sau kia setNewnumber sẽ tiến hành dùng để làm update state.

File App.jsx

12345678

import React from "react";import ReactDOM from "react-dom";import App from "./App.jsx";ReactDOM.render(App/>, document.getElementById("app"));setTimeout(() => ReactDOM.unmountComponentAtNode(document.getElementById("app"));, 10000);