Bạn đang xem : sử dụng phản ứng ref hook

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.

Trang này mô tả các API cho Hooks tích hợp sẵn trong React.

Nếu bạn chưa quen với Hooks, trước tiên bạn có thể muốn xem tổng quan . Bạn cũng có thể tìm thấy thông tin hữu ích trong phần câu hỏi thường gặp .

Móc cơ bản

useState

  

const

[ trạng thái

,

setState

]

=

useState

(

initialState

)

; < / p>

Trả về một giá trị trạng thái và một hàm để cập nhật nó.

Trong lần hiển thị ban đầu, trạng thái trả về ( state ) giống với giá trị được truyền làm đối số đầu tiên ( InitialState ).

Hàm setState được sử dụng để cập nhật trạng thái. Nó chấp nhận một giá trị trạng thái mới và xếp hàng đợi kết xuất lại thành phần.

  

setState

( newState

)

;

Trong các lần hiển thị tiếp theo, lần đầu tiên giá trị được trả về bởi useState sẽ luôn là trạng thái mới nhất sau khi áp dụng các bản cập nhật.

Lưu ý

React đảm bảo rằng danh tính hàm setState là ổn định và sẽ không thay đổi khi hiển thị lại. Đây là lý do tại sao có thể an toàn nếu bạn bỏ qua danh sách phụ thuộc useEffect hoặc useCallback .

Nếu trạng thái mới được tính bằng trạng thái trước đó, bạn có thể chuyển một hàm vào setState . Hàm sẽ nhận giá trị trước đó và trả về giá trị cập nhật. Dưới đây là ví dụ về thành phần bộ đếm sử dụng cả hai dạng setState :

  

function

Bộ đếm

(

{

initialCount

}

)

{

const

[

count

,

setCount

]

=

useState

(

InitialCount

)

;

trả về

(

& lt;

& gt;

Đếm:

{

số lượng

}

& lt;

nút

onClick

=

{

(

)

= & gt;

setCount

(

initialCount

)

}

& gt;

Đặt lại

& lt; /

nút

& gt;

< p class = "mã thông báo văn bản thuần">

& lt;

nút

onClick

=

{

(

)

= & gt;

setCount

(

presCount

= & gt;

presCount

-

1

)

}

& gt;

-

& lt; /

nút

& gt;

& lt;

nút

onClick

=

{

(

)

= & gt;

setCount

(

Số lượng trước

= & gt; < / p> Số tiền chiếm ưu thế

+

1

)

}

& gt;

+

< p class = "token tag">

& lt; /

nút

& gt; < / p>

& lt; /

& gt;

)

;

}

Các nút ”+” và ”-” sử dụng dạng hàm vì giá trị được cập nhật dựa trên giá trị trước đó. Tuy nhiên, nút “Đặt lại” sử dụng dạng bình thường vì nó luôn đặt số lượng trở lại giá trị ban đầu.

Nếu hàm cập nhật của bạn trả về giá trị chính xác giống như trạng thái hiện tại, kết xuất sau đó sẽ bị bỏ qua hoàn toàn.

Lưu ý

Không giống như phương thức setState được tìm thấy trong các thành phần lớp, useState không tự động hợp nhất các bản cập nhật các đối tượng. Bạn có thể tái tạo hành vi này bằng cách kết hợp biểu mẫu trình cập nhật chức năng với cú pháp lây lan đối tượng:

  

const

[ trạng thái

,

setState

]

=

useState

(

{

}

)

;

setState

(

Trạng thái

= & gt;

{

trả về

{

...

Prestate

,

...

updatedValues ​​

}

;

}

)

;

Một tùy chọn khác là useReducer , phù hợp hơn để quản lý các đối tượng trạng thái chứa nhiều giá trị con.

Trạng thái ban đầu lười biếng

Đối số initialState là trạng thái được sử dụng trong lần hiển thị ban đầu. Trong các lần hiển thị tiếp theo, nó bị bỏ qua. Nếu trạng thái ban đầu là kết quả của một phép tính tốn kém, thay vào đó, bạn có thể cung cấp một hàm, hàm này sẽ chỉ được thực thi trên kết xuất ban đầu:

  

const

[ trạng thái

,

setState

]

=

useState

(

(

)

= & gt;

{

const

initialState

=

someExpensiveComputation

(

đạo cụ

)

;

return

InitialState

;

}

)

;

Nếu bạn cập nhật State Hook về cùng giá trị với trạng thái hiện tại, React sẽ giải cứu mà không hiển thị các con hoặc hiệu ứng kích hoạt. (React sử dụng Object.is thuật toán so sánh .)

Lưu ý rằng React vẫn có thể cần phải hiển thị lại thành phần cụ thể đó trước khi gỡ bỏ. Điều đó không đáng lo ngại vì React sẽ không đi “sâu hơn” vào cây một cách không cần thiết. Nếu bạn đang thực hiện các phép tính tốn kém trong khi hiển thị, bạn có thể tối ưu hóa chúng bằng useMemo .

React có thể nhóm một số bản cập nhật trạng thái thành một bản hiển thị lại duy nhất để cải thiện hiệu suất. Thông thường, điều này sẽ cải thiện hiệu suất và không ảnh hưởng đến hoạt động của ứng dụng của bạn.

Trước React 18, chỉ các bản cập nhật bên trong trình xử lý sự kiện React mới được cập nhật. Bắt đầu với React 18, phân phối theo mặc định được bật cho tất cả các bản cập nhật . Lưu ý rằng React đảm bảo rằng các bản cập nhật từ một số sự kiện do người dùng khởi tạo khác nhau – ví dụ: nhấp vào một nút hai lần – luôn được xử lý riêng biệt và không được xử lý theo đợt. Điều này ngăn ngừa những sai lầm logic.

Trong một số ít trường hợp 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 . Tuy nhiên, điều này có thể ảnh hưởng đến hiệu suất, vì vậy hãy chỉ làm điều này khi cần thiết.

useEffect

  

useEffect

( didUpdate

)

;

Chấp nhận một hàm chứa mệnh lệnh, có thể mã hiệu quả.

Không cho phép các đột biến, đăng ký, hẹn giờ, ghi nhật ký và các tác dụng phụ khác bên trong phần thân chính của thành phần chức năng (được gọi là giai đoạn kết xuất của React). Làm như vậy sẽ dẫn đến các lỗi khó hiểu và không nhất quán trong giao diện người dùng.

Thay vào đó, hãy sử dụng useEffect . Hàm được chuyển tới useEffect sẽ chạy sau khi kết xuất được cam kết với màn hình. Hãy coi các hiệu ứng như một lối thoát từ thế giới chức năng thuần túy của React sang thế giới mệnh lệnh.

Theo mặc định, các hiệu ứng chạy sau mỗi lần hiển thị hoàn tất, nhưng bạn có thể chọn kích hoạt chúng chỉ khi một số giá trị nhất định đã thay đổi .

Xóa hiệu ứng

Thông thường, các hiệu ứng tạo ra các tài nguyên cần được dọn dẹp trước khi thành phần rời khỏi màn hình, chẳng hạn như ID đăng ký hoặc bộ hẹn giờ. Để thực hiện việc này, hàm được chuyển đến useEffect có thể trả về một hàm dọn dẹp. Ví dụ: để tạo đăng ký:

  

useEffect

(

(

)

= & gt;

{

const

đăng ký

=

props

.

nguồn

.

đăng ký

(

)

;

return

(

)

= & gt;

{

đăng ký

.

hủy đăng ký

(

)

;

}

;

}

)

;

Chức năng dọn dẹp chạy trước khi thành phần bị xóa khỏi giao diện người dùng để tránh rò rỉ bộ nhớ. Ngoài ra, nếu một thành phần hiển thị nhiều lần (như chúng thường làm), thì hiệu ứng trước đó sẽ được xóa sạch trước khi thực hiện hiệu ứng tiếp theo . Trong ví dụ của chúng tôi, điều này có nghĩa là một đăng ký mới được tạo trên mỗi bản cập nhật. Để tránh gây ảnh hưởng đến mọi bản cập nhật, hãy tham khảo phần tiếp theo.

Thời gian của các hiệu ứng

Không giống như componentDidMount componentDidUpdate , hàm được chuyển tới useEffect kích hoạt bố cục và sơn sau trong một sự kiện được hoãn lại. Điều này làm cho nó phù hợp với nhiều tác dụng phụ thường gặp, như thiết lập đăng ký và trình xử lý sự kiện, vì hầu hết các loại công việc sẽ không chặn trình duyệt cập nhật màn hình.

Tuy nhiên, không phải tất cả các hiệu ứng đều có thể được hoãn lại. Ví dụ: đột biến DOM hiển thị cho người dùng phải kích hoạt đồng bộ trước lần sơn tiếp theo để người dùng không nhận thấy sự mâu thuẫn trực quan. (Sự khác biệt về mặt khái niệm tương tự như trình xử lý sự kiện thụ động và chủ động.) Đối với các loại hiệu ứng này, React cung cấp thêm một Hook bổ sung có tên là useLayoutEffect . Nó có cùng chữ ký với useEffect và chỉ khác ở điểm được kích hoạt.

Ngoài ra, bắt đầu từ React 18, hàm được chuyển đến useEffect sẽ kích hoạt đồng bộ bố cục trước và sơn khi nó là kết quả của đầu vào của người dùng rời rạc chẳng hạn như một lần nhấp hoặc khi đó là kết quả của một bản cập nhật được bao bọc trong flushSync . Hành vi này cho phép hệ thống sự kiện hoặc trình gọi của flushSync quan sát kết quả của hiệu ứng.

Lưu ý

Điều này chỉ ảnh hưởng đến thời gian khi hàm được chuyển đến useEffect được gọi – các bản cập nhật được lên lịch bên trong các hiệu ứng này vẫn bị hoãn lại. Điều này khác với useLayoutEffect , chức năng này sẽ kích hoạt chức năng và xử lý các bản cập nhật bên trong nó ngay lập tức.

Ngay cả trong trường hợp useEffect được hoãn lại cho đến khi trình duyệt hoàn thành, nó vẫn được đảm bảo kích hoạt trước khi có bất kỳ kết xuất mới nào. React sẽ luôn tạo hiệu ứng cho kết xuất trước đó trước khi bắt đầu cập nhật mới.

Kích hoạt hiệu ứng có điều kiện

Hành vi mặc định cho các hiệu ứng là kích hoạt hiệu ứng sau mỗi lần kết xuất hoàn thành. Theo cách đó, một hiệu ứng luôn được tạo lại nếu một trong các phần phụ thuộc của nó thay đổi.

Tuy nhiên, điều này có thể quá mức cần thiết trong một số trường hợp, như ví dụ về đăng ký từ phần trước. Chúng tôi không cần tạo đăng ký mới trên mọi bản cập nhật, chỉ khi prop source đã thay đổi.

Để triển khai điều này, hãy chuyển đối số thứ hai tới useEffect , là mảng giá trị mà hiệu ứng phụ thuộc vào. Ví dụ được cập nhật của chúng tôi bây giờ trông giống như sau:

  

useEffect

(

(

)

= & gt;

{

const

đăng ký

=

props

.

nguồn

.

đăng ký

(

)

;

return

(

)

= & gt;

{

đăng ký

.

hủy đăng ký

(

)

;

}

;

}

,

[

props

.

nguồn

]

,

)

;

Giờ đây, đăng ký sẽ chỉ được tạo lại khi props.source thay đổi.

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 hàm và việc cần làm khi giá trị của 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 ( [] ) là 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. Điều nà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 quen thuộc componentWillUnmount mô hình tinh thần, thường có các giải pháp tốt hơn để tránh các hiệu ứng chạy lại 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 quy tắc của chúng tôi 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.

Mảng phụ thuộc không được chuyển làm đối số cho hàm effect. Tuy nhiên, về mặt khái niệm, đó là những gì chúng đại diện: mọi giá trị được tham chiếu bên trong hàm effect cũng phải xuất hiện trong mảng phụ thuộc. Trong tương lai, một trình biên dịch đủ nâng cao có thể tự động tạo mảng này.

useContext

  

const

value

= < / p>

useContext

(

MyContext

)

;

Chấp nhận đối tượng ngữ cảnh (giá trị được trả về từ React.createContext ) và trả về giá trị ngữ cảnh hiện tại cho ngữ cảnh đó. Giá trị ngữ cảnh hiện tại được xác định bởi value prop của & lt; MyContext.Provider & gt; phía trên thành phần đang gọi trong cây.

Khi & lt; MyContext.Provider & gt; gần nhất phía trên cập nhật thành phần, Hook này sẽ kích hoạt kết xuất với ngữ cảnh mới nhất value được chuyển đến nhà cung cấp MyContext đó. Ngay cả khi tổ tiên sử dụng React.memo hoặc shouldComponentUpdate , kết xuất sẽ vẫn xảy ra bắt đầu từ chính thành phần đó bằng cách sử dụng useContext .

Đừng quên rằng đối số của useContext phải là chính đối tượng ngữ cảnh:

  • Đúng: useContext (MyContext)
  • Không chính xác: useContext (MyContext.Consumer)
  • Không chính xác: useContext (MyContext.Provider)

Một thành phần gọi useContext sẽ luôn hiển thị lại khi giá trị ngữ cảnh thay đổi. Nếu việc hiển thị lại thành phần tốn kém, bạn có thể tối ưu hóa thành phần đó bằng cách sử dụng ghi nhớ .

Mẹo

Nếu bạn đã quen thuộc với API ngữ cảnh trước Hooks, thì useContext (MyContext) tương đương với static contextType = MyContext trong một lớp hoặc tới & lt; MyContext.Consumer & gt; .

useContext (MyContext) chỉ cho phép bạn đọc ngữ cảnh và đăng ký các thay đổi của ngữ cảnh. Bạn vẫn cần & lt; MyContext.Provider & gt; ở trên trong cây để cung cấp giá trị cho ngữ cảnh này.

Kết hợp nó với Context.Provider

  

const

themes

= < / p>

{

light

:

{

foreground

:

"# 000000"

,

background

:

"# eeeeee"

}

,

dark

:

{

foreground

:

"# ffffff"

,

background

:

"# 222222"

}

}

;

const

ThemeContext

=

React

.

createContext

(

themes

.

light

) p>

;

function

Ứng dụng

(

)

{

return

(

& lt;

ThemeContext.Provider

giá trị

=

{

themes

.

dark

}

& gt;

& lt;

Thanh công cụ

/ & gt;

< / p>

& lt; /

< p class = "token class-name"> ThemeContext.Provider

& gt;

)

;

}

function

Thanh công cụ

(

đạo cụ

)

{

return

(

& lt;

div

& gt; < / p>

& lt;

ThemedButton

/ & gt;

< / p>

& lt; /

div

& gt;

)

;

}

function

ThemedButton

(

)

{

const

theme

=

useContext

(

ThemeContext

)

;

return

(

Nút

& lt;

style

=

{

{

background

:

theme

.

background

,

màu

:

theme

.

foreground

}

} < / p>

& gt;

Tôi được tạo kiểu theo ngữ cảnh chủ đề!

Nút

& lt; /

& gt;

)

;

}

Ví dụ này được sửa đổi cho các móc từ ví dụ trước có thể tìm thêm thông tin về thời điểm và cách sử dụng Context.

Móc bổ sung

Các móc sau là biến thể của các móc cơ bản từ phần trước hoặc chỉ cần thiết cho các trường hợp cạnh cụ thể. Đừng căng thẳng về việc tìm hiểu chúng từ trước.

useReducer

 

const

[

bang

,

cử

]

=

useReducer

(

bộ giảm

,

initialArg

,

init

)

;

Một giải pháp thay thế cho useState . Chấp nhận trình rút gọn kiểu (state, action) = & gt; newState và trả về trạng thái hiện tại được ghép nối với phương thức send . (Nếu bạn đã quen thuộc với Redux, bạn đã biết cách hoạt động của nó.)

useReducer thường được ưu tiên hơn useState khi bạn có logic trạng thái phức tạp bao gồm nhiều giá trị phụ hoặc khi trạng thái tiếp theo phụ thuộc vào trạng thái trước đó. useReducer cũng cho phép bạn tối ưu hóa hiệu suất cho các thành phần kích hoạt cập nhật sâu vì bạn có thể vượt qua công văn xuống thay vì gọi lại .

Đây là ví dụ về bộ đếm từ phần useState , được viết lại để sử dụng bộ giảm tốc:

  

const

initialState

= < / p>

{

số lượng

:

0

}

;

chức năng

giảm tốc

(

trạng thái

,

hành động

)

{

chuyển đổi

(

action

.

loại

)

{

case

'tăng'

:

trả về

{

số lượng

:

trạng thái

.

count

+

1 < / p>

}

;

case

'giảm'

:

trả về

{

số lượng

:

bang

.

count

-

1 < / p>

}

;

default

:

ném

new

Lỗi

(

)

;

}

}

function

Bộ đếm

(

)

{

const

[

bang

,

cử

]

=

useReducer

(

bộ giảm

,

initialState

)

;

trả về

(

& lt;

& gt;

Đếm:

{

bang

.

đếm

}

& lt;

nút

onClick

=

{

(

)

= & gt;

công văn

(

{

loại

:

'giảm'

}

)

}

& gt;

-

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

nút

& gt;

& lt;

nút

onClick

=

{

(

)

= & gt;

công văn

(

{

loại

:

'gia tăng'

}

)

}

& gt;

< p class = "token clear-text"> nút +

& lt; /

& gt;

& lt; /

& gt;

)

;

}

Lưu ý

React đảm bảo rằng danh tính chức năng doing là ổn định và sẽ không thay đổi khi hiển thị lại. Đây là lý do tại sao có thể an toàn nếu bạn bỏ qua danh sách phụ thuộc useEffect hoặc useCallback .

Chỉ định trạng thái ban đầu

Có hai cách khác nhau để khởi tạo trạng thái useReducer . Bạn có thể chọn một trong hai tùy thuộc vào trường hợp sử dụng. Cách đơn giản nhất là chuyển trạng thái ban đầu làm đối số thứ hai:

  

const

[ trạng thái

,

cử

]

=

useReducer

(

bộ giảm

,

{

số lượng

:

initialCount

}

)

;

Lưu ý

React không sử dụng quy ước đối số state = initialState do Redux phổ biến. Giá trị ban đầu đôi khi cần phụ thuộc vào các đạo cụ và thay vào đó, giá trị này được chỉ định từ lệnh gọi Hook. Nếu bạn thực sự cảm thấy điều này, bạn có thể gọi useReducer (giảm thiểu, không xác định, giảm tốc) để mô phỏng hành vi Redux, nhưng điều này không được khuyến khích.

Khởi tạo chậm

Bạn cũng có thể tạo trạng thái ban đầu một cách lười biếng. Để thực hiện việc này, bạn có thể chuyển một hàm init làm đối số thứ ba. Trạng thái ban đầu sẽ được đặt thành init (initialArg) .

Nó cho phép bạn trích xuất logic để tính toán trạng thái ban đầu bên ngoài bộ giảm tốc. Điều này cũng hữu ích để đặt lại trạng thái sau này để phản hồi lại một hành động:

  

hàm

init

(

Số tiền ban đầu

)

{

trả về

{

số lượng

:

initialCount

}

;

}

chức năng

giảm tốc

(

trạng thái

,

hành động

)

{

chuyển đổi

(

action

.

loại

)

{

case

'tăng'

:

trả về

{

số lượng

:

trạng thái

.

count

+

1 < / p>

}

;

case

'giảm'

:

trả về

{

số lượng

:

bang

.

count

-

1 < / p>

}

;

case

'đặt lại'

:

return

init

(

action

.

payload

)

;

mặc định

:

ném

new

Lỗi

(

)

;

}

}

function

Bộ đếm

(

{

initialCount

}

)

{

const

[

bang

,

phái

]

=

useReducer

(

bộ giảm

,

initialCount

,

init

)

;

trả về

(

& lt;

& gt;

Đếm:

{

bang

.

đếm

}

& lt;

nút < / p>

onClick

=

{

(

)

= & gt;

công văn

(

{

loại

:

' đặt lại '

,

trọng tải

: InitialCount

}

)

}

& gt;

Đặt lại Nút

& lt; /

& gt;

& lt;

nút < / p>

onClick

=

{

(

)

= & gt;

điều phối

(

{

type

:

'giảm'

}

)

}

& gt;

-

& lt; /

nút

& gt;

& lt;

nút < / p>

onClick

=

{

(

)

= & gt;

điều phối

(

{

loại

:

'gia tăng'

}

)

}

& gt;

+

& lt; /

nút

& gt;

& lt; /

< / p>

& gt;

)

;

}

Bỏ công văn ra đi

Nếu bạn trả về cùng một giá trị từ Móc giảm tốc như trạng thái hiện tại, React sẽ giải cứu mà không hiển thị các hiệu ứng con hoặc hiệu ứng bắn. (React sử dụng Object.is thuật toán so sánh .)

Lưu ý rằng React vẫn có thể cần phải hiển thị lại thành phần cụ thể đó trước khi gỡ bỏ. Điều đó không đáng lo ngại vì React sẽ không đi “sâu hơn” vào cây một cách không cần thiết. Nếu bạn đang thực hiện các phép tính tốn kém trong khi hiển thị, bạn có thể tối ưu hóa chúng bằng useMemo .

useCallback

  

const

memoizedCallback

= < / p>

useCallback

(

(

)

= & gt;

{

doSomething

(

a

,

b

)

;

}

,

[

a

,

b

]

,

)

;

Trả về gọi lại đã ghi nhớ .

Chuyển một lệnh gọi lại nội tuyến và một mảng phụ thuộc. useCallback sẽ trả về phiên bản gọi lại được ghi nhớ chỉ thay đổi nếu một trong các thành phần phụ thuộc đã thay đổi. Điều này hữu ích khi chuyển lệnh gọi lại đến các thành phần con được tối ưu hóa dựa trên bình đẳng tham chiếu để ngăn các kết xuất không cần thiết (ví dụ: shouldComponentUpdate ).

useCallback (fn, deps) tương đương với useMemo (() = & gt; fn, deps ) .

Lưu ý

Mảng phụ thuộc không được chuyển làm đối số cho lệnh gọi lại. Tuy nhiên, về mặt khái niệm, đó là những gì chúng đại diện: mọi giá trị được tham chiếu bên trong lệnh gọi lại cũng phải xuất hiện trong mảng phụ thuộc. Trong tương lai, một trình biên dịch đủ nâng cao có thể tự động tạo mảng này.

Chúng tôi khuyên bạn nên sử dụng quy tắc expustive-deps quy tắc của chúng tôi 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.

useMemo

  

const

memoizedValue

= < / p>

useMemo

(

(

)

= & gt;

computeExpensiveValue

(< / p> a

,

b

)

,

[

a

,

b

]

)

;

Trả về giá trị đã ghi nhớ .

Chuyển một hàm “tạo” và một mảng các phần phụ thuộc. useMemo sẽ chỉ tính toán lại giá trị đã ghi nhớ khi một trong các phần phụ thuộc đã thay đổi. Việc tối ưu hóa này giúp tránh các tính toán tốn kém trên mỗi lần hiển thị.

Hãy nhớ rằng hàm được chuyển đến useMemo sẽ chạy trong quá trình hiển thị. Đừng làm bất cứ điều gì ở đó mà bạn thường không làm trong khi kết xuất. Ví dụ: các tác dụng phụ thuộc về useEffect , không phải useMemo .

Nếu không có mảng nào được cung cấp, một giá trị mới sẽ được tính trên mỗi lần hiển thị.

Bạn có thể dựa vào useMemo như một biện pháp tối ưu hóa hiệu suất, không phải là một đảm bảo về ngữ nghĩa. Trong tương lai, React có thể chọn "Quên" một số giá trị đã ghi nhớ trước đó và tính toán lại chúng vào lần hiển thị tiếp theo, ví dụ: để giải phóng bộ nhớ cho các thành phần ngoài màn hình. Viết mã của bạn để mã vẫn hoạt động mà không cần useMemo - rồi thêm mã để tối ưu hóa hiệu suất.

Lưu ý

Mảng phụ thuộc không được truyền dưới dạng đối số cho hàm. Tuy nhiên, về mặt khái niệm, đó là những gì chúng đại diện: mọi giá trị được tham chiếu bên trong hàm cũng phải xuất hiện trong mảng phụ thuộc. Trong tương lai, một trình biên dịch đủ nâng cao có thể tự động tạo mảng này.

Chúng tôi khuyên bạn nên sử dụng quy tắc expustive-deps quy tắc của chúng tôi 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.

useRef

  

const

refContainer

= < / p>

useRef

(

initialValue

)

;

useRef trả về đối tượng ref có thể thay đổi có . current được khởi tạo cho đối số đã truyền ( initialValue ). Đối tượng được trả về sẽ tồn tại trong toàn bộ thời gian tồn tại của thành phần.

Một trường hợp sử dụng phổ biến là truy cập theo cấp bậc của trẻ:

  

function

TextInputWithFocusButton

(

)

{

const

inputEl

=

useRef

(

vô hiệu

)

;

const

onButtonClick

=

(

)

= & gt;

{< / p> inputEl

.

hiện tại

.

tiêu điểm

(

)

;

}

;

trả về

(

& lt;

& gt;

& lt;

đầu vào

ref

=

{ inputEl

}

loại

=

"

text

"

/ & gt;

& lt;

nút

onClick

=

{ onButtonClick

}

& gt;

Tập trung đầu vào

& lt; /

nút

& gt;

& lt; /

& gt;

)

;

}

Về cơ bản, useRef giống như một “cái hộp” có thể giữ một giá trị có thể thay đổi trong thuộc tính . current .

Bạn có thể quen thuộc với ref chủ yếu như một cách để truy cập DOM . Nếu bạn chuyển một đối tượng ref vào React với & lt; div ref = {myRef} / & gt; , React sẽ đặt . current vào nút DOM tương ứng bất cứ khi nào nút đó thay đổi.

Tuy nhiên, useRef () hữu ích hơn thuộc tính ref . Điều này hữu ích khi giữ mọi giá trị có thể thay đổi được tương tự như cách bạn sử dụng các trường cá thể trong các lớp.

Điều này hoạt động vì useRef () tạo một đối tượng JavaScript thuần túy. Sự khác biệt duy nhất giữa useRef () và tạo đối tượng {current: ...} bản thân bạn là useRef sẽ cung cấp cho bạn cùng một đối tượng ref trên mỗi lần hiển thị.

Hãy nhớ rằng useRef không thông báo cho bạn khi nội dung của nó thay đổi. Việc thay đổi thuộc tính . Current không gây ra kết xuất lại. Nếu bạn muốn chạy một số mã khi React đính kèm hoặc tách một tham chiếu đến nút DOM, bạn có thể muốn sử dụng tham chiếu gọi lại .

useImperativeHandle

  

useImperativeHandle

( ref

,

createHandle

,

[

deps

]

)

useImperativeHandle < / code> tùy chỉnh giá trị phiên bản được hiển thị với các thành phần mẹ khi sử dụng ref . Như mọi khi, mã bắt buộc sử dụng refs nên tránh trong hầu hết các trường hợp. useImperativeHandle nên được sử dụng với forwardRef :

  

function

FancyInput

(

đạo cụ

,

ref

)

{

const

inputRef

=

useRef

(

)

;

useImperativeHandle

(

ref

,

(

)

= & gt;

(

{

focus

:

(

)

= & gt;

{

inputRef

.

hiện tại

.

tiêu điểm

(

)

;

}

}

)

)

;

trả về

& lt;

đầu vào

ref

=

{

inputRef

}

...

/ & gt;

;

}

FancyInput

=

forwardRef

(

FancyInput

)

;

Trong ví dụ này, một thành phần mẹ hiển thị & lt; FancyInput ref = {inputRef} / & gt; sẽ có thể gọi inputRef.current.focus () .

useLayoutEffect

Chữ ký giống với useEffect , nhưng nó kích hoạt đồng bộ sau tất cả các đột biến DOM. Sử dụng điều này để đọc bố cục từ DOM và kết xuất lại một cách đồng bộ. Các bản cập nhật đã lên lịch bên trong useLayoutEffect sẽ được xóa đồng bộ trước khi trình duyệt có cơ hội vẽ.

Ưu tiên useEffect tiêu chuẩn khi có thể để tránh chặn các cập nhật trực quan.

Mẹo

Nếu bạn đang di chuyển mã từ một thành phần lớp, hãy lưu ý rằng useLayoutEffect kích hoạt cùng giai đoạn với componentDidMount componentDidUpdate . Tuy nhiên, chúng tôi khuyên bạn nên bắt đầu với useEffect trước và chỉ thử useLayoutEffect nếu điều đó gây ra sự cố.

Nếu bạn sử dụng kết xuất máy chủ, hãy nhớ rằng cả useLayoutEffect cũng như useEffect đều không được chạy cho đến khi JavaScript được tải xuống. Đây là lý do tại sao React cảnh báo khi một thành phần do máy chủ hiển thị chứa useLayoutEffect . Để khắc phục điều này, hãy di chuyển logic đó sang useEffect (nếu nó không cần thiết cho lần hiển thị đầu tiên) hoặc trì hoãn hiển thị thành phần đó cho đến sau khi máy khách hiển thị ( nếu HTML bị hỏng cho đến khi useLayoutEffect chạy).

Để loại trừ một thành phần cần hiệu ứng bố cục khỏi HTML do máy chủ hiển thị, hãy hiển thị thành phần đó có điều kiện với showChild & amp; & amp; & lt; Child / & gt; và hoãn hiển thị nó với useEffect (() = & gt; {setShowChild (true);}, []) . Bằng cách này, giao diện người dùng không bị hỏng trước khi hydrat hóa.

useDebugValue

  

useDebugValue

( giá trị

)

useDebugValue có thể được sử dụng để hiển thị nhãn cho các móc tùy chỉnh trong React DevTools.

Ví dụ: hãy xem xét useFriendStatus Hook tùy chỉnh được mô tả trong “Building Your Own Hooks” :

  

function

useFriendStatus

(

friendID

)

{

const

[

isOnline

,

setIsOnline

]

=

useState

(

null

)

;

useDebugValue

(

isOnline

?

'Trực tuyến'

:

'Ngoại tuyến'

) < / p>

;

return

isOnline

;

}

Mẹo

Chúng tôi khuyên bạn không nên thêm giá trị gỡ lỗi vào mọi Hook tùy chỉnh. Nó có giá trị nhất đối với các Hook tùy chỉnh là một phần của thư viện được chia sẻ.

Trì hoãn các giá trị gỡ lỗi định dạng

Trong một số trường hợp, việc định dạng một giá trị để hiển thị có thể là một thao tác tốn kém. Nó cũng không cần thiết trừ khi Hook thực sự được kiểm tra.

Vì lý do này, useDebugValue chấp nhận một hàm định dạng làm tham số thứ hai tùy chọn. Hàm này chỉ được gọi nếu các Hook được kiểm tra. Nó nhận giá trị gỡ lỗi dưới dạng một tham số và sẽ trả về giá trị hiển thị được định dạng.

Ví dụ: một Hook tùy chỉnh trả về giá trị Date có thể tránh gọi toDateString hoạt động không cần thiết bằng cách chuyển các định dạng sau:

 

useDebugValue

( ngày

,

ngày

= & gt;

ngày

.

toDateString

(

)

)

;

useDeferredValue

  

const

deferredValue

= < / p>

useDeferredValue

(

value

)

;

useDeferredValue chấp nhận một giá trị và trả về một bản sao mới của giá trị đó sẽ trì hoãn các bản cập nhật khẩn cấp hơn. Nếu kết xuất hiện tại là kết quả của một bản cập nhật khẩn cấp, chẳng hạn như đầu vào của người dùng, React sẽ trả về giá trị trước đó và sau đó hiển thị giá trị mới sau khi kết xuất khẩn cấp đã hoàn thành

Móc này tương tự như móc không gian người dùng sử dụng gỡ lỗi hoặc điều chỉnh để trì hoãn cập nhật. Lợi ích của việc sử dụng useDeferredValue là React sẽ hoạt động trên bản cập nhật ngay sau khi công việc khác kết thúc (thay vì đợi một khoảng thời gian tùy ý) và như < span> startTransition , các giá trị hoãn lại có thể bị tạm ngưng mà không gây ra dự phòng không mong muốn cho nội dung hiện có

Ghi nhớ những đứa trẻ bị hoãn lại

useDeferredValue chỉ xác định giá trị mà bạn chuyển cho nó. Nếu bạn muốn ngăn một thành phần con hiển thị lại trong quá trình cập nhật khẩn cấp, bạn cũng phải ghi nhớ thành phần đó bằng React.memo hoặc React.useMemo :

 

chức năng

Typeahead

(

)

{

const

truy vấn

=

useSearchQuery

(

''

)

;

const

deferredQuery

=

useDeferredValue

(

truy vấn

)

;

const

gợi ý

=

useMemo

(

(

)

= & gt;

& lt;

Tìm kiếm Đề xuất

< / p>

truy vấn

=

{

deferredQuery

}

/ & gt;

>

,

[

deferredQuery

]

)

;

return

(

& lt;

& gt;

& lt;

SearchInput < / p>

câu truy vấn

=

{

truy vấn

}

/ & gt; >

& lt;

Hồi hộp < / p>

dự phòng

= >

"

Đang tải kết quả ...

"

& gt;

{

đề xuất

}

& lt; /

Hồi hộp

& gt;

& lt; /

& gt;

)

;

}

Việc ghi nhớ con nói với React rằng nó chỉ cần hiển thị lại chúng khi deferredQuery thay đổi chứ không phải khi truy vấn thay đổi. Cảnh báo này không phải là duy nhất đối với useDeferredValue và nó giống với mẫu bạn sẽ sử dụng với các móc tương tự sử dụng chức năng gỡ lỗi hoặc điều chỉnh.

useTransition

  

const

[ isPending

,

startTransition

]

=

useTransition

(

)

;

Trả về giá trị trạng thái cho trạng thái đang chờ xử lý của quá trình chuyển đổi và một hàm để bắt đầu nó.

startTransition cho phép bạn đánh dấu các cập nhật trong lệnh gọi lại được cung cấp dưới dạng chuyển tiếp:

  

startTransition

(

(

)

= & gt;

{

setCount

(

count

+

1

)

;

}

)

isPending cho biết khi quá trình chuyển đổi đang hoạt động để hiển thị trạng thái đang chờ xử lý:

  

function

Ứng dụng

(

)

{

const

[

isPending

,

startTransition

]

=

useTransition

(

)

;

const

[

count

,

setCount

]

=

useState

(

0

)

;

function

handleClick

(

)

{

startTransition

(

(

)

= & gt;

{

setCount

(

c

= & gt;

c

+

1

)

;

}

)

}

trả về

(

& lt;

div

& gt; < / p>

{

isPending

& amp; & amp;

& lt;

Con quay

/ & gt ;

}

& lt;

nút

onClick

=

{ handleClick

}

& gt;

{< / p> đếm

}

& lt; /

nút < / p>

& gt;

& lt; /

div

& gt;

)

;

}

Lưu ý:

Các cập nhật trong quá trình chuyển đổi mang lại các cập nhật khẩn cấp hơn, chẳng hạn như nhấp chuột.

Các cập nhật trong quá trình chuyển đổi sẽ không hiển thị dự phòng cho nội dung bị tạm ngưng lại. Điều này cho phép người dùng tiếp tục tương tác với nội dung hiện tại trong khi hiển thị bản cập nhật.

useId

  

const

id

= < / p>

useId

(

)

;

useId là một móc để tạo ID duy nhất ổn định trên máy chủ và khách hàng, đồng thời tránh tình trạng hydrat hóa không khớp.

Lưu ý

useId không để tạo khóa trong danh sách . Khóa phải được tạo từ dữ liệu của bạn.

Đối với một ví dụ cơ bản, hãy chuyển trực tiếp id đến các phần tử cần nó:

  

function

Hộp kiểm

(

)

{

const

id

=

useId

(

)

;

trả về

(

& lt;

& gt;

& lt;

nhãn

htmlFor

=

{ id

}

& gt;

Bạn có thích React không?

& lt; /

nhãn

& gt;

& lt;

đầu vào

id

=

{ id

}

loại

=

"

hộp kiểm

"

tên

=

"

react

"

/ & gt;

& lt; /

& gt;

)

;

}

;

Đối với nhiều ID trong cùng một thành phần, hãy thêm một hậu tố sử dụng cùng một id :

  

function

NameFields

(

)

{

const

id

=

useId

(

)

;

trả về

(

& lt;

div

& gt; < / p>

& lt;

nhãn

htmlFor

=

{ id

+

'- firstName'

}

& gt;

Tên

& lt; /

nhãn

& gt;

& lt;

div

& gt;

& lt;

đầu vào

id

=

{ id

+

'- firstName'

}

loại

=

"

text

"

/ & gt;

& lt; /

div

& gt;

& lt;

nhãn

htmlFor

=

{ id

+

'- lastName'

}

& gt;

Họ

& lt; /

nhãn

& gt;

& lt;

div

& gt;

& lt;

đầu vào

id

=

{ id

+

'- lastName'

}

loại

=

"

text

"

/ & gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

)

;

}

Lưu ý:

useId tạo một chuỗi bao gồm mã thông báo : . Điều này giúp đảm bảo rằng mã thông báo là duy nhất, nhưng không được hỗ trợ trong các bộ chọn CSS hoặc API như querySelectorAll .

useId hỗ trợ IDfierPrefix để tránh xung đột trong các ứng dụng nhiều gốc. Để định cấu hình, hãy xem các tùy chọn cho hydrateRoot ReactDOMServer .

Móc thư viện

Các Hook sau được cung cấp cho các tác giả thư viện để tích hợp sâu các thư viện vào mô hình React và thường không được sử dụng trong mã ứng dụng.

useSyncExternalStore

  

const

trạng thái

= < / p>

useSyncExternalStore

(

subscribe

,

getSnapshot

[

,

getServerSnapshot

]

)

;

useSyncExternalStore là móc được khuyến nghị để đọc và đăng ký từ các nguồn dữ liệu bên ngoài theo cách tương thích với các tính năng kết xuất đồng thời như hydrat hóa chọn lọc và cắt giảm thời gian.

Phương thức này trả về giá trị của cửa hàng và chấp nhận ba đối số:

  • đăng ký: chức năng đăng ký một lệnh gọi lại được gọi bất cứ khi nào cửa hàng thay đổi.
  • getSnapshot : hàm trả về giá trị hiện tại của cửa hàng.
  • getServerSnapshot : hàm trả về ảnh chụp nhanh được sử dụng trong quá trình hiển thị trên máy chủ.

Ví dụ cơ bản nhất chỉ đơn giản là đăng ký toàn bộ cửa hàng:

  

const

trạng thái

= < / p>

useSyncExternalStore

(

cửa hàng

.

đăng ký

,

cửa hàng

.

getSnapshot

)

;

Tuy nhiên, bạn cũng có thể đăng ký vào một trường cụ thể:

  

const

select Trường

= < / p>

useSyncExternalStore

(

lưu trữ

.

đăng ký

,

(

)

= & gt;

store

.

getSnapshot

(

)

.

selectField

,

)

;

Khi hiển thị máy chủ, bạn phải tuần tự hóa giá trị cửa hàng được sử dụng trên máy chủ và cung cấp cho useSyncExternalStore . React sẽ sử dụng ảnh chụp nhanh này trong quá trình hydrat hóa để ngăn máy chủ không khớp:

  

const

select Trường

= < / p>

useSyncExternalStore

(

lưu trữ

.

đăng ký

,

(

)

= & gt;

store

.

getSnapshot

(

)

.

selectField

,

(

)

= & gt;

INITIAL_SERVER_SNAPSHOT

.

selectField

,

)

;

Lưu ý:

getSnapshot phải trả về một giá trị được lưu trong bộ nhớ cache. Nếu getSnapshot được gọi nhiều lần liên tiếp, nó phải trả về cùng một giá trị chính xác trừ khi có bản cập nhật cửa hàng ở giữa.

Một miếng đệm được cung cấp để hỗ trợ nhiều phiên bản React được xuất bản dưới dạng use-sync-external-store / shim . Miếng đệm này sẽ ưu tiên useSyncExternalStore khi có sẵn và dự phòng cho việc triển khai không gian người dùng khi không có.

Để thuận tiện, chúng tôi cũng cung cấp phiên bản API với hỗ trợ tự động để ghi nhớ kết quả của getSnapshot được xuất bản dưới dạng use-sync-external-store / with-selector < / code>.

useInsertionEffect

  

useInsertionEffect

( didUpdate

)

;

Chữ ký giống với useEffect , nhưng nó kích hoạt đồng bộ trước tất cả các đột biến DOM. Sử dụng công cụ này để đưa các kiểu vào DOM trước khi đọc bố cục trong useLayoutEffect . Vì hook này có giới hạn về phạm vi nên hook này không có quyền truy cập vào các giới thiệu và không thể lên lịch cập nhật.

Lưu ý:

useInsertionEffect nên được giới hạn cho các tác giả thư viện css-in-js. Ưu tiên useEffect hoặc useLayoutEffect thay vào đó.


Xem thêm những thông tin liên quan đến chủ đề sử dụng phản ứng ref hook

useRef vs useState | intro | hooks | amplifyabhi

  • Tác giả: amplifyabhi coding
  • Ngày đăng: 2022-05-23
  • Đánh giá: 4 ⭐ ( 6022 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: hooks react flutterhooks

    useRef() usage is explained with differentiating with useState in this part of the intro vlog.

    In coming tutorial you will be seeing difference with a live example.

    Join this channel to get access to perks:
    https://www.youtube.com/channel/UCWCLzrDi9TVkAsE-l4ZAHVQ/join

    amplifyabhi

    *** Support Channel @ :- https://www.buymeacoffee.com/abhiapps ***

    For more interesting tutorials @ - https://bit.ly/2SmKtdK

    *** Visit my website ***

    http://androidcoding.in/

    *** Follow us on social media ***

    https://www.youtube.com/androidcodingin
    https://twitter.com/androidcodingen
    https://telegram.me/androidcodingin
    https://www.facebook.com/androidcoding.in/
    https://medium.com/androidcoding-in
    https://www.instagram.com/androidcoding.in/
    https://in.pinterest.com/abhishekpandravada/androidcodingin/

    *** Join Our Group ***

    https://bit.ly/3CQ39do

    *** Tutorial Collection ***

    Android - Kotlin Complete Course Latest *** - https://bit.ly/3jYr3uK
    Flutter series - https://bit.ly/2WmLGFM
    GetX Library - https://bit.ly/3CVaTuP
    Python Free Course - https://bit.ly/3iRNEKb
    Firebase series - https://bit.ly/3fzY64T
    Retrofit series - https://bit.ly/392hQvs
    Java series - https://bit.ly/3ezLKIq
    Php series - https://bit.ly/3fzWNTg
    Kotlin series - https://bit.ly/3fz7aXH
    Android series - https://bit.ly/2WoNRbS
    Database series - https://bit.ly/3h0ZWvO
    Databinding - https://bit.ly/30jv4zS

    *** Free Courses ***

    Flutter - https://bit.ly/2WmLGFM
    Android Kotlin - https://bit.ly/3jYr3uK
    Python Free Course - https://bit.ly/3iRNEKb

    More Interesting tutorials :
    Flutter Video Player : https://youtu.be/dXxe7E6WPUM
    Flutter Fetch Location : https://youtu.be/4E3saOmv7ow
    Flutter Grant Permission : https://youtu.be/jP0U03OqVW4
    Flutter Send SMS/MMS : https://youtu.be/XR4RhZTyeKM
    Flutter Process Time Out : https://youtu.be/WwbUtmuSebg
    Flutter Unit Testing : https://youtu.be/euor6NcjTAU
    Flutter Send SMS / MMS : https://youtu.be/XR4RhZTyeKM
    Flutter process timed out issue !!!!! : https://youtu.be/S5qqwq6Ge7Q
    Flutter Show Password : https://youtu.be/RUQEmu9w8cE
    Flutter OTP Screen Implementation : https://youtu.be/ebdZTfoQzEc
    Flutter shimmer effect animation : https://youtu.be/bWZ8GssQ7Ms
    Flutter local json : https://youtu.be/aL9d2FuB1x4
    Flutter Stepper Implementation : https://youtu.be/uy4NfeTgxPo
    Flutter credit card view design : https://youtu.be/Ij1PCyLL4Eg
    Flutter drop-down tutorial : https://youtu.be/YBK-3AVF81k
    Flutter action chips : https://youtu.be/v2DCPNFDavw
    Flutter expandable listview : https://youtu.be/oeKYzetQsxs
    Flutter listview : https://youtu.be/D10c15VKF20
    Flutter swipeable listview : https://youtu.be/snmeSAinGP4
    Flutter theme : https://youtu.be/dbhl2ssz4xc
    Flutter local notifications : https://youtu.be/8yJKWy9G9ew
    Flutter slide tutorial : https://youtu.be/sv-SxqAfh6k
    GridView Orientation : https://youtu.be/5ekL56y2AIM
    Animation : https://youtu.be/LsEUmnSmMPI
    ExoPlayer : https://youtu.be/kqZOjrYQSL0
    Flutter Splash Screen : https://youtu.be/KVKZ9Nol37k
    Flutter Doctor command Issue : https://www.youtube.com/watch?v=kIcwX_w3Xw8
    Sha 1 Generation : https://youtu.be/4tL0KWvxrhE
    Text Controllers : https://youtu.be/HJRowyHurww
    Room database : https://youtu.be/2bdwueEvrMI
    Realm database : https://youtu.be/bsDBVDF6waY
    Audio Player : https://youtu.be/e_UcL5DIjfU
    Bottom Sheet : https://youtu.be/ITHnPVDZIXc
    Linear Progress : https://youtu.be/MtJlX5kQa3Y
    Http Network calls : https://youtu.be/CI5jQSQdq7k
    BLoC Pattern : https://youtu.be/dj8TqRlSMGs
    Google Maps : https://youtu.be/ryd5uUc6auU
    Sqlite Database : https://youtu.be/FoQoNrDJfbk
    Bottom Navigation Tutorial : https://youtu.be/XgNReTVunf4
    Charts : https://youtu.be/nCmihMrWS38

    course free android iOS flutter flutterdev trending

Làm thế nào để sử dụng React.earchRef trong một thành phần dựa trên lớp?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 3386 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Ý tưởng luôn sử dụng cùng một chỗ dựa cho refcó thể đạt được bằng cách…

Cách sửa lỗi cho #REF! .

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 3092 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sửa lỗi #REF! trong Excel

7 cách sửa lỗi Not Responding trên Win 10 hiệu quả nhất

  • Tác giả: www.thegioididong.com
  • Đánh giá: 4 ⭐ ( 2555 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sửa lỗi Not Responding trên Win 10 nhanh chóng hiệu quả. Nguyên nhân, cách khắc phục. Xem ngay!

Hiểu về hook useRef của React như thế nào cho đúng

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 2728 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu nói chào hàng của useState vẫn thường được nghe: thêm state vào trong function component.

Tìm hiểu về vòng đời thực thể trong Vue.js

  • Tác giả: allaravel.com
  • Đánh giá: 4 ⭐ ( 1354 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiểu chi tiết các Hook trong vòng đời thực thể Vue giúp bạn thiết kế ứng dụng chính xác và thực hiện chạy ngay khi lần đầu viết mã nguồn.

Thao tác với các phần tử DOM với React Hook sử dụng useRef()

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9765 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xử lý DOM là kỹ thuật căn bản mà mọi lập trình frontend cần nắm, tuy nhiên nhiều anh em không cảm thấy hứng thú khi sử dụng refs. Theo như hiểu biết của mình tính đến thời điểm hiện tại, chúng ta 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  Hiểu hiển thị CSS: Không có, Chặn, Nội tuyến và Nội tuyến-Khối - khối nội tuyến hiển thị là gì

By ads_php