Refs trong react là gì và một số trường hợp sử dụng refs (ok)
https://viblo.asia/p/refs-trong-react-la-gi-va-mot-so-truong-hop-su-dung-refs-RnB5p4y65PG
Refs trong react là gì và một số trường hợp sử dụng refs
Refs cung cấp cho chúng ta cách access đến các DOM nodes hoặc React elements được tạo ra trong method render
Giới thiệu về refs
refs
Trong data flow của React, props
là cách để các parent components tương tác với các child components. Để updated child componnent, bạn cần re-render nó với các props
mới. Nhưng sẽ có một số trường hợp cần bắt buộc phải updated các child component bên ngoài data flow của React. Các child component có thể là 1 instance của React Component hoặc có thể là DOM element. Cho những trường hợp này, chúng ta có thể sử dụng react Refs
.
Một số trường hợp dùng refs
refs
Control focus; get text của DOM element; get state value(play/pause/timeline) của media playback,... nói chung là dùng trong những trường hợp các data này không cần đưa vào
state
của component.Trigger các transitions, animations: sử dụng
refs
khi một element cần trigger animation/transition của một element khácTích hợp với các Third-party DOM libraries
Sử dụng useRef
của react hooks
useRef
của react hooksĐoạn code ở trên, chúng ta sẽ khởi tạo 1 ref
object có .current
property với initialValue
. useRef
sẽ cho cùng 1 ref
object trên mỗi lần render.
Nếu
ref
object này là 1DOM element
thì chúng ta có thể manipulated cácDOM element
này nhưpure javascript
thường làm.Nếu
ref
object này là 1javascript object
thì các object này sẽ tồn tại trong scope của component như 1plain javascript object
thông thường.
Các ví dụ:
Điều khiển focus của input:
Ở ví dụ này, chúng ta sẽ sử dụng userRef
để tham chiếu tới input element, sau đó sẽ thực hiện focus input khi click button
Demo: https://codesandbox.io/s/dawn-thunder-w9hur
Set/Get giá trị trước đó của state:
Ở ví dụ này; sẽ có 1 input, nhập một vài ký tự và thực hiện blur
input đó, chúng ta sẽ check xem previous value
, current value
sau mỗi lần blur input (case này trong thực tế là: nếu sau mỗi lần blur mà giá trị trước và sau khi blur có thay đổi thì thực hiện call api, ngược lại nếu không thay đổi thì không làm gì cả)
Demo: https://codesandbox.io/s/hungry-glade-d7mjb
Sau khi hiểu về useRef
ở ví dụ trên, chúng ta sẽ hay gặp 1 trường hợp thực tế như sau: sau khi input data vào các field trên màn hình(route A) sau đó điều hướng sang route B, lúc này ta sẽ cần lưu các data trên màn hình vào redux store
như sau:
Demo: https://codesandbox.io/s/distracted-banzai-3hrwb
Control animation:
Chúng ta sử dụng useRef
để get tham chiếu đến DOM element
và thực hiện trigger animation
Demo: https://codesandbox.io/s/sleepy-mendel-lc8kz
Kết luận
Ở trên là một số ví dụ về sử dụng refs
trong react hook, nhưng chúng ra hãy lưu ý một điều là nên hạn chế sử dụng refs
mà thay vào đó là sử dụng state
để control React Component; còn những trường hợp mà không thể dùng state
, props
thì mới sử dụng refs
; trong đó những trường hợp thao tác với DOM element là hay sử dụng refs
nhất.
Cám ơn các bạn đã đọc bài viết, hy vọng các bạn ứng dụng refs
một cách tốt nhất khi làm việc
Last updated
Was this helpful?