React.Component – Phản ứng – một thành phần trong phản ứng là gì

Bạn đang xem : component trong react là gì

Trang này chứa tham chiếu API chi tiết cho định nghĩa lớp thành phần React. Nó giả định rằng bạn đã quen thuộc với các khái niệm React cơ bản, chẳng hạn như Thành phần và Đạo cụ , cũng như Trạng thái và Vòng đời . Nếu bạn chưa hiểu, hãy đọc chúng trước.

Tổng quan

React cho phép bạn xác định các thành phần dưới dạng lớp hoặc hàm. Các thành phần được định nghĩa là các lớp hiện cung cấp nhiều tính năng hơn được mô tả chi tiết trên trang này. Để xác định một lớp thành phần React, bạn cần mở rộng React.Component :

  

class

Chào mừng

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu"> {

kết xuất

(

)

{

trả về

& lt;

h1

& gt;

Xin chào,

{

cái này

.

đạo cụ

.

tên

}

& lt; /

h1

< p class = "dấu chấm câu"> & gt;

;

}

}

Phương thức duy nhất bạn phải xác định trong React.Component lớp con được gọi là render () . Tất cả các phương pháp khác được mô tả trên trang này là tùy chọn.

Chúng tôi đặc biệt khuyên bạn không nên tạo các lớp thành phần cơ sở của riêng mình. Trong các thành phần React, việc sử dụng lại mã chủ yếu được thực hiện thông qua thành phần thay vì kế thừa .

Lưu ý:

React không buộc bạn sử dụng cú pháp lớp ES6. Nếu muốn tránh nó, bạn có thể sử dụng mô-đun create-react-class hoặc một phần trừu tượng tùy chỉnh tương tự để thay thế. Hãy xem Sử dụng React mà không cần ES6 để tìm hiểu thêm.

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

Mỗi thành phần có một số “phương thức vòng đời” mà bạn có thể ghi đè để chạy mã vào những thời điểm cụ thể trong quy trình. Bạn có thể sử dụng sơ đồ vòng đời này làm bảng gian lận. Trong danh sách dưới đây, các phương pháp vòng đời thường được sử dụng được đánh dấu là < mạnh> đậm . Phần còn lại của chúng tồn tại cho các trường hợp sử dụng tương đối hiếm.

Gắn kết

Các phương thức này được gọi theo thứ tự sau khi một phiên bản của một thành phần đang được tạo và chèn vào DOM:

Lưu ý:

Những phương pháp này được coi là kế thừa và bạn nên tránh chúng trong mã mới:

  • UNSAFE_componentWillMount ()

Đang cập nhật

Một bản cập nhật có thể xảy ra do các thay đổi đối với đạo cụ hoặc trạng thái. Các phương thức này được gọi theo thứ tự sau khi một thành phần đang được hiển thị lại:

Lưu ý:

Những phương pháp này được coi là kế thừa và bạn nên tránh chúng trong mã mới:

  • UNSAFE_componentWillUpdate ()
  • UNSAFE_componentWillReceiveProps ()

Ngắt kết nối

Phương thức này được gọi khi một thành phần đang bị xóa khỏi DOM:

Xử lý lỗi

Các phương thức này được gọi khi có lỗi trong quá trình hiển thị, trong phương thức vòng đời hoặc trong phương thức khởi tạo của bất kỳ thành phần con nào.

Các API khác

Mỗi thành phần cũng cung cấp một số API khác:

Thuộc tính lớp

Thuộc tính phiên bản

Tham chiếu

Các phương pháp vòng đời thường được sử dụng

Các phương pháp trong phần này bao gồm phần lớn các trường hợp sử dụng mà bạn sẽ gặp phải khi tạo các thành phần React. Để tham khảo trực quan, hãy xem sơ đồ vòng đời này .

  

kết xuất

(

)

Phương thức render () là chỉ phương thức bắt buộc trong một thành phần lớp.

Khi được gọi, nó sẽ kiểm tra this.props this.state và trả về một trong các loại sau:

  • Phần tử phản ứng. Thường được tạo thông qua JSX . Ví dụ: & lt; div / & gt; & lt; MyComponent / & gt; là React các phần tử hướng dẫn React hiển thị nút DOM hoặc một thành phần khác do người dùng xác định tương ứng.
  • Mảng và đoạn. Cho phép bạn trả về nhiều phần tử từ kết xuất. Xem tài liệu về mảnh vỡ để biết thêm chi tiết.
  • Cổng thông tin . Cho phép bạn kết xuất các phần tử con vào một cây con DOM khác. Xem tài liệu trên cổng thông tin để biết thêm chi tiết.
  • Chuỗi và số. Chúng được hiển thị dưới dạng các nút văn bản trong DOM.
  • Booleans hoặc null . Không hiển thị gì. (Chủ yếu tồn tại để hỗ trợ test trả về & amp; & amp; & lt; Child / & gt; pattern, trong đó test < / code> là boolean.)

Hàm render () phải thuần túy, có nghĩa là nó không sửa đổi trạng thái thành phần, nó trả về cùng một kết quả mỗi khi nó được gọi và không tương tác trực tiếp với trình duyệt.

Nếu bạn cần tương tác với trình duyệt, hãy thực hiện công việc của mình trong componentDidMount () hoặc các phương thức vòng đời khác. Giữ cho render () thuần túy giúp cho các thành phần dễ nghĩ hơn.

Lưu ý

render () sẽ không được gọi nếu shouldComponentUpdate () < / span> trả về false.

  

hàm tạo

( đạo cụ

)

Nếu bạn không khởi tạo trạng thái và không ràng buộc các phương thức, bạn không cần triển khai một phương thức khởi tạo cho thành phần React của bạn.

Hàm tạo cho một thành phần React được gọi trước khi nó được gắn kết. Khi triển khai hàm tạo cho lớp con React.Component , bạn nên gọi super (props) trước bất kỳ tuyên bố nào khác. Nếu không, this.props sẽ không được xác định trong hàm tạo, điều này có thể dẫn đến lỗi.

Thông thường, trong React, các hàm tạo chỉ được sử dụng cho hai mục đích:

  • Khởi tạo local state bằng cách gán một đối tượng cho this.state .
  • Ràng buộc các phương thức trình xử lý sự kiện với một phiên bản.

Bạn không nên gọi setState () trong constructor () . Thay vào đó, nếu thành phần của bạn cần sử dụng trạng thái cục bộ, hãy gán trạng thái ban đầu cho this.state trực tiếp trong hàm tạo:

  

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

bộ đếm

:

0

}

;

this

.

Xử lýNhấp vào

=

this

.

handleClick

.

< p class = "chức năng mã thông báo"> ràng buộc

(

cái này

)

;

}

Constructor là nơi duy nhất bạn nên chỉ định trực tiếp this.state . Trong tất cả các phương pháp khác, bạn cần sử dụng this.setState () để thay thế.

Tránh giới thiệu bất kỳ tác dụng phụ hoặc đăng ký nào trong hàm tạo. Đối với những trường hợp sử dụng đó, hãy sử dụng componentDidMount () để thay thế.

Lưu ý

Tránh sao chép đạo cụ vào trạng thái! Đây là một lỗi phổ biến:

  

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

color

:

đạo cụ

. < / p> color

}

;

}

Vấn đề là cả hai đều không cần thiết (bạn có thể sử dụng cái này. props.color thay thế trực tiếp) và tạo lỗi (các bản cập nhật cho color prop sẽ không được phản ánh trong trạng thái).

Chỉ sử dụng mẫu này nếu bạn cố ý muốn bỏ qua các bản cập nhật của phần mềm. Trong trường hợp đó, bạn nên đổi tên phần hỗ trợ được gọi là initialColor hoặc defaultColor . Sau đó, bạn có thể buộc một thành phần “đặt lại” trạng thái bên trong của nó bằng cách thay đổi khóa khi cần thiết.

Đọc bài đăng trên blog của chúng tôi về việc tránh trạng thái bắt nguồn để tìm hiểu về những việc cần làm nếu bạn cho rằng mình cần một số trạng thái để phụ thuộc vào các đạo cụ.

  

componentDidMount

(

)

componentDidMount () được gọi ngay sau đó một thành phần được gắn kết (được chèn vào cây). Quá trình khởi tạo yêu cầu các nút DOM sẽ được thực hiện tại đây. Nếu bạn cần tải dữ liệu từ một điểm cuối từ xa, thì đây là một nơi tốt để thực hiện yêu cầu mạng.

Phương pháp này là một nơi tốt để thiết lập bất kỳ đăng ký nào. Nếu bạn làm vậy, đừng quên hủy đăng ký trong componentWillUnmount () .

Bạn có thể gọi setState () ngay lập tức trong componentDidMount () < / mã>. Nó sẽ kích hoạt một kết xuất bổ sung, nhưng nó sẽ xảy ra trước khi trình duyệt cập nhật màn hình. Điều này đảm bảo rằng mặc dù render () sẽ được gọi hai lần trong trường hợp này, người dùng sẽ không thấy trạng thái trung gian. Sử dụng mẫu này một cách thận trọng vì nó thường gây ra các vấn đề về hiệu suất. Trong hầu hết các trường hợp, bạn có thể chỉ định trạng thái ban đầu trong constructor () . Tuy nhiên, nó có thể cần thiết cho các trường hợp như phương thức và chú giải công cụ khi bạn cần đo lường một nút DOM trước khi hiển thị thứ gì đó phụ thuộc vào kích thước hoặc vị trí của nó.

  

componentDidUpdate

( prevProps

,

prevState

,

ảnh chụp nhanh

)

componentDidUpdate () được gọi ngay sau khi cập nhật xảy ra. Phương thức này không được gọi cho lần hiển thị ban đầu.

Sử dụng điều này như một cơ hội để hoạt động trên DOM khi thành phần đã được cập nhật. Đây cũng là một nơi tốt để thực hiện các yêu cầu mạng miễn là bạn so sánh các đạo cụ hiện tại với các đạo cụ trước đó (ví dụ: yêu cầu mạng có thể không cần thiết nếu các đạo cụ không thay đổi).

  

componentDidUpdate

(

presProps

)

{

nếu

(

cái này

.

đạo cụ

.

userID

! == < / p> userID

)

{

this

.

fetchData

(

cái này

.

đạo cụ

.

userID

)

;

}

}

Bạn có thể gọi setState () ngay lập tức trong componentDidUpdate () nhưng lưu ý rằng nó phải được bao bọc trong một điều kiện như trong ví dụ trên, hoặc bạn sẽ gây ra một vòng lặp vô hạn. Nó cũng sẽ gây ra một kết xuất bổ sung, mặc dù không hiển thị cho người dùng, nhưng có thể ảnh hưởng đến hiệu suất của thành phần. Nếu bạn đang cố gắng “phản chiếu” trạng thái nào đó với một điểm tựa đến từ phía trên, hãy cân nhắc sử dụng điểm tựa trực tiếp để thay thế. Đọc thêm về tại sao sao chép đạo cụ vào trạng thái lại gây ra lỗi .

Nếu thành phần của bạn triển khai vòng đời getSnapshotBeforeUpdate () (hiếm gặp), giá trị mà nó trả về sẽ được chuyển dưới dạng tham số “snapshot” thứ ba cho < code class = "gatsby-code-text"> componentDidUpdate () . Nếu không, thông số này sẽ không được xác định.

Lưu ý

componentDidUpdate () sẽ không được gọi nếu shouldComponentUpdate () < / span> trả về false.

  

componentWillUnmount

(

)

componentWillUnmount () được gọi ngay trước đó một thành phần không được gắn kết và bị phá hủy. Thực hiện mọi thao tác dọn dẹp cần thiết trong phương pháp này, chẳng hạn như vô hiệu hóa bộ hẹn giờ, hủy yêu cầu mạng hoặc xóa mọi đăng ký đã được tạo trong componentDidMount () .

Bạn không nên gọi setState () trong componentWillUnmount () < / code> bởi vì thành phần sẽ không bao giờ được hiển thị lại. Sau khi một phiên bản thành phần được ngắt kết nối, nó sẽ không bao giờ được gắn kết lại.

Các phương pháp vòng đời hiếm được sử dụng

Các phương pháp trong phần này tương ứng với các trường hợp sử dụng không phổ biến. Thỉnh thoảng, chúng rất hữu ích, nhưng hầu hết các thành phần của bạn có thể không cần bất kỳ thành phần nào trong số chúng. Bạn có thể xem hầu hết các phương pháp bên dưới trên sơ đồ vòng đời này nếu bạn nhấp vào hộp kiểm “Hiển thị các vòng đời ít phổ biến hơn” ở đầu nó .

  

shouldComponentUpdate

( nextProps

,

nextState

)

Sử dụng shouldComponentUpdate () để cho React biết nếu đầu ra của một thành phần không bị ảnh hưởng bởi sự thay đổi trạng thái hoặc đạo cụ hiện tại. Hành vi mặc định là hiển thị lại mọi thay đổi trạng thái và trong phần lớn các trường hợp, bạn nên dựa vào hành vi mặc định.

shouldComponentUpdate () được gọi trước khi hiển thị khi nhận được các đạo cụ hoặc trạng thái mới. Mặc định là true . Phương thức này không được gọi cho lần hiển thị ban đầu hoặc khi forceUpdate () được sử dụng.

Phương pháp này chỉ tồn tại dưới dạng tối ưu hóa hiệu suất . Không dựa vào phương pháp này để “ngăn chặn” hiển thị, vì điều này có thể dẫn đến lỗi. Cân nhắc sử dụng PureComponent tích hợp sẵn thay vì viết shouldComponentUpdate () bằng tay. PureComponent thực hiện một phép so sánh chi tiết giữa các đạo cụ và trạng thái, đồng thời giảm khả năng bạn bỏ qua bản cập nhật cần thiết.

Nếu bạn tự tin rằng mình muốn viết nó bằng tay, bạn có thể so sánh this.props với nextProps this.state với nextState và trả về false để nói với React rằng bản cập nhật có thể bị bỏ qua. Lưu ý rằng việc trả về false không ngăn các thành phần con hiển thị lại khi trạng thái của chúng thay đổi.

Chúng tôi khuyên bạn không nên thực hiện kiểm tra bình đẳng sâu hoặc sử dụng JSON.stringify () trong shouldComponentUpdate () . Nó rất kém hiệu quả và sẽ gây hại cho hiệu suất.

Hiện tại, nếu shouldComponentUpdate () trả về false , thì UNSAFE_componentWillUpdate () , render () < / span> và componentDidUpdate () sẽ không được gọi. Trong tương lai, React có thể coi shouldComponentUpdate () như một gợi ý thay vì một chỉ thị nghiêm ngặt và trả về false < / code> vẫn có thể dẫn đến kết xuất thành phần.

static getDerivedStateFromProps ()

  

static

getDerivedStateFromProps

(

đạo cụ

,

bang

)

getDerivedStateFromProps được gọi ngay trước khi gọi phương thức kết xuất, cả trên mount ban đầu và trên các bản cập nhật tiếp theo. Nó sẽ trả về một đối tượng để cập nhật trạng thái hoặc null để không cập nhật gì.

Phương pháp này tồn tại cho các trường hợp sử dụng hiếm gặp trong đó trạng thái phụ thuộc vào các thay đổi về đạo cụ theo thời gian. Ví dụ: có thể hữu ích khi triển khai thành phần & lt; Transition & gt; để so sánh các thành phần trước và sau của nó để quyết định xem thành phần nào trong số chúng sẽ tạo hoạt ảnh trong và ngoài. < / p>

Trạng thái phát sinh dẫn đến mã dài dòng và khiến các thành phần của bạn khó suy nghĩ.
Đảm bảo bạn đã quen với các lựa chọn thay thế đơn giản hơn:

  • Nếu bạn cần thực hiện hiệu ứng phụ (ví dụ: tìm nạp dữ liệu hoặc hoạt ảnh) để đáp ứng với sự thay đổi về đạo cụ, hãy sử dụng key thay thế.

Phương thức này không có quyền truy cập vào phiên bản thành phần. Nếu muốn, bạn có thể sử dụng lại một số mã giữa getDerivedStateFromProps () và các phương thức lớp khác bằng cách trích xuất các hàm thuần túy của các đạo cụ thành phần và trạng thái bên ngoài định nghĩa lớp .

Lưu ý rằng phương thức này được kích hoạt trên mọi lần hiển thị, bất kể nguyên nhân là gì. Điều này trái ngược với UNSAFE_componentWillReceiveProps , chỉ kích hoạt khi cấp độ gốc tạo ra kết xuất lại chứ không phải do setState .

  

getSnapshotBeforeUpdate

( prevProps

,

prevState

)

getSnapshotBeforeUpdate () được gọi ngay trước khi kết xuất hiển thị gần đây nhất được cam kết với ví dụ: DOM. Nó cho phép thành phần của bạn nắm bắt một số thông tin từ DOM (ví dụ: vị trí cuộn) trước khi nó có khả năng bị thay đổi. Bất kỳ giá trị nào được trả về bởi phương thức vòng đời này sẽ được chuyển dưới dạng tham số cho componentDidUpdate () .

Trường hợp sử dụng này không phổ biến nhưng nó có thể xảy ra trong giao diện người dùng như chuỗi trò chuyện cần xử lý vị trí cuộn theo cách đặc biệt.

Giá trị ảnh chụp nhanh (hoặc null ) phải được trả về.

Ví dụ:

  

class

ScrollingList

expand

React

.

Thành phần

{

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

listRef

=

React

.

createRef

(

)

;

}

getSnapshotBeforeUpdate

(

prevProps

, PreState

)

{

nếu

(

thịnh hành

.

danh sách

.

length

& lt;

this

. đạo cụ

.

danh sách

.

length

)

{

const

list

=

this

.

listRef

.

hiện tại

;

return

danh sách

.

scrollHeight

-

danh sách

.

scrollTop

;

}

trả về

null

;

}

componentDidUpdate

(

prevProps

, PreState

,

ảnh chụp nhanh

)

{

if

(

ảnh chụp nhanh

! ==

null

)

{

const

list

=

this

.

listRef

.

hiện tại

;

danh sách

.

scrollTop

=

danh sách

.

scrollHeight

-

ảnh chụp nhanh

;

}

}

kết xuất

(

)

{

trả về

(

& lt;

div

ref

=

{

cái này

.

listRef

}

& gt;

{

}

& lt; /

div

& gt;

)

;

}

}

Trong các ví dụ trên, điều quan trọng là phải đọc thuộc tính scrollHeight trong getSnapshotBeforeUpdate bởi vì có thể có độ trễ giữa các vòng đời của pha “kết xuất” (như kết xuất ) và các vòng đời của giai đoạn "cam kết" (như getSnapshotBeforeUpdate componentDidUpdate ).

Ranh giới lỗi

Ranh giới lỗi là các thành phần React bắt lỗi JavaScript ở bất kỳ đâu trong cây thành phần con của chúng, ghi lại các lỗi đó và hiển thị giao diện người dùng dự phòng thay vì cây thành phần bị lỗi. Các ranh giới lỗi bắt lỗi trong quá trình hiển thị, trong các phương thức vòng đời và trong các hàm tạo của toàn bộ cây bên dưới chúng.

Một thành phần lớp trở thành ranh giới lỗi nếu nó xác định một trong hai (hoặc cả hai) phương thức vòng đời static getDerivedStateFromError () hoặc componentDidCatch () . Cập nhật trạng thái từ các vòng đời này cho phép bạn ghi lại lỗi JavaScript chưa được xử lý trong cây bên dưới và hiển thị giao diện người dùng dự phòng.

Chỉ sử dụng các ranh giới lỗi để khôi phục từ các trường hợp ngoại lệ không mong muốn; đừng cố sử dụng chúng để kiểm soát luồng.

Để biết thêm chi tiết, hãy xem Xử lý lỗi trong React 16 .

Lưu ý

Các ranh giới lỗi chỉ bắt lỗi trong các thành phần bên dưới chúng trong cây. Ranh giới lỗi không thể tự bắt lỗi.

static getDerivedStateFromError ()

  

static

getDerivedStateFromError

(

error

)

Vòng đời này được gọi sau khi lỗi đã được tạo ra bởi một thành phần con cháu.
Nó nhận được lỗi được đưa ra dưới dạng một tham số và sẽ trả về một giá trị để cập nhật trạng thái.

  

class

ErrorBoundary

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

this

.

state

=

{

hasError

:

sai

}

;

}

static

getDerivedStateFromError

(

lỗi

)

{

return

{

hasError

:

true

}

;

}

kết xuất

(

)

{

nếu

(

cái này

.

bang

.

hasError

)

{

trả về

& lt;

h1

& gt;

Đã xảy ra lỗi.

< p class = "thẻ mã thông báo">

& lt; /

h1

& gt;

;

}

trả về

cái này

.

đạo cụ

.

con

;

}

}

Lưu ý

getDerivedStateFromError () được gọi trong giai đoạn "kết xuất", do đó, tác dụng phụ không được phép.
Đối với những trường hợp sử dụng đó, hãy sử dụng componentDidCatch () để thay thế.

  

componentDidCatch

( lỗi

,

thông tin

)

Vòng đời này được gọi sau một lỗi đã bị ném bởi một thành phần con cháu.
Nó nhận được hai tham số:

  1. error - Lỗi đã xảy ra.
  2. info - Một đối tượng có khóa componentStack chứa thông tin về thành phần đã gây ra lỗi .

componentDidCatch () được gọi trong giai đoạn “cam kết”, vì vậy các tác dụng phụ được phép.
Nó nên được sử dụng cho những thứ như lỗi ghi nhật ký:

  

class

ErrorBoundary

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu"> {

hàm tạo

(

đạo cụ

)

{

super

(

đạo cụ

)

;

cái này

.

bang

=

{

hasError

:

false

} p>

;

}

static

getDerivedStateFromError

(

lỗi

)

{

trả về

{

hasError

:

true

}

;

>

}

componentDidCatch

(

lỗi

,

thông tin

)

{

< / p>

logComponentStackToMyService

(

thông tin

.

componentStack

)

;

}

kết xuất

(

)

{

nếu

(

cái này

.

trạng thái

.

hasError

)

{

trả về

& lt;

h1 p>

& gt;

Đã xảy ra lỗi p class = "token tag">

& lt; /

h1

& gt;

;

}

trả về

cái này

.

đạo cụ

.

con

;

}

}

Có nhiều loại thành phần khác nhau có sẵn để tải xuống.) xử lý lỗi.

Khi đang phát triển, các lỗi sẽ xuất hiện trong window , có nghĩa là bất kỳ window.onerror nào hoặc window.addEventListener ('error', callback) > componentDidCatch () .

Thay vào đó, khi sản xuất, các lỗi sẽ không nổi lên, có nghĩa là bất kỳ trình xử lý lỗi tổ tiên nào sẽ chỉ nhận được các lỗi không được componentDidCatch () phát hiện một cách rõ ràng.

Lưu ý

Trong trường hợp xảy ra lỗi, bạn có thể hiển thị giao diện người dùng dự phòng với componentDidCatch () bằng cách gọi setState , nhưng tính năng này sẽ không được dùng nữa trong bản phát hành trong tương lai.
Thay vào đó, hãy sử dụng static getDerivedStateFromError () để xử lý kết xuất dự phòng

Phương thức vòng đời kế thừa

Các phương pháp vòng đời bên dưới được đánh dấu là "kế thừa". Chúng vẫn hoạt động, nhưng chúng tôi khuyên bạn không nên sử dụng chúng trong mã mới. Bạn có thể tìm hiểu thêm về cách chuyển khỏi các phương pháp vòng đời cũ trong bài đăng trên blog này

 

UNSAFE_componentWillMount

(

)

Lưu ý

Vòng đời này trước đây được đặt tên là componentWillMount . Sử dụng rename-secure-livesecycles codemod để tự động cập nhật các thành phần của bạn. < / p>

UNSAFE_componentWillMount () được gọi ngay trước khi quá trình gắn xảy ra. Nó được gọi trước render (), do đó việc gọi đồng bộ setState () trong phương thức này sẽ không kích hoạt hiển thị thêm. Nói chung, chúng tôi khuyên bạn nên sử dụng constructor () để thay thế cho trạng thái khởi tạo.

Tránh giới thiệu bất kỳ tác dụng phụ hoặc đăng ký nào trong phương pháp này. Đối với những trường hợp sử dụng đó, hãy sử dụng componentDidMount () để thay thế.

Đây là phương pháp vòng đời duy nhất được gọi khi hiển thị trên máy chủ.

  

UNSAFE_componentWillReceiveProps

( nextProps

)

Lưu ý

Vòng đời này trước đây được đặt tên là componentWillReceiveProps . Tên đó sẽ tiếp tục hoạt động cho đến phiên bản 17. Sử dụng rename-secure-lifeecycles codemod < / span> để tự động cập nhật các thành phần của bạn.

UNSAFE_componentWillReceiveProps () được gọi trước khi một thành phần được gắn kết nhận được các đạo cụ mới. Nếu bạn cần cập nhật trạng thái để đáp ứng với các thay đổi của prop (ví dụ: để đặt lại nó), bạn có thể so sánh this.props nextProps và thực hiện chuyển đổi trạng thái bằng cách sử dụng this.setState () trong phương thức này.

Lưu ý rằng nếu một thành phần chính khiến thành phần của bạn hiển thị lại, thì phương thức này sẽ được gọi ngay cả khi các đạo cụ không thay đổi. Đảm bảo so sánh giá trị hiện tại và giá trị tiếp theo nếu bạn chỉ muốn xử lý các thay đổi.

React không gọi UNSAFE_componentWillReceiveProps () với các đạo cụ ban đầu trong quá trình mount . Nó chỉ gọi phương thức này nếu một số đạo cụ của thành phần có thể cập nhật. Gọi this.setState () thường không kích hoạt UNSAFE_componentWillReceiveProps () .

  

UNSAFE_componentWillUpdate

( nextProps

,

nextState

)

Lưu ý

Vòng đời này trước đây được đặt tên là componentWillUpdate . Tên đó sẽ tiếp tục hoạt động cho đến phiên bản 17. Sử dụng rename-secure-lifeecycles codemod < / span> để tự động cập nhật các thành phần của bạn.

UNSAFE_componentWillUpdate () được gọi ngay trước khi hiển thị khi nhận được các đạo cụ hoặc trạng thái mới. Sử dụng điều này như một cơ hội để thực hiện chuẩn bị trước khi cập nhật xảy ra. Phương thức này không được gọi cho lần hiển thị ban đầu.

Lưu ý rằng bạn không thể gọi this.setState () tại đây; bạn cũng không nên làm bất cứ điều gì khác (ví dụ: gửi một hành động Redux) sẽ kích hoạt bản cập nhật cho thành phần React trước khi trả về UNSAFE_componentWillUpdate () .

Thông thường, phương thức này có thể được thay thế bằng componentDidUpdate () . Nếu bạn đang đọc từ DOM trong phương thức này (ví dụ: để lưu vị trí cuộn), bạn có thể di chuyển logic đó đến getSnapshotBeforeUpdate () .

Lưu ý

UNSAFE_componentWillUpdate () sẽ không được gọi nếu shouldComponentUpdate () < / span> trả về false.

Các API khác

Không giống như các phương thức vòng đời ở trên (mà React gọi cho bạn), các phương thức bên dưới là các phương thức bạn có thể gọi từ các thành phần của mình.

Chỉ có hai trong số chúng: setState () forceUpdate () .

  

setState

( updater

[

,

gọi lại

]

)

setState () xếp hàng đợi các thay đổi đối với trạng thái thành phần và cho React biết điều đó thành phần này và các thành phần con của nó cần được hiển thị lại với trạng thái đã cập nhật. Đây là phương pháp chính mà bạn sử dụng để cập nhật giao diện người dùng theo phản hồi của trình xử lý sự kiện và phản hồi của máy chủ.

Hãy nghĩ đến setState () như một yêu cầu thay vì một lệnh tức thì để cập nhật thành phần. Để có hiệu suất tốt hơn, React có thể trì hoãn nó và sau đó cập nhật một số thành phần chỉ trong một lần xử lý. Trong trường hợp hiếm hoi bạn cần áp dụng đồng bộ bản cập nhật DOM, bạn có thể bọc nó trong flushSync , nhưng điều này có thể làm giảm hiệu suất.

setState () không phải lúc nào cũng cập nhật thành phần ngay lập tức. Nó có thể hàng loạt hoặc trì hoãn cập nhật cho đến sau này. Điều này khiến cho việc đọc this.state ngay sau khi gọi setState () là một cạm bẫy tiềm ẩn. Thay vào đó, hãy sử dụng lệnh gọi lại componentDidUpdate hoặc setState ( setState (updater, callback) ), một trong số đó được đảm bảo kích hoạt sau khi áp dụng bản cập nhật. Nếu bạn cần đặt trạng thái dựa trên trạng thái trước đó, hãy đọc về đối số updater bên dưới.

setState () sẽ luôn dẫn đến kết xuất lại trừ khi shouldComponentUpdate () trả về false . Nếu các đối tượng có thể thay đổi đang được sử dụng và không thể triển khai logic hiển thị có điều kiện trong shouldComponentUpdate () , hãy gọi setState () chỉ khi trạng thái mới khác với trạng thái trước đó sẽ tránh hiển thị không cần thiết.

Đối số đầu tiên là một hàm updater với chữ ký:

  

(

trạng thái

,

đạo cụ

)

= & gt;

stateChange

state là tham chiếu đến trạng thái thành phần tại thời điểm áp dụng thay đổi. Nó không nên bị đột biến trực tiếp. Thay vào đó, các thay đổi phải được thể hiện bằng cách tạo một đối tượng mới dựa trên đầu vào từ state props . Ví dụ: giả sử chúng ta muốn tăng một giá trị ở trạng thái bằng props.step :

  

cái này

.

setState

(

(

trạng thái

,

đạo cụ

)

= & gt; < / p>

{

trả về

{

bộ đếm

:

bang

.

bộ đếm

+

đạo cụ

.

bước

}

;

}

)

;

Cả state props mà chức năng cập nhật nhận được đều được đảm bảo là đến nay. Đầu ra của trình cập nhật được hợp nhất nông với state .

Tham số thứ hai của setState () là một hàm gọi lại tùy chọn sẽ được thực thi sau khi setState < / code> được hoàn thành và thành phần được hiển thị lại. Nói chung, chúng tôi khuyên bạn nên sử dụng componentDidUpdate () cho logic như vậy thay thế.

Bạn có thể tùy ý chuyển một đối tượng làm đối số đầu tiên cho setState () thay vì một hàm:

  

setState

( stateChange

[

,

gọi lại

]

)

Điều này thực hiện hợp nhất nông stateChange vào trạng thái mới, ví dụ: , để điều chỉnh số lượng mặt hàng trong giỏ hàng:

  

cái này

.

setState

(

{

số lượng

:

2

} < / p>

)

Biểu mẫu này của setState () cũng không đồng bộ và nhiều cuộc gọi trong cùng một chu kỳ có thể được ghép nối với nhau. Ví dụ: nếu bạn cố gắng tăng số lượng mặt hàng nhiều hơn một lần trong cùng một chu kỳ, điều đó sẽ dẫn đến:

  Đối tượng 

.

gán < / p>

(

beforeState

,

> "dấu chấm câu mã thông báo">.

số lượng

+

1

} < / p>

,

> "dấu chấm câu mã thông báo">.

số lượng

+

1

} < / p>

,

...

)

Các cuộc gọi tiếp theo sẽ ghi đè các giá trị từ các cuộc gọi trước trong cùng một chu kỳ, vì vậy số lượng sẽ chỉ được tăng lên một lần. Nếu trạng thái tiếp theo phụ thuộc vào trạng thái hiện tại, chúng tôi khuyên bạn nên sử dụng biểu mẫu hàm trình cập nhật, thay vào đó:

  

cái này

.

setState

(

(

trạng thái

)

= & gt;

{

trả về

{

số lượng

:

bang

.

số lượng

+

1 < / p>

}

;

}

)

;

Để biết thêm chi tiết, hãy xem:

  thành phần 

.

forceUpdate < / p>

(

gọi lại

)

Theo mặc định, khi trạng thái thành phần của bạn hoặc thay đổi đạo cụ, thành phần của bạn sẽ hiển thị lại. Nếu phương thức render () của bạn phụ thuộc vào một số dữ liệu khác, bạn có thể cho React biết rằng thành phần cần kết xuất lại bằng cách gọi forceUpdate () .

Gọi forceUpdate () sẽ khiến render () được gọi trên thành phần , bỏ qua shouldComponentUpdate () . Điều này sẽ kích hoạt các phương thức vòng đời bình thường cho các thành phần con, bao gồm phương thức shouldComponentUpdate () của mỗi thành phần con. React sẽ vẫn chỉ cập nhật DOM nếu đánh dấu thay đổi.

Thông thường, bạn nên cố gắng tránh tất cả việc sử dụng forceUpdate () và chỉ đọc từ this.props this.state trong render () .

Thuộc tính lớp

defaultProps

defaultProps có thể được định nghĩa như một thuộc tính trên chính lớp thành phần, để đặt các đạo cụ mặc định cho lớp. Điều này được sử dụng cho undefined props, nhưng không dùng cho null props. Ví dụ:

  

class

CustomButton

mở rộng

React

.

Thành phần

< p class = "dấu chấm câu"> {

}

CustomButton

.

defaultProps

=

{

color

:

'blue'

}

;

Nếu props.color không được cung cấp, nó sẽ được đặt theo mặc định thành 'blue' :

  

kết xuất

(

)

{

trả về

& lt;

CustomButton

/ & gt;

;

}

Nếu props.color được đặt thành null , nó sẽ vẫn là null :

  

kết xuất

(

)

{

trả về

& lt;

CustomButton

color

=

{

null

}

/ & gt;

;

}

displayName

Chuỗi displayName được sử dụng trong thông báo gỡ lỗi. Thông thường, bạn không cần đặt nó một cách rõ ràng vì nó được suy ra từ tên của hàm hoặc lớp xác định thành phần. Bạn có thể muốn đặt nó một cách rõ ràng nếu bạn muốn hiển thị một tên khác cho mục đích gỡ lỗi hoặc khi bạn tạo một thành phần cấp cao hơn, hãy xem Gói tên hiển thị để gỡ lỗi dễ dàng để biết chi tiết.

Thuộc tính phiên bản

đạo cụ

this.props chứa các đạo cụ được xác định bởi người gọi thành phần này. Xem Thành phần và Đạo cụ để biết phần giới thiệu về các đạo cụ.

Cụ thể, this.props.children là một phần mềm hỗ trợ đặc biệt, thường được xác định bởi các thẻ con trong biểu thức JSX chứ không phải trong chính thẻ đó. < / p>

state

Trạng thái chứa dữ liệu cụ thể cho thành phần này có thể thay đổi theo thời gian. Trạng thái do người dùng xác định và nó phải là một đối tượng JavaScript thuần túy.

Nếu một số giá trị không được sử dụng để hiển thị hoặc luồng dữ liệu (ví dụ: ID bộ hẹn giờ), bạn không cần phải đặt nó ở trạng thái. Các giá trị như vậy có thể được xác định là các trường trên phiên bản thành phần.

Xem Trạng thái và Vòng đời để biết thêm thông tin về trạng thái.

Không bao giờ thay đổi trực tiếp this.state , vì việc gọi setState () sau đó có thể thay thế đột biến bạn đã thực hiện. Đối xử với this.state như thể nó là bất biến.


Xem thêm những thông tin liên quan đến chủ đề một thành phần trong phản ứng là gì

FEB 13, 2021 | Police Chief Candidate Forum

  • Tác giả: City of San Jose, CA
  • Ngày đăng: 2021-02-13
  • Đánh giá: 4 ⭐ ( 1712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Police Chief Candidate Forum:
    The City of San José is in the process of recruiting for a new Chief of Police following the retirement of Chief Eddie Garcia after 29 years of service to our community. During this session, the candidates will answer questions posed by San Joseans.

    Foro de Candidatos a Jefe de Policía:
    La Ciudad de San José está en proceso de reclutar un nuevo Jefe de Policía luego del retiro del Jefe Eddie García después de 29 años de servicio a nuestra comunidad. Durante el Foro, los candidatos responderán a las preguntas planteadas por San Joseanos.

    Buổi Hội Thảo cho Ứng Cử Viên Vị Trí Cảnh Sát Trưởng:
    Thành Phố San José đang trong quá trình kêu gọi và chọn lựa người Cảnh Sát Trưởng mới sau khi Cảnh Sát Trưởng Eddie Garcia đã về hưu sau 29 năm phục vụ cộng đồng. Trong Buổi Hội Thảo, các ứng cử viên sẽ trả lời các câu hỏi của người dân San Jose.

Cách để Tính Entanpy của Phản ứng Hóa học

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 1864 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Tính Entanpy của Phản ứng Hóa học. Trong bất cứ phản ứng hóa học nào, nhiệt có thể hoặc là được thu vào hoặc là thoát ra môi trường xung quanh. Nhiệt độ trao đổi giữa phản ứng hóa học và môi trường xung quanh được gọi là entanpy...

Phần cảm và phần ứng trong máy điện

  • Tác giả: hocthatlamthat.edu.vn
  • Đánh giá: 5 ⭐ ( 3840 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phản ứng thành bụng là gì, nguyên nhân, cơ chế, ý nghĩa, hình ảnh

  • Tác giả: phacdochuabenh.com
  • Đánh giá: 5 ⭐ ( 3657 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

  • Tác giả: hoc24.vn
  • Đánh giá: 4 ⭐ ( 9355 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

Phản Ứng Thế Là Gì, Phản Ứng Thế Trong Hóa Thế Là Gì ? Ví Dụ Phản Ứng Thế

  • Tác giả: baohiemlienviet.com
  • Đánh giá: 3 ⭐ ( 4140 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phản ứng thế là gì? Phương trình phản ứng thế and Một số dạng bài tập – Kiến thức tổng hợp, Bài Viết: Phản ứng thế là gìỞ bên cạnh phản ứng cộng, phản ứng tách thì phản ứng thế cũng là phần kiến thức quan trọng trong chương trình hóa học

CHUẨN BỊ THÀNH PHẦN PHẢN ỨNG REALTIME PCR

  • Tác giả: visitech.vn
  • Đánh giá: 5 ⭐ ( 8490 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thành phần phản ứng realtime PCR: Nước cất; buffer; Mg2+; Enzyme Taq polymerase; dNTP; Primer: 2 loại primer ngược và primer xuôi... thành phần được trộn sẵn supermix/ mastermix... Visi.vn

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

Xem Thêm  Làm cách nào để lặp qua một mảng chuỗi trong Python? - làm thế nào để lặp qua mảng trong python