Sử dụng Hiệu ứng Hook – Phản ứng – tác dụng làm gì

Bạn đang xem : useeffect làm gì

Hooks là một bổ sung mới trong React 16.8. Họ cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết lớp.

Effect Hook cho phép bạn thực hiện các hiệu ứng phụ trong các thành phần chức năng:

  

nhập React

,

{

useState

,

useEffect

}

từ

'phản ứng'

;

function

Ví dụ

(

)

{

const

[

count

,

setCount

]

=

useState

(

0

)

;

useEffect

(

(

)

= & gt;

{

document

.

title

=

`

Bạn đã nhấp vào

$ {

đếm

}

lần

`

;

}

)

;

trả về

(

& lt;

div

& gt; < / p>

& lt;

p < / p>

& gt;

Bạn đã nhấp vào

{< / p> đếm

}

lần

& lt; /

p

& gt;

& lt;

nút < / p>

onClick

=

{

(

)

= & gt;

setCount

(

count

+

< p class = "token number"> 1

)

}

& gt;

Nhấp vào tôi

Nút

& lt; /

& gt;

& lt; /

div

& gt;

)

;

}

Đoạn mã này dựa trên ví dụ về bộ đếm từ trang trước , nhưng chúng tôi đã thêm một đoạn mã mới tính năng của nó: chúng tôi đặt tiêu đề tài liệu thành một thông báo tùy chỉnh bao gồm số lần nhấp.

Tìm nạp dữ liệu, thiết lập đăng ký và thay đổi thủ công các thành phần DOM trong React đều là những ví dụ về tác dụng phụ. Cho dù bạn có quen gọi các thao tác này là “tác dụng phụ” (hay chỉ là “hiệu ứng”) hay không, bạn có thể đã thực hiện chúng trong các thành phần của mình trước đây.

Mẹo

Nếu bạn đã quen thuộc với các phương thức vòng đời của lớp React, bạn có thể nghĩ đến useEffect Hook as componentDidMount , componentDidUpdate componentWillUnmount kết hợp với nhau.

Có hai loại tác dụng phụ phổ biến trong các thành phần React: những tác dụng phụ không yêu cầu dọn dẹp và những tác dụng phụ có. Hãy xem xét sự khác biệt này chi tiết hơn.

Hiệu ứng mà không cần dọn dẹp

Đôi khi, chúng tôi muốn chạy một số mã bổ sung sau khi React đã cập nhật DOM. Yêu cầu mạng, đột biến DOM thủ công và ghi nhật ký là những ví dụ phổ biến về các hiệu ứng không yêu cầu dọn dẹp. Chúng tôi nói như vậy bởi vì chúng tôi có thể chạy chúng và ngay lập tức quên chúng đi. Hãy so sánh cách các lớp học và Hooks cho phép chúng tôi thể hiện các tác dụng phụ như vậy.

Ví dụ về sử dụng các lớp

Trong các thành phần lớp React, bản thân phương thức render không được gây ra tác dụng phụ. Còn quá sớm – chúng tôi thường muốn thực hiện các hiệu ứng của mình sau khi React cập nhật DOM.

Đây là lý do tại sao trong các lớp React, chúng tôi đưa các hiệu ứng phụ vào componentDidMount componentDidUpdate . Quay lại với ví dụ của chúng ta, đây là thành phần lớp phản ứng React cập nhật tiêu đề tài liệu ngay sau khi React thực hiện các thay đổi đối với DOM:

  

class

Ví dụ

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

=

{

số lượng

:

0

}

;

}

componentDidMount

(

)

{

document

. < / p> title

=

`

Bạn đã nhấp vào

$ {

này

.

bang

.

đếm

}

< / p>

lần

`

;

}

componentDidUpdate

(

)

{< / p>

document

.

title

=

`

Bạn đã nhấp vào mã thông báo

$ {

cái này

.

trạng thái

.

đếm

}

lần

`

;

}

kết xuất

(

)

{

trả về

(

& lt;

div

& gt; < / p>

& lt;

p < / p>

& gt;

Bạn đã nhấp vào

{

this

.

bang

.

đếm

}

lần

& lt; /

p

& gt;

& lt;

nút < / p>

onClick

=

{

(

)

= & gt;

cái này

.

setState

(

{

đếm

:

cái này

.

bang

.

đếm

+

1

}

)

}

& gt;

Nhấp vào tôi

Nút

& lt; /

& gt;

& lt; /

div

& gt;

)

;

}

}

Lưu ý cách chúng ta phải sao chép mã giữa hai phương thức vòng đời này trong lớp. p>

Điều này là do trong nhiều trường hợp, chúng tôi muốn thực hiện cùng một tác dụng phụ bất kể thành phần vừa được gắn kết hay đã được cập nhật. Về mặt khái niệm, chúng tôi muốn nó xảy ra sau mỗi lần hiển thị – nhưng các thành phần lớp React không có phương thức như thế này. Chúng tôi có thể trích xuất một phương thức riêng biệt nhưng chúng tôi vẫn phải gọi nó ở hai nơi.

Bây giờ, hãy xem cách chúng ta có thể làm điều tương tự với useEffect Hook.

Ví dụ về Sử dụng Hooks

Chúng tôi đã thấy ví dụ này ở đầu trang này, nhưng hãy xem xét kỹ hơn:

  

nhập React

,

{

useState

,

useEffect

}

'phản ứng'

;

function

Ví dụ

(

)

{

const

[

count

,

setCount

]

=

useState

(

0

)

;

useEffect

(

(

)

= & gt;

{

document

.

title

=

`

Bạn đã nhấp vào nội suy mã thông báo

$ {

count

}

lần

`

;

}

)

;

trả về

(

& lt;

div

& gt; < / p>

& lt;

p < / p>

& gt;

Bạn đã nhấp vào

{

count

}

lần

& lt; /

p

& gt;

& lt;

nút < / p>

onClick

=

{

(

)

= & gt;

setCount

(

count

+

< p class = "token number"> 1

)

}

& gt;

Nhấp vào tôi

Nút

& lt; /

& gt;

& lt; /

div

& gt;

)

;

}

useEffect làm gì? < / strong> Bằng cách sử dụng Hook này, bạn nói với React rằng thành phần của bạn cần phải làm gì đó sau khi kết xuất. React sẽ ghi nhớ chức năng bạn đã truyền (chúng tôi sẽ gọi nó là “hiệu ứng” của chúng tôi) và gọi nó sau khi thực hiện cập nhật DOM. Do đó, chúng tôi đặt tiêu đề tài liệu nhưng chúng tôi cũng có thể thực hiện tìm nạp dữ liệu hoặc gọi một số API bắt buộc khác.

Tại sao useEffect được gọi bên trong một thành phần? Đặt useEffect bên trong thành phần cho phép chúng tôi truy cập biến trạng thái count (hoặc bất kỳ đạo cụ nào) ngay từ hiệu ứng. Chúng tôi không cần một API đặc biệt để đọc nó - nó đã có trong phạm vi chức năng. Hooks nắm lấy các đóng JavaScript và tránh giới thiệu các API dành riêng cho React mà JavaScript đã cung cấp giải pháp.

useEffect có chạy sau mỗi lần hiển thị không? Có! Theo mặc định, nó chạy cả sau lần hiển thị đầu tiên và sau mỗi lần cập nhật. (Sau này chúng ta sẽ nói về cách tùy chỉnh điều này .) Thay vì nghĩ về “gắn kết” và “cập nhật”, bạn có thể thấy dễ dàng hơn khi nghĩ rằng các hiệu ứng xảy ra “sau khi kết xuất”. React đảm bảo DOM đã được cập nhật vào thời điểm nó chạy các hiệu ứng.

Giải thích chi tiết

Giờ chúng ta đã biết nhiều hơn về các hiệu ứng, những dòng này sẽ có ý nghĩa:

  

function

Ví dụ

(

)

{

const

[

count

,

setCount

]

=

useState

(

0

)

;

useEffect

(

(

)

= & gt;

{

tài liệu

.

title

=

`

Bạn đã nhấp vào

$ {

đếm

}

lần

`< / p>

;

}

)

;

}

Chúng tôi khai báo biến trạng thái count , sau đó chúng tôi nói với React rằng chúng tôi cần sử dụng một hiệu ứng. Chúng tôi chuyển một hàm cho useEffect Hook. Chức năng này chúng tôi vượt qua là hiệu ứng của chúng tôi. Bên trong hiệu ứng của chúng tôi, chúng tôi đặt tiêu đề tài liệu bằng cách sử dụng API trình duyệt document.title . Chúng ta có thể đọc số lượng mới nhất bên trong hiệu ứng vì nó nằm trong phạm vi chức năng của chúng tôi. Khi React hiển thị thành phần của chúng ta, nó sẽ ghi nhớ hiệu ứng mà chúng ta đã sử dụng và sau đó chạy hiệu ứng của chúng ta sau khi cập nhật DOM. Điều này xảy ra cho mọi lần hiển thị, kể cả lần hiển thị đầu tiên.

Các nhà phát triển JavaScript có kinh nghiệm có thể nhận thấy rằng hàm được chuyển đến useEffect sẽ khác nhau trên mỗi lần hiển thị. Đây là cố ý. Trên thực tế, đây là thứ cho phép chúng ta đọc giá trị count từ bên trong hiệu ứng mà không lo nó bị cũ. Mỗi lần kết xuất lại, chúng tôi lên lịch cho một hiệu ứng khác, thay thế cho hiệu ứng trước đó. Theo một cách nào đó, điều này làm cho các hiệu ứng hoạt động giống như một phần của kết quả hiển thị hơn - mỗi hiệu ứng “thuộc về” một kết xuất cụ thể. Chúng ta sẽ thấy rõ hơn tại sao điều này lại hữu ích sau trên trang này .

Mẹo

Không giống như componentDidMount hoặc componentDidUpdate , các hiệu ứng được lập lịch với useEffect không chặn trình duyệt cập nhật màn hình. Điều này làm cho ứng dụng của bạn hoạt động nhanh hơn. Phần lớn các hiệu ứng không cần phải diễn ra đồng bộ. Trong những trường hợp không phổ biến khi chúng thực hiện (chẳng hạn như đo bố cục), có một useLayoutEffect riêng biệt với API giống hệt với < code class = "gatsby-code-text"> useEffect .

Hiệu ứng với Dọn dẹp

Trước đó, chúng ta đã xem xét cách thể hiện các tác dụng phụ mà không cần phải dọn dẹp. Tuy nhiên, một số hiệu ứng có. Ví dụ: chúng tôi có thể muốn thiết lập đăng ký cho một số nguồn dữ liệu bên ngoài. Trong trường hợp đó, điều quan trọng là phải dọn dẹp để chúng tôi không gây rò rỉ bộ nhớ! Hãy so sánh cách chúng ta có thể làm điều đó với các lớp học và với Hooks.

Ví dụ về Sử dụng Lớp

Trong một lớp React, bạn thường sẽ thiết lập đăng ký trong componentDidMount và dọn dẹp nó trong componentWillUnmount . Ví dụ: giả sử chúng tôi có mô-đun ChatAPI cho phép chúng tôi đăng ký trạng thái trực tuyến của một người bạn. Dưới đây là cách chúng tôi có thể đăng ký và hiển thị trạng thái đó bằng cách sử dụng một lớp học:

  

class

FriendStatus

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

=

{

isOnline

:

null

}

;

this

.

handleStatusChange

=

this

.

handleStatusChange

.

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

(

cái này

)

;

}

componentDidMount

(

)

{

ChatAPI

. < / p>

subscribeToFriendStatus

(

< p class = "từ khóa mã thông báo"> cái này

.

đạo cụ

.

bạn

.

id

,

cái này

.

handleStatusChange

)

;

}

componentWillUnmount

(

)

{

ChatAPI

(

this

.

đạo cụ

.

bạn

.

id

,

cái này

.

handleStatusChange

)

; < / p>

}

handleStatusChange

(

< p class = "tham số mã thông báo"> sta tus

)

{

this

"> (

{

< p class = "gatsby-highlight-code-line">

isOnline

:

trạng thái

.

isOnline

}

)

;

}

kết xuất

(

)

{

nếu

(

cái này

.

trạng thái

.

isOnline

===

null p>

)

{

return

'Đang tải ...'

;

}

return

this

.

trạng thái

.

isOnline

?

'Trực tuyến'

: p>

'Ngoại tuyến'

;

}

}

Lưu ý cách componentDidMount componentWillUnmount cần sao chép lẫn nhau. Các phương pháp vòng đời buộc chúng ta phải phân chia logic này mặc dù về mặt khái niệm, mã của cả hai phương pháp đều có cùng tác dụng.

Lưu ý

Người đọc có đôi mắt đại bàng có thể nhận thấy rằng ví dụ này cũng yêu cầu phương thức componentDidUpdate hoàn toàn chính xác. Chúng tôi sẽ bỏ qua điều này ngay bây giờ nhưng sẽ quay lại vấn đề này trong phần sau của trang này.

Ví dụ về Sử dụng Hooks

Hãy xem cách chúng tôi có thể viết thành phần này với Hooks

Bạn có thể nghĩ rằng chúng tôi cần một hiệu ứng riêng để thực hiện dọn dẹp. Tuy nhiên, mã để thêm và xóa đăng ký có liên quan chặt chẽ đến mức useEffect được thiết kế để giữ cho chúng cùng nhau. Nếu hiệu ứng của bạn trả về một hàm, React sẽ chạy nó khi đến lúc dọn dẹp:

 

import

React

,

{

useState

,

useEffect

}

từ

'phản ứng'

;

function

FriendStatus

(

đạo cụ

)

{

const

[

isOnline

,

setIsOnline

]

=

useState

(

null

)

;

useEffect

(

(

)

= & gt;

{

chức năng

handleStatusChange

(

trạng thái

)

{

setIsOnline

(

trạng thái

.

isOnline

)

;

}

ChatAPI

.

subscribeToFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

)

;

trả về

chức năng

dọn dẹp

(

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

đạo cụ

.

> bạn

.

id

,

handleStatusChange

)

;

}

;

}

)

;

nếu

(

isOnline

===

null

)

{

return

'Đang tải ...'

;

}

return

isOnline

?

'Trực tuyến'

:

'Ngoại tuyến'

;

}

Cơ chế dọn dẹp hiệu ứng là cơ chế dọn dẹp tùy chọn cho các hiệu ứng …. Mọi hiệu ứng có thể trả về một chức năng làm sạch sau nó. Điều này cho phép chúng tôi giữ logic cho việc thêm và xóa các đăng ký gần nhau. Chúng là một phần của cùng một hiệu ứng!

Chính xác thì khi nào React dọn dẹp một hiệu ứng? Tuy nhiên, như chúng ta đã tìm hiểu trước đó, các hiệu ứng chạy cho mọi lần hiển thị chứ không chỉ một lần. Đây là lý do tại sao React cũng dọn dẹp các hiệu ứng từ lần hiển thị trước trước khi chạy các hiệu ứng lần sau. Chúng ta sẽ thảo luận về lý do tại sao điều này giúp tránh lỗi cách chọn không tham gia hành vi này trong trường hợp nó tạo ra các vấn đề về hiệu suất ở phần sau bên dưới

Lưu ý

Chúng tôi không phải trả về một hàm đã đặt tên từ hiệu ứng. Chúng tôi đã gọi nó là cleanup ở đây để làm rõ mục đích của nó, nhưng bạn có thể trả về một hàm mũi tên hoặc gọi nó là một cái gì đó khác.

Chúng tôi đã biết rằng useEffect cho phép chúng tôi thể hiện các loại tác dụng phụ khác nhau sau khi một thành phần hiển thị. Một số hiệu ứng có thể yêu cầu dọn dẹp để chúng trả về một chức năng:

  

useEffect

(

(

)

= & gt;

{

function

handleStatusChange

(

trạng thái

)

{

setIsOnline

(

trạng thái

.

isOnline

)

;

}

ChatAPI

.

subscribeToFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

) < / p>

;

trở lại

(

)

= & gt;

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

) < / p>

;

}

;

}

)

;

Các hiệu ứng khác có thể không có giai đoạn dọn dẹp và có thể không trả lại bất kỳ thứ gì.

  

useEffect

(

(

)

= & gt;

{

tài liệu

.

title

=

`

Bạn đã nhấp vào

$ {

đếm

}

lần

`< / p>

;

}

)

;

Effect Hook hợp nhất cả hai trường hợp sử dụng với một API duy nhất.

Nếu bạn cảm thấy mình đã hiểu rõ về cách hoạt động của Effect Hook hoặc nếu bạn cảm thấy quá tải, bạn có thể chuyển đến trang tiếp theo về Quy tắc của Hooks ngay bây giờ.

Mẹo Sử dụng Hiệu ứng

Chúng tôi sẽ tiếp tục trang này với cái nhìn sâu hơn về một số khía cạnh của useEffect mà người dùng React có kinh nghiệm có thể sẽ tò mò. Đừng cảm thấy bắt buộc phải tìm hiểu chúng ngay bây giờ. Bạn luôn có thể quay lại trang này để tìm hiểu thêm chi tiết về Móc hiệu ứng.

Mẹo: Sử dụng nhiều hiệu ứng để phân tách các mối quan tâm

Một trong những vấn đề mà chúng tôi đã nêu ra trong Động lực cho Hooks là các phương thức vòng đời của lớp thường chứa logic không liên quan, nhưng logic liên quan được chia thành nhiều phương thức. Đây là một thành phần kết hợp bộ đếm và logic chỉ báo trạng thái bạn bè từ các ví dụ trước:

  

class

FriendStatusWithCounter

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

=

{

count

:

0 p>

,

isOnline

:

< p class = "từ khóa mã thông báo"> null

}

;

this

.

handleStatusChange

=

this

.

handleStatusChange

p class =" hàm mã thông báo "> ràng buộc

(

cái này

)

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

}

componentDidMount

(

)

{

tài liệu

.

title

=

`

Bạn đã nhấp vào

$ {

this

.

bang

.

count

}

lần

`

;

ChatAPI

.

subscribeToFriendStatus

(

this

.

đạo cụ

.

bạn

.

id

,

this

.

handleStatusChange

)

;

}

componentDidUpdate

(

)

{

tài liệu

.

title

=

`

Bạn đã nhấp vào

$ {

this

.

bang

.

count

}

lần

`

;

}

componentWillUnmount

(

)

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

this

.

đạo cụ

.

bạn

.

id

,

this

.

handleStatusChange

)

;

}

handleStatusChange

(

trạng thái

)

{

this

setState

> (

{

isOnline

:

trạng thái

.

isOnline

}

)

;

}

Lưu ý cách logic đặt document.title được phân tách giữa .> componentDidMount . Logic đăng ký cũng được phân bố giữa componentDidMount componentWillUnmount . Và componentDidMount chứa mã cho cả hai tác vụ.

Vì vậy, làm cách nào Hooks có thể giải quyết vấn đề này? Giống như bạn có thể sử dụng State Hook nhiều lần , bạn cũng có thể sử dụng một số hiệu ứng. Điều này cho phép chúng tôi tách logic không liên quan thành các hiệu ứng khác nhau:

 

function

FriendStatusWithCounter

p>

(

đạo cụ

)

{

const

[

count

,

setCount

]

=

useState

(

0

)

;

useEffect

(

(

)

= & gt;

{

document

.

title

=

`

Bạn đã nhấp vào

$ {

đếm

}

lần

`

;

}

)

;

const

[

isOnline

,

setIsOnline

]

=

useState

(

null

)

;

useEffect

(

(

)

= & gt;

{

chức năng

handleStatusChange

(

trạng thái

)

{

setIsOnline

(

trạng thái

.

isOnline

)

;

}

ChatAPI

.

subscribeToFriendStatus

(

dấu chấm câu ">.

bạn

.

id

,

handleStatusChange

) < / p>

;

return

(

)

= & gt;

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

) < / p>

;

}

;

}

)

;

}

Hooks cho phép chúng tôi phân tách mã dựa trên những gì nó đang làm thay vì tên phương thức vòng đời ... React sẽ áp dụng mọi hiệu ứng được sử dụng bởi thành phần, theo thứ tự mà chúng đã được chỉ định.

Nếu bạn đã quen với các lớp học, bạn có thể tự hỏi tại sao giai đoạn xóa hiệu ứng lại xảy ra sau mỗi lần kết xuất lại chứ không chỉ một lần trong khi ngắt kết nối. Hãy xem một ví dụ thực tế để biết lý do tại sao thiết kế này giúp chúng tôi tạo ra các thành phần với ít lỗi hơn.

Trước đó trên trang này , chúng tôi đã giới thiệu thành phần ví dụ FriendStatus hiển thị liệu một người bạn có trực tuyến hay không. Lớp chúng tôi đọc friend.id từ this.props , đăng ký trạng thái bạn bè sau gắn kết thành phần và hủy đăng ký trong quá trình ngắt kết nối:

  

componentDidMount

(

)

{

ChatAPI

.

subscribeToFriendStatus

(

this

.

đạo cụ

.

bạn

.

id

,

this

.

handleStatusChange

)

;

}

componentWillUnmount

(

)

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

this

.

đạo cụ

.

bạn

.

id

,

this

.

handleStatusChange

)

;

}

Nhưng điều gì sẽ xảy ra nếu bạn chân chống có thay đổi trong khi thành phần ở trên màn hình không? Thành phần của chúng tôi sẽ tiếp tục hiển thị trạng thái trực tuyến của một người bạn khác. Đây là một lỗi. Chúng tôi cũng sẽ gây ra lỗi hoặc rò rỉ bộ nhớ khi ngắt kết nối vì cuộc gọi chưa đăng ký sẽ sử dụng sai ID bạn bè.

Trong một thành phần lớp, chúng ta cần thêm componentDidUpdate để xử lý trường hợp sau:

 

componentDidMount

(

)

{

ChatAPI

.

subscribeToFriendStatus

(

this

.

đạo cụ

.

bạn

.

id

,

this

.

handleStatusChange

)

;

}

componentDidUpdate

(

PreProps

)

{

ChatAPI

.

hủy đăng kýFromFriendStatus

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

prevProps

.

bạn

id

,

this

.

handleStatusChange

)

;

ChatAPI

. p>

subscribeToFriendStatus

(

cái này

.

đạo cụ

.

bạn

>.

id

,

cái này

.

handleStatusChange

)

;

}

componentWillUnmount

(

)

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

this

.

đạo cụ

.

bạn

.

id

,

this

.

handleStatusChange

)

;

}

Quên xử lý đúng cách là một nguồn lỗi phổ biến trong các ứng dụng React

Bây giờ, hãy xem xét phiên bản của thành phần này sử dụng Hooks:

 

chức năng

FriendStatus

p>

(

đạo cụ

)

{

useEffect

(

(

(

(>)

= & gt;

{ ChatAPI

.

subscribeToFriendStatus

(

dấu chấm câu ">.

bạn

.

id

,

handleStatusChange

) < / p>

;

return

(

)

= & gt;

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

) < / p>

;

}

;

}

)

;

Nó không bị lỗi này. (Nhưng chúng tôi cũng không thực hiện bất kỳ thay đổi nào đối với nó.)

Không có mã đặc biệt nào để xử lý các bản cập nhật vì useEffect xử lý chúng theo mặc định. Nó làm sạch các hiệu ứng trước đó trước khi áp dụng các hiệu ứng tiếp theo. Để minh họa điều này, đây là một chuỗi các lệnh gọi đăng ký và hủy đăng ký mà thành phần này có thể tạo ra theo thời gian:

 
ChatAPI 

.

subscribeToFriendStatus

(

100

,

handleStatusChange

)

;

ChatAPI

.

hủy đăng kýFromFriendStatus

(

100

,

handleStatusChange

)

;

ChatAPI

.

subscribeToFriendStatus

(

200

,

handleStatusChange

)

;

ChatAPI

.

hủy đăng kýFromFriendStatus

(

200

,

handleStatusChange

)

;

ChatAPI

.

subscribeToFriendStatus

(

300

,

handleStatusChange

)

;

ChatAPI

.

hủy đăng kýFromFriendStatus

(

300

,

handleStatusChange

)

;

Hành vi này đảm bảo tính nhất quán theo mặc định và ngăn các lỗi thường gặp trong các thành phần lớp do thiếu logic cập nhật.

Mẹo: Tối ưu hóa hiệu suất bằng cách bỏ qua các hiệu ứng

Trong một số trường hợp, việc dọn dẹp hoặc áp dụng hiệu ứng sau mỗi lần hiển thị có thể gây ra sự cố về hiệu suất. Trong các thành phần lớp, chúng ta có thể giải quyết điều này bằng cách viết thêm một phép so sánh với prevProps hoặc prevState bên trong componentDidUpdate :

  

componentDidUpdate

(

presProps

,

thịnh hành

)

{

nếu

(

thịnh hành

.

đếm

! ==

cái này

.

bang

. < / p> đếm

)

{

tài liệu

.

title

=

`

Bạn đã nhấp vào

$ {

this

.

bang

.

count

}

lần

`

;

}

}

Yêu cầu này đủ phổ biến để nó được tích hợp vào useEffect < / code> Hook API. Bạn có thể yêu cầu React bỏ qua việc áp dụng hiệu ứng nếu một số giá trị nhất định không thay đổi giữa các lần hiển thị. Để làm như vậy, hãy chuyển một mảng làm đối số thứ hai tùy chọn cho useEffect :

  

useEffect

(

(

)

= & gt;

{

tài liệu

.

title

=

`

Bạn đã nhấp vào

$ {

đếm

}

lần

`

;

}

,

[

đếm

]

)

;

< / p>

Trong ví dụ trên, chúng ta chuyển [count] làm đối số thứ hai. Điều đó có nghĩa là gì? Nếu count 5 , thì thành phần của chúng tôi hiển thị lại bằng count vẫn bằng 5 , React sẽ so sánh [ 5] từ lần hiển thị trước và [5] từ lần hiển thị tiếp theo. Vì tất cả các mục trong mảng đều giống nhau ( 5 === 5 ), React sẽ bỏ qua hiệu ứng. Đó là cách tối ưu hóa của chúng tôi.

Khi chúng tôi kết xuất với count được cập nhật thành 6 , React sẽ so sánh các mục trong mảng [5] từ kết xuất trước đó đến các mục trong mảng [6] từ kết xuất tiếp theo. Lần này, React sẽ áp dụng lại hiệu ứng vì 5! == 6 . Nếu có nhiều mục trong mảng, React sẽ chạy lại hiệu ứng ngay cả khi chỉ một trong số chúng khác nhau.

Điều này cũng hoạt động đối với các hiệu ứng có giai đoạn dọn dẹp:

  

useEffect

(

(

)

= & gt;

{

function

handleStatusChange

(

trạng thái

)

{

setIsOnline

(

trạng thái

.

isOnline

)

;

}

ChatAPI

.

subscribeToFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

) < / p>

;

return

(

)

= & gt;

{

ChatAPI

.

hủy đăng kýFromFriendStatus

(

đạo cụ

.

bạn

.

id

,

handleStatusChange

) < / p>

;

}

;

}

,

[

đạo cụ

.

bạn

.

id

]

)

;

Trong tương lai, thứ hai đối số có thể được thêm tự động bằng cách chuyển đổi theo thời gian xây dựng.

Lưu ý

Nếu bạn sử dụng tính năng tối ưu hóa này, hãy đảm bảo rằng mảng bao gồm tất cả các giá trị từ phạm vi thành phần (chẳng hạn như đạo cụ và trạng thái) thay đổi theo thời gian và được sử dụng bởi hiệu ứng . Nếu không, mã của bạn sẽ tham chiếu các giá trị cũ từ các lần hiển thị trước đó. Tìm hiểu thêm về cách xử lý các chức năng phải làm gì khi mảng thay đổi quá thường xuyên .

Nếu bạn muốn chạy một hiệu ứng và dọn dẹp nó chỉ một lần (khi gắn kết và ngắt kết nối), bạn có thể chuyển một mảng trống ( [] ) dưới dạng một lập luận thứ hai. Điều này cho React biết rằng hiệu ứng của bạn không phụ thuộc vào bất kỳ giá trị nào từ đạo cụ hoặc trạng thái, vì vậy nó không bao giờ cần chạy lại. Đây không được xử lý như một trường hợp đặc biệt - nó theo dõi trực tiếp từ cách mảng phụ thuộc luôn hoạt động.

Nếu bạn chuyển một mảng trống ( [] ), các đạo cụ và trạng thái bên trong hiệu ứng sẽ luôn có giá trị ban đầu của chúng. Trong khi truyền [] vì đối số thứ hai gần với componentDidMount componentWillUnmount mô hình tinh thần, thường có các giải pháp tốt hơn để tránh chạy lại các hiệu ứng quá thường xuyên. Ngoài ra, đừng quên rằng React chống lại việc chạy useEffect cho đến khi trình duyệt hoàn thiện, vì vậy việc thực hiện thêm công việc sẽ ít gặp vấn đề hơn.

Chúng tôi khuyên bạn nên sử dụng quy tắc expustive-deps như một phần của quy tắc Gói eslint-plugin-react-hooks . Nó cảnh báo khi các phần phụ thuộc được chỉ định không chính xác và đề xuất cách khắc phục.

Các bước tiếp theo

Xin chúc mừng! Đây là một trang dài, nhưng hy vọng rằng cuối cùng hầu hết các câu hỏi của bạn về hiệu ứng đã được giải đáp. Bạn đã học được cả Móc trạng thái và Móc hiệu ứng, và có rất nhiều điều bạn có thể làm với cả hai cách kết hợp. Chúng bao gồm hầu hết các trường hợp sử dụng cho các lớp - và nếu không, bạn có thể thấy Hooks bổ sung hữu ích.

Chúng tôi cũng đang bắt đầu xem cách Hooks giải quyết các vấn đề được nêu trong Motivation . Chúng tôi đã thấy hiệu quả của việc dọn dẹp tránh trùng lặp trong componentDidUpdate componentWillUnmount , mang mã liên quan đến gần hơn cùng nhau, và giúp chúng tôi tránh lỗi. Chúng tôi cũng đã thấy cách chúng tôi có thể phân tách các hiệu ứng theo mục đích của chúng, đây là điều mà chúng tôi không thể làm trong các lớp học.

Tại thời điểm này, bạn có thể thắc mắc về cách Hooks hoạt động. Làm cách nào React có thể biết lệnh gọi useState nào tương ứng với biến trạng thái nào giữa các lần hiển thị? Làm thế nào để React “so khớp” các hiệu ứng trước và sau trên mỗi bản cập nhật? Trên trang tiếp theo, chúng ta sẽ tìm hiểu về Quy tắc về Hooks - các quy tắc này rất cần thiết để làm cho Hooks hoạt động.


Xem thêm những thông tin liên quan đến chủ đề tác dụng làm gì

4 Điện trở là gì để làm gì công dụng như thế nào

  • Tác giả: Giaugiau Học và Ứng dụng
  • Ngày đăng: 2019-04-13
  • Đánh giá: 4 ⭐ ( 5128 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kênh thảo luận và cùng chia sẻ về điện tử cơ bản.
    Facebook cá nhân: https://www.facebook.com/giaugiauteach
    Group chia sẻ: https://www.facebook.com/groups/TNUT4.0/

    Mình thấy rất nhiều bạn mới học điện tử luôn thắc mắc liệu mất căn bản rồi thì bắt đầu từ đâu? Tuy trên mạng kiến thức có rất nhiều nhưng lại thường không tập trung, lẫn lộn giữa nâng cao và cơ bản, khó đọc hiểu ngay, dẫn đến dễ nản chí khi tự học . . .
    Với mong muốn là nơi để cùng nhau chia sẻ kiến thức và giúp đỡ nhau học hỏi về điện tử, làm nền để học và tự nghiên cứu, chế tạo, diy về sau này. Mình sẽ cố gắng hết khả năng, tranh thủ thời gian rảnh rỗi của mình để chia sẻ về những gì đã biết, để cùng các bạn học tập sao cho tốt hơn.
    Hi vọng các bạn sẽ tham gia kênh với tinh thần chia sẻ hết mình. Cùng cmt thể hiện quan điểm, like nếu thấy có ích, góp ý nếu thấy sai và giúp đỡ các bạn khác nếu mình có thể. Hãy vì cộng đồng và hãy cùng nhau tạo nên một nơi bổ ích và dễ dàng để học tập - miễn phí nữa chứ ^^

    Cho đi để nhận lại - Tại sao không!!! Thankyou!

    // Bài 4 Điện trở là gì:
    Bài nằm trong sách công nghệ lớp 12, Chương 1 Linh kiện điện tử, bài 2 Điện trở - Tụ điện - Điện cảm. SGK trang 8
    Phần 1 : - điện trở, cách đọc giá trị điện trở bằng vạch màu, cách phân loại điện trở, các loại điện trở . . . điện trở để làm gì . . .

    Serial là để trả lời cho câu hỏi: Tự học điện tử cơ bản - bắt đầu từ đâu ?

Quất hồng bì có tác dụng gì? Cách sử dụng quất hồng bì tốt nhất

  • Tác giả: eva.vn
  • Đánh giá: 4 ⭐ ( 3264 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Quất hồng bì không chỉ là loại quả quen thuộc để làm mứt mà đây còn là dược liệu trong Đông y. Vậy cụ thể quất hồng bì có tác dụng gì?

Vitamin E có tác dụng gì? Cách sử dụng vitamin E hiệu quả

  • Tác giả: vuanem.com
  • Đánh giá: 3 ⭐ ( 3935 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vitamin E vốn được biết có nhiều lợi ích nhưng lại ít ai biết cụ thể về công dụng cũng như cách sử dụng vitamin E khoa học. Bài viết dưới đây của chúng tôi sẽ

Nồi Chiên Không Dầu Dùng để Làm Gì? 3 Tác Dụng Tuyệt Vời Của Nồi Chiên Không Dầu Bạn đã Biết Chưa? • Adayne.vn

  • Tác giả: adayne.vn
  • Đánh giá: 4 ⭐ ( 3128 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nồi chiên không dầu dùng để làm gì? Nồi chiên không dầu có tốt không? Điểm danh 3 tác dụng tuyệt vời của nồi chiên không dầu bạn có biết?

Uống nước đậu xanh có tác dụng gì? Cách làm từ A-Z

  • Tác giả: www.thuocdantoc.org
  • Đánh giá: 4 ⭐ ( 4768 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Uống nước đậu xanh có tác dụng gì không phải ai cũng biết. Thức uống này mang đến nhiều lợi ích tuyệt vời cho sức khỏe như thanh nhiệt, giải độc, chống béo phì

Niacinamide trong mỹ phẩm có tác dụng gì?

  • Tác giả: www.vinmec.com
  • Đánh giá: 4 ⭐ ( 8767 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các sản phẩm mỹ phẩm và chăm sóc cá nhân có chứa nhiều thành phần mà không phải ai cũng biết rõ. Trong đó, một thành phần phổ biến là Niacinamide. Đây là một dạng vitamin B3, có thể làm cho làn da đẹp hơn và khỏe mạnh, đồng thời hiếm khi gây kích ứng hoặc nổi mụn trên da. Dù vậy, hiệu quả của niacinamide trong mỹ phẩm còn phải phụ thuộc vào loại da cụ thể và độ nhạy cảm của da với dưỡng chất này.

Kombucha là gì? Tác dụng của trà Kombucha và cách làm

  • Tác giả: meta.vn
  • Đánh giá: 3 ⭐ ( 5265 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kombucha là gì? Tác dụng của trà Kombucha và cách làm, Kombucha hay trà Kombucha từng làm mưa làm gió nhiều hội nhóm và được nhiều chị em truyền tai nhau là thức

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  Introduction To Unity Unit Testing - android unit testing