Các thành phần lớp React – thành phần lớp phản ứng với đạo cụ

Bạn đang xem : thành phần lớp phản ứng với các đạo cụ

Các thành phần lớp React

Trước React 16.8, các thành phần Lớp là cách duy nhất để theo dõi trạng thái và vòng đời của một thành phần React.
Các thành phần chức năng được coi là “không có trạng thái”.

Với việc bổ sung Hooks, các thành phần Hàm giờ đây gần như tương đương với các thành phần Lớp.
Sự khác biệt rất nhỏ nên có thể bạn sẽ không bao giờ cần sử dụng thành phần Class trong React.

Mặc dù các thành phần của Chức năng được ưu tiên hơn, nhưng hiện tại không có kế hoạch nào về việc loại bỏ các thành phần Lớp khỏi React.

Phần này sẽ cung cấp cho bạn tổng quan về cách sử dụng các thành phần Lớp trong React.

Vui lòng bỏ qua phần này và thay vào đó sử dụng Thành phần chức năng.

Thành phần React

Các thành phần là các bit mã độc lập và có thể sử dụng lại.
Chúng phục vụ cùng mục đích như các hàm JavaScript,
nhưng hoạt động độc lập và trả về HTML thông qua hàm render ().

Thành phần có hai loại, Thành phần lớp và Thành phần chức năng, trong
chương này, bạn sẽ tìm hiểu về các thành phần của Lớp.

Tạo thành phần lớp

Khi tạo một thành phần React, tên của thành phần phải bắt đầu bằng
chữ hoa.

Thành phần phải bao gồm câu lệnh expand React.Component , câu lệnh này tạo ra sự kế thừa cho
React.Component và cấp cho thành phần của bạn quyền truy cập vào các chức năng của React.Component.

Thành phần này cũng yêu cầu phương thức render () ,
phương thức này trả về HTML.

Ví dụ

Tạo thành phần Lớp có tên Xe

  class Car mở rộng React.Component {
  kết xuất () {
    quay lại & lt; h2 & gt; Xin chào, Tôi là Xe hơi! & lt; / h2 & gt ;;
  }
}
 

Giờ đây, ứng dụng React của bạn có một thành phần được gọi là Xe, thành phần này trả về
Phần tử & lt; h2 & gt; .

Để sử dụng thành phần này trong ứng dụng của bạn, hãy sử dụng cú pháp tương tự như HTML thông thường:
& lt; Xe / & gt;

Ví dụ

Hiển thị thành phần Xe ô tô trong phần tử “gốc”:

  const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Xe / & gt;);  

Chạy
Ví dụ »

Cấu tạo thành phần

Nếu có một hàm constructor () trong thành phần của bạn, thì hàm này sẽ được gọi khi
thành phần được bắt đầu.

Hàm khởi tạo là nơi bạn khởi tạo các thuộc tính của thành phần.

Trong React, các thuộc tính thành phần phải được giữ trong một đối tượng có tên là
trạng thái .

Bạn sẽ tìm hiểu thêm về state sau
hướng dẫn này.

Hàm khởi tạo cũng là nơi bạn tôn trọng sự kế thừa của
thành phần mẹ bằng cách bao gồm super ()
câu lệnh thực thi hàm khởi tạo của thành phần mẹ và thành phần của bạn có quyền truy cập vào tất cả các hàm của
thành phần mẹ ( React.Component ).

Ví dụ

Tạo một hàm tạo trong thành phần Xe và thêm thuộc tính màu:

  class Car mở rộng React.Component {
  người xây dựng() {
    siêu();
    this.state = {color: "red"};
  }
  kết xuất () {
    quay lại & lt; h2 & gt; Tôi là Xe hơi! & lt; / h2 & gt ;;
  }
}
 

Sử dụng thuộc tính màu trong hàm render ():

Ví dụ

  class Car mở rộng React.Component {
  người xây dựng() {
    siêu();
    this.state = {color: "red"};
  }
  kết xuất () {
    return & lt; h2 & gt; I am a {this.state.color} Car! & lt; / h2 & gt ;;
  }
}
 

Chạy
Ví dụ »

Đạo cụ

Một cách khác để xử lý các thuộc tính thành phần là sử dụng props .

Đạo cụ giống như các đối số của hàm và bạn gửi chúng vào thành phần dưới dạng thuộc tính.

Bạn sẽ tìm hiểu thêm về đạo cụ trong chương tiếp theo.

Ví dụ

Sử dụng một thuộc tính để chuyển một màu cho thành phần Xe và sử dụng nó trong
hàm render ():

  class Car mở rộng React.Component {
  kết xuất () {
    return & lt; h2 & gt; I am a {this.props.color} Car! & lt; / h2 & gt ;;
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Car color = "red" / & gt;);

Chạy
Ví dụ »

Props trong Constructor

Nếu thành phần của bạn có hàm tạo,
các đạo cụ phải luôn được chuyển cho hàm tạo và cả React.Component thông qua phương thức super () .

Ví dụ

  class Car mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
  }
  kết xuất () {
    return & lt; h2 & gt; I am a {this.props.model}! & lt; / h2 & gt ;;
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Car model = "Mustang" / & gt;);
 

Chạy
Ví dụ »

Các thành phần trong các thành phần

Chúng ta có thể tham khảo các thành phần bên trong các thành phần khác:

Ví dụ

Sử dụng thành phần Xe ô tô bên trong thành phần Nhà để xe:

  class Car mở rộng React.Component {
  kết xuất () {
    quay lại & lt; h2 & gt; Tôi là Xe hơi! & lt; / h2 & gt ;;
  }
}

class Garage mở rộng React.Component {
  kết xuất () {
    trở về (
      & lt; div & gt;
      & lt; h1 & gt; Ai sống trong Nhà để xe của tôi? & lt; / h1 & gt;
      & lt; Xe hơi / & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Garage / & gt;);
 

Chạy
Ví dụ »

Các thành phần trong Tệp

React là tất cả về việc sử dụng lại mã và có thể thông minh nếu chèn một số
các thành phần trong các tệp riêng biệt.

Để làm điều đó, hãy tạo một tệp mới với . js
phần mở rộng tệp và đặt mã bên trong nó:

Lưu ý rằng tệp phải bắt đầu bằng cách nhập React (như trước đây) và nó phải
kết thúc bằng câu lệnh xuất Xe ô tô mặc định; .

Ví dụ

Đây là tệp mới, chúng tôi đặt tên là Car.js :

  nhập React từ 'react';

class Car mở rộng React.Component {
  kết xuất () {
    quay lại & lt; h2 & gt; Xin chào, Tôi là Xe hơi! & lt; / h2 & gt ;;
  }
}

xuất xe mặc định;
 

Để có thể sử dụng thành phần Xe hơi , bạn phải nhập tệp vào
ứng dụng.

Ví dụ

Bây giờ, chúng tôi nhập tệp Car.js vào ứng dụng và chúng tôi có thể sử dụng
Xe ô tô
như thể nó được tạo ở đây.

  nhập React từ 'react';
nhập ReactDOM từ 'react-dom / client';
nhập Xe từ './Car.js';

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Xe / & gt;);
 

Chạy
Ví dụ »

Xem Thêm  Cách thay đổi màu phông chữ HTML - mã màu phông chữ html

Trạng thái thành phần lớp phản ứng

Các thành phần React Class có đối tượng trạng thái được tích hợp sẵn.

Bạn có thể nhận thấy rằng chúng tôi đã sử dụng state trước đó trong phần hàm tạo thành phần.

Đối tượng state là nơi bạn lưu trữ các giá trị thuộc tính của thành phần.

Khi đối tượng state thay đổi, thành phần sẽ hiển thị lại.

Tạo đối tượng trạng thái

Đối tượng trạng thái được khởi tạo trong hàm tạo:

Ví dụ

Chỉ định đối tượng state trong phương thức hàm tạo:

  class Car mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
  this.state = {thương hiệu: "Ford"};
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; h1 & gt; Xe của tôi & lt; / h1 & gt;
      & lt; / div & gt;
    );
  }
}
 

Đối tượng trạng thái có thể chứa bao nhiêu thuộc tính tùy thích:

Ví dụ

Chỉ định tất cả các thuộc tính mà thành phần của bạn cần:

  class Car mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      nhãn hiệu: "Ford",
      mô hình: "Mustang",
      màu đỏ",
      năm: 1964
    };
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; h1 & gt; Xe của tôi & lt; / h1 & gt;
      & lt; / div & gt;
    );
  }
}
 

Sử dụng state Object

Tham khảo đối tượng state ở bất kỳ đâu trong thành phần bằng cách sử dụng
this.state.propertyname cú pháp:

Ví dụ:

Tham khảo đối tượng state trong
phương thức render () :

 class Car mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      nhãn hiệu: "Ford",
      mô hình: "Mustang",
      màu đỏ",
      năm: 1964
    };
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; h1 & gt; {this.state.brand} của tôi & lt; / h1 & gt;
        & lt; p & gt;
          Đó là {this.state.color}
          {this.state.model}
          từ {this.state.year}.
        & lt; / p & gt;
      & lt; / div & gt;
    );
  }
}
 

Chạy
Ví dụ »

Thay đổi trạng thái Đối tượng

Để thay đổi giá trị trong đối tượng trạng thái, hãy sử dụng phương thức this.setState () .

Khi một giá trị trong đối tượng trạng thái thay đổi,
thành phần sẽ hiển thị lại, có nghĩa là đầu ra sẽ thay đổi theo
(các) giá trị mới.

Ví dụ:

Thêm nút có sự kiện onClick
sẽ thay đổi thuộc tính màu:

  class Car mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      nhãn hiệu: "Ford",
      mô hình: "Mustang",
      màu đỏ",
      năm: 1964
    };
  }
  changeColor = () = & gt; {
    this.setState ({color: "blue"});
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; h1 & gt; {this.state.brand} của tôi & lt; / h1 & gt;
        & lt; p & gt;
          Đó là {this.state.color}
          {this.state.model}
          từ {this.state.year}.
        & lt; / p & gt;
        nút & lt;
          type = "nút"
          onClick = {this.changeColor}
        & gt; Thay đổi màu & lt; / nút & gt;
      & lt; / div & gt;
    );
  }
}
 

Chạy
Ví dụ »

Luôn sử dụng phương thức setState () để thay đổi đối tượng trạng thái,
nó sẽ đảm bảo rằng thành phần biết rằng nó đã được cập nhật và gọi phương thức render ()
(và tất cả các phương pháp vòng đời khác).

Vòng đời của các thành phần

Mỗi thành phần trong React có một vòng đời mà bạn có thể theo dõi và thao tác trong quá trình
ba giai đoạn chính.

Ba giai đoạn là: Gắn kết , Cập nhật
Ngắt kết nối .

Gắn kết

Gắn kết có nghĩa là đưa các phần tử vào DOM.

React có bốn phương thức tích hợp được gọi, theo thứ tự này, khi
gắn một thành phần:

  1. constructor ()
  2. getDerivedStateFromProps ()
  3. render ()
  4. componentDidMount ()

Phương thức render () là bắt buộc và sẽ
luôn được gọi, những cái khác là tùy chọn và sẽ được gọi nếu bạn xác định chúng.

hàm tạo

Phương thức constructor () được gọi trước bất kỳ phương thức nào khác,
khi thành phần được khởi tạo và nó là tự nhiên
nơi để thiết lập trạng thái ban đầu và trạng thái khác
giá trị ban đầu.

Phương thức constructor () được gọi với
props , dưới dạng đối số và bạn phải luôn
bắt đầu bằng cách gọi super (props) trước
bất kỳ thứ gì khác, điều này sẽ khởi tạo phương thức khởi tạo của cha mẹ và cho phép
thành phần kế thừa các phương thức từ cha của nó ( React.Component ).

Ví dụ:

Phương thức constructor được gọi, bằng cách
Phản ứng, mỗi khi bạn tạo một thành phần:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  kết xuất () {
    trở về (
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

getDerivedStateFromProps

Phương thức getDerivedStateFromProps ()
được gọi ngay trước khi hiển thị (các) phần tử trong DOM.

Đây là vị trí tự nhiên để đặt đối tượng trạng thái dựa trên giá trị ban đầu
đạo cụ .

Phải mất
trạng thái
dưới dạng đối số và trả về một đối tượng với các thay đổi đối với
state .

Ví dụ dưới đây bắt đầu với màu yêu thích là
“đỏ”, nhưng

Phương thức getDerivedStateFromProps ()
cập nhật màu yêu thích dựa trên
Thuộc tính favcol :

Ví dụ:

getDerivedStateFromPropsPhương thức được gọi là
ngay trước phương thức kết xuất:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps (đạo cụ, trạng thái) {
    return {favoritecolor: props.favcol};
  }
  kết xuất () {
    trở về (
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header favcol = "yellow" / & gt;);  

Chạy
Ví dụ »

kết xuất

Phương thức render () là bắt buộc và là phương thức
phương thức thực sự xuất HTML ra DOM.

Ví dụ:

Một thành phần đơn giản với render () đơn giản
phương pháp:

  class Header mở rộng React.Component {
  kết xuất () {
    trở về (
      & lt; h1 & gt; Đây là nội dung của thành phần Tiêu đề & lt; / h1 & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

componentDidMount

Phương thức componentDidMount () được gọi sau
thành phần được hiển thị.

Xem Thêm  Cách trích xuất một năm từ một ngày trong SQL - trích xuất năm kể từ ngày trong máy chủ sql

Đây là nơi bạn chạy các câu lệnh yêu cầu thành phần đó đã được đặt trong DOM.

Ví dụ:

Lúc đầu, màu yêu thích của tôi là màu đỏ, nhưng hãy chờ tôi một chút, màu đó là màu vàng
thay vào đó:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount () {
    setTimeout (() = & gt; {
      this.setState ({favoritecolor: "yellow"})
    }, 1000)
  }
  kết xuất () {
    trở về (
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

Đang cập nhật

Giai đoạn tiếp theo trong vòng đời là khi một thành phần được cập nhật.

Một thành phần được cập nhật bất cứ khi nào có thay đổi trong thành phần
state hoặc props .

React có năm phương thức tích hợp được gọi, theo thứ tự này, khi một thành phần
được cập nhật:

  1. getDerivedStateFromProps ()
  2. shouldComponentUpdate ()
  3. render ()
  4. getSnapshotBeforeUpdate ()
  5. componentDidUpdate ()

Phương thức render () là bắt buộc và sẽ
luôn được gọi, những cái khác là tùy chọn và sẽ được gọi nếu bạn xác định chúng.

getDerivedStateFromProps

Cũng tại các bản cập nhật, phương thức getDerivedStateFromProps
gọi là. Đây là phương thức đầu tiên được gọi khi một thành phần được cập nhật.

Đây vẫn là nơi tự nhiên để đặt đối tượng state dựa trên các đạo cụ ban đầu.

Ví dụ dưới đây có một nút thay đổi màu yêu thích thành xanh lam, nhưng
vì phương thức getDerivedStateFromProps () được gọi,
cập nhật trạng thái với màu từ thuộc tính favcol, màu yêu thích là
còn
được hiển thị dưới dạng màu vàng:

Ví dụ:

Nếu thành phần được cập nhật, phương thức getDerivedStateFromProps () được gọi là:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps (đạo cụ, trạng thái) {
    return {favoritecolor: props.favcol};
  }
  changeColor = () = & gt; {
    this.setState ({favoritecolor: "blue"});
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
      & lt; button type = "button" onClick = {this.changeColor} & gt; Thay đổi màu & lt; / button & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header favcol = "yellow" / & gt;);
 

Chạy
Ví dụ »

shouldComponentUpdate

Trong phương thức shouldComponentUpdate ()
bạn có thể trả về giá trị Boolean chỉ định liệu React có nên tiếp tục hiển thị hay không.

Giá trị mặc định là true .

Ví dụ dưới đây cho thấy điều gì sẽ xảy ra khi
trả về phương thức shouldComponentUpdate ()
false :

Ví dụ:

Ngừng hiển thị thành phần ở bất kỳ bản cập nhật nào:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate () {
    trả về sai;
  }
  changeColor = () = & gt; {
    this.setState ({favoritecolor: "blue"});
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
      & lt; button type = "button" onClick = {this.changeColor} & gt; Thay đổi màu & lt; / button & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

Ví dụ:

Tương tự như ví dụ trên, nhưng lần này phương thức shouldComponentUpdate () trả về
true thay vào đó:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate () {
    trả về true;
  }
  changeColor = () = & gt; {
    this.setState ({favoritecolor: "blue"});
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
      & lt; button type = "button" onClick = {this.changeColor} & gt; Thay đổi màu & lt; / button & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

kết xuất

Tất nhiên, phương thức render () được gọi khi một thành phần được cập nhật,
nó phải kết xuất lại HTML thành DOM với những thay đổi mới.

Ví dụ bên dưới có một nút thay đổi màu yêu thích thành xanh lam:

Ví dụ:

Nhấp vào nút để thực hiện thay đổi trạng thái của thành phần:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () = & gt; {
    this.setState ({favoritecolor: "blue"});
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
      & lt; button type = "button" onClick = {this.changeColor} & gt; Thay đổi màu & lt; / button & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

getSnapshotBeforeUpdate

Trong phương thức getSnapshotBeforeUpdate ()
bạn có quyền truy cập vào đạo cụ
trạng thái trước khi cập nhật, nghĩa là
ngay cả sau khi cập nhật, bạn có thể kiểm tra các giá trị trước khi
cập nhật.

Nếu phương thức getSnapshotBeforeUpdate ()
hiện tại, bạn cũng nên bao gồm
phương thức componentDidUpdate ()
, nếu không bạn sẽ gặp lỗi.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là thế này:

Khi thành phần được gắn kết, thành phần đó sẽ được hiển thị với thành phần yêu thích
màu “đỏ”.

Khi thành phần đã được gắn kết, bộ hẹn giờ sẽ thay đổi trạng thái và
sau một giây, màu yêu thích sẽ trở thành “vàng”.

Hành động này kích hoạt giai đoạn cập nhật và vì thành phần này có
phương thức getSnapshotBeforeUpdate ()
, phương thức này được thực thi và viết một
thông báo đến phần tử DIV1 trống.

Sau đó, phương thức componentDidUpdate ()
đã thực thi và viết thông báo trong phần tử DIV2 trống:

Ví dụ:

Sử dụng
Phương thức getSnapshotBeforeUpdate () để tìm hiểu
đối tượng trạng thái trông như thế nào trước đây
bản cập nhật:

 class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount () {
    setTimeout (() = & gt; {
      this.setState ({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate (prevProps, prevState) {
    document.getElementById ("div1"). innerHTML =
    "Trước khi cập nhật, yêu thích là" + prevState.favoritecolor;
  }
  componentDidUpdate () {
    document.getElementById ("div2"). innerHTML =
    "Yêu thích được cập nhật là" + this.state.favoritecolor;
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
        & lt; div id = "div1" & gt; & lt; / div & gt;
        & lt; div id = "div2" & gt; & lt; / div & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

Xem Thêm  'Div' trong HTML là gì? - ý nghĩa div trong html

componentDidUpdate

Phương thức componentDidUpdate
được gọi sau khi thành phần được cập nhật trong DOM.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là thế này:

Khi thành phần được gắn kết, thành phần đó sẽ được hiển thị với thành phần yêu thích
màu “đỏ”.

Khi thành phần đã được gắn kết, bộ hẹn giờ sẽ thay đổi trạng thái và
màu trở thành “vàng”.

Hành động này kích hoạt giai đoạn cập nhật và vì thành phần này có
một phương thức componentDidUpdate , phương pháp này là
đã thực thi và viết thông báo trong phần tử DIV trống:

Ví dụ:

Phương thức componentDidUpdate được gọi
sau khi bản cập nhật được hiển thị trong DOM:

  class Header mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount () {
    setTimeout (() = & gt; {
      this.setState ({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate () {
    document.getElementById ("mydiv"). innerHTML =
    "Yêu thích được cập nhật là" + this.state.favoritecolor;
  }
  kết xuất () {
    trở về (
      & lt; div & gt;
      & lt; h1 & gt; Màu Yêu thích của Tôi là {this.state.favoritecolor} & lt; / h1 & gt;
      & lt; div id = "mydiv" & gt; & lt; / div & gt;
      & lt; / div & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Header / & gt;);
 

Chạy
Ví dụ »

Ngắt kết nối

Giai đoạn tiếp theo trong vòng đời là khi một thành phần bị xóa khỏi DOM hoặc ngắt kết nối như React thích gọi nó.

React chỉ có một phương thức tích hợp được gọi khi một thành phần được ngắt kết nối:

  • componentWillUnmount ()

componentWillUnmount

Phương thức componentWillUnmount
được gọi khi thành phần sắp bị xóa khỏi DOM.

Ví dụ:

Nhấp vào nút để xóa tiêu đề:

  class Container mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {show: true};
  }
  delHeader = () = & gt; {
    this.setState ({show: false});
  }
  kết xuất () {
    hãy để myheader;
    if (this.state.show) {
      myheader = & lt; Con / & gt ;;
    };
    trở về (
      & lt; div & gt;
      {myheader}
      & lt; button type = "button" onClick = {this.delHeader} & gt; Xóa Tiêu đề & lt; / button & gt;
      & lt; / div & gt;
    );
  }
}

class Con mở rộng React.Component {
  componentWillUnmount () {
    alert ("Thành phần có tên Header sắp được ngắt kết nối.");
  }
  kết xuất () {
    trở về (
      & lt; h1 & gt; Hello World! & lt; / h1 & gt;
    );
  }
}

const root = ReactDOM.createRoot (document.getElementById ('root'));
root.render (& lt; Container / & gt;);
 

Chạy
Ví dụ »


Xem thêm những thông tin liên quan đến chủ đề thành phần lớp phản ứng với đạo cụ

[Thuyết Minh] NỮ HỌC BÁ THÂN YÊU – Tập 02 | Phim Ngôn Tình Thanh Xuân Siêu Lãng Mạn 2021

  • Tác giả: MangoTV Vietnam
  • Ngày đăng: 2021-05-22
  • Đánh giá: 4 ⭐ ( 5432 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ➤ Xem Thêm Nhiều Phim Hay: https://bit.ly/3dLRHCC​​​
    ➤ Trọn Bộ NỮ HỌC BÁ THÂN YÊU Thuyết Minh: https://bit.ly/3vfoVDk
    ➤ Download app Mango tại: http://bit.ly/2XG1OUZ​​​

    ✤ Đạo diễn: Trần Phi Hoằng
    ✤ Diễn viên: Lý Lan Địch, Lại Quán Lâm
    ✤ NỮ HỌC BÁ THÂN YÊU (Đừng Làm Phiền Tôi Học) kể về giám đốc trẻ tuổi Nam Hướng Vãn (Lý Lan Địch), cô mắc phải chứng bệnh kỳ thị bằng cấp. Để điều trị, Nam Hướng Vãn sử dụng công nghệ cao, đưa cô trở về ký ức của 10 năm trước, đối mặt với quá khứ một lần nữa mới có thể chữa lành căn bệnh. Nam Hướng Vãn phải xử lý những vấn đề trước kia cô từng trải qua: quấy rầy bạn học, hận gia đình, bất hòa với bạn cùng lớp. Lúc này Hướng Vãn kết thân với bạn học Lâm Kiêu Nhiên (Lại Quán Lâm), cả hai cùng nhau phấn đấu vượt qua rào cản của bản thân. Để cuối cùng Hướng Vãn có thể nhận ra ý nghĩa thực sự của cuộc sống, từ đó xóa bỏ chướng ngại tâm lý một lần nữa xây dựng thanh xuân tươi đẹp.

    © Bản quyền thuộc về : MGTV VietNam
    © Copyright by MGTV VietNam ☞ Do not Reup

cung phản xạ là gì? gồm những thành phần nào

  • Tác giả: hoc24.vn
  • Đánh giá: 3 ⭐ ( 7525 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: cung phản xạ là gì? gồm những thành phần nào

Polymerasa Chain Reaction (PCR) và các thành phần của phản ứng PCR

  • Tác giả: visitech.vn
  • Đánh giá: 4 ⭐ ( 4332 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: PCR – phản ứng khuếch đại gene, là kỹ thuật phổ biến trong sinh học phân tử nhằm khuếch đại (tạo ra nhiều bản sao) từ một đoạn DNA mục tiêu.

Hướng dẫn phản ứng với đạo cụ – Phần III

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 8851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trước đây chúng ta đã học cách truyền đạo cụ trong phản ứng và cả cách giao tiếp gián tiếp giữa các thành phần bằng cách sử dụng đạo cụ . Hôm nay, chúng ta sẽ đến trận chung kết của loạt…

Tổng hợp kiến thức Hóa học lớp 10 phần phản ứng hóa học

  • Tác giả: ccedu.vn
  • Đánh giá: 4 ⭐ ( 3669 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp kiến thức hóa học lớp 10 phần phản ứng hóa học giúp học sinh nhớ lại những lý thuyết cũng như công thức hóa học cơ bản liên quan đến đề thi THPT …

Phản ứng hóa học hữu cơ, các loại phản ứng thế, phản ứng cộng và phản ứng tách – Hóa 11 bài 23

  • Tác giả: thptsoctrang.edu.vn
  • Đánh giá: 3 ⭐ ( 3798 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở bài học trước các em đã biết nội dung cơ bản của thuyết cấu tạo hóa học, khái niệm về đồng đẳng và đồng phân và cấu trúc phân tử của hợp chất hữu cơ.

Bài tập trọng tâm về phản ứng hóa học

  • Tác giả: hoahoc247.com
  • Đánh giá: 3 ⭐ ( 6139 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đừng lo lắng khi các bạn không biết xác định đâu là chất tham gia đâu là sản phẩm của phản ứng hóa học, cũng như không biết …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình