Điểm nổi bật của React chính là khả năng sử dụng Virtual DOM để tăngtốc độ xử lý, cùng với tính năng tái sử dụng các thành phần components, giúp mã nguồn dễ dàng quản lý và bảo trì hơn..
Lợi ích
ReactJS sử dụng Virtual DOM, một cấu trúc dữ liệu lưu trữ trong bộ nhớ, giúp tăng tốc độ ứng dụng bằng cách chỉ cập nhật những thay đổi mới nhất vào DOM của trình duyệt.
Với tính năng component trong React, bạn có khả năng thiết kế các thành phần tùy chỉnh, giúp tăng cường khả năng tái sử dụng và nâng cao hiệu quả bảo trì mã nguồn.
ReactJS là một thư viện JavaScript mã nguồn mở, dễ học và nhanh chóng trở nên phổ biến nhờ sự hỗ trợ từ Facebook và Instagram Nhiều công ty lớn như Apple và Netflix cũng đã áp dụng React trong phát triển ứng dụng của họ.
• Vì Facebook quản lý thư viện ReactJS, nên nó được duy trì tốt và luôn cập nhật mới.
• ReactJS có thể được sử dụng để tạo ra các giao diện người dùng phức tạp cho cả ứng dụng desktop và mobile.
Hạn chế
JSX là cú pháp mở rộng của JavaScript, kết hợp giữa JavaScript và HTML, điều này có thể gây khó khăn cho nhiều lập trình viên, đặc biệt là những người đã quen với việc tách biệt HTML và JavaScript.
React có thể gây khó khăn cho người mới bắt đầu, mặc dù nó dễ học khi đã quen thuộc với JavaScript Các khái niệm như JSX, Virtual DOM và cách quản lý state, props có thể trở nên phức tạp đối với những người chưa có kinh nghiệm.
React là một thư viện UI, do đó, khi phát triển ứng dụng lớn, bạn cần kết hợp với nhiều thư viện khác để quản lý state, xử lý routing và tích hợp API Việc này có thể làm cho dự án trở nên phức tạp hơn.
Mặc dù React cung cấp một lượng tài liệu học tập phong phú, tài liệu chính thức của nó thường quá chung chung và có thể gây khó khăn cho người mới bắt đầu Điều này khiến các nhà phát triển phải tìm kiếm thêm nhiều nguồn tài liệu khác để hiểu rõ hơn về các khái niệm phức tạp trong React.
Để phát triển ứng dụng với React, bạn cần thiết lập nhiều công cụ và môi trường như Babel, Webpack và ESLint Mặc dù những công cụ này giúp tối ưu hóa quy trình phát triển, nhưng việc tìm hiểu và thiết lập chúng có thể gây khó khăn cho người mới và làm chậm tiến độ.
Khả năng tiếp cận nâng cao là một yếu tố quan trọng trong các dự án lớn và phức tạp, nơi việc duy trì và kiểm soát các thành phần trở nên khó khăn do có quá nhiều state cần quản lý Mặc dù Redux có thể hỗ trợ trong việc này, nhưng việc học và tích hợp Redux vào dự án yêu cầu thời gian và công sức đáng kể.
Các Tính Năng của ReactJS
React là một trong những thư viện frontend phổ biến nhất hiện nay nhờ vào những tính năng nổi bật của nó Dưới đây là danh sách các tính năng quan trọng của React.
JSX (JavaScript XML) là cú pháp mở rộng của JavaScript, cho phép mô tả giao diện người dùng (UI) một cách trực quan Với JSX, bạn có thể viết thẻ HTML ngay trong mã JavaScript, giúp mã nguồn trở nên rõ ràng và dễ hiểu hơn.
JSX cho phép lập trình viên kết hợp mã HTML trực tiếp vào mã JavaScript, làm cho giao diện người dùng trở nên dễ hiểu hơn và quá trình phát triển nhanh chóng.
JSX không bắt buộc trong React, nhưng việc sử dụng nó giúp việc viết các thành phần UI phức tạp trở nên dễ dàng và gọn gàng hơn nhiều.
2 Virtual Document Object Model (DOM)
Virtual DOM là phiên bản tối ưu của Real DOM, cho phép cập nhật chỉ những đối tượng cần thiết khi trạng thái thay đổi Điều này giúp tiết kiệm tài nguyên xử lý và cải thiện hiệu suất cho ứng dụng React.
Document Object Model (DOM) là gì?
Document Object Model (DOM) là cấu trúc cây biểu diễn tài liệu HTML hoặc XML, với mỗi thành phần là một nút DOM cho phép các ngôn ngữ lập trình như JavaScript tương tác và thay đổi động cấu trúc tài liệu.
Virtual DOM và React DOM tương tác với nhau như thế nào? 12
Virtual DOM là một cải tiến quan trọng của React nhằm tối ưu hóa hiệu suất Khi xảy ra thay đổi, React sẽ cập nhật Virtual DOM trước và so sánh với phiên bản trước để xác định các thay đổi cần thiết Kết quả là chỉ những phần đã thay đổi mới được cập nhật lên Real DOM, giúp ứng dụng hoạt động nhanh chóng và mượt mà hơn.
React được phát triển để đảm nhiệm vai trò của phần 'View' trong mô hình kiến trúc MVC (Model-View-Controller) Điều này có nghĩa là React tập trung vào việc quản lý giao diện người dùng (UI) của ứng dụng, cho phép hiển thị dữ liệu từ Model và xử lý các tương tác của người dùng một cách hiệu quả.
• Model: Quản lý tất cả các dữ liệu và logic của ứng dụng.
• View:Chính là React, chịu trách nhiệm về việc hiển thị thông tin cho người dùng và tương tác với người dùng.
• Controller: Đóng vai trò là cầu nối giữa Model và View, giúp xử lý luồng dữ liệu.
4 Các Phần Mở Rộng (Extensions)
React không chỉ đơn thuần là một thư viện giao diện người dùng (UI), mà còn có khả năng mở rộng thông qua các công cụ bổ sung, nhằm đáp ứng toàn diện nhu cầu phát triển ứng dụng frontend hiện đại.
Redux và Flux là hai công cụ quan trọng giúp quản lý trạng thái ứng dụng một cách có tổ chức và rõ ràng Chúng tối ưu hóa việc luân chuyển dữ liệu giữa các thành phần trong ứng dụng, giúp quá trình này trở nên hiệu quả và dễ dàng hơn.
React Native là một công cụ phát triển ứng dụng di động cho phép lập trình viên sử dụng cú pháp và công nghệ tương tự như React, từ đó tiết kiệm thời gian và công sức trong việc xây dựng ứng dụng cho nhiều nền tảng khác nhau.
5 Data Binding (Liên kết Dữ liệu)
React áp dụng liên kết dữ liệu một chiều, cho phép kiểm soát luồng dữ liệu từ thành phần cha đến thành phần con Cách tiếp cận này giúp quản lý trạng thái ứng dụng trở nên đơn giản hơn và giảm thiểu lỗi không mong muốn khi có sự thay đổi dữ liệu.
Với một cộng đồng phát triển rộng lớn và sự hỗ trợ từ Facebook, React có những công cụ giúp lập trình viên gỡ lỗi một cách dễ dàng.
React Developer Tools là một tiện ích mở rộng do Facebook phát triển cho trình duyệt Chrome, cho phép người dùng kiểm tra và chỉnh sửa các thành phần React trực tiếp trong trình duyệt Tiện ích này giúp bạn nhanh chóng xác định và khắc phục các vấn đề cũng như lỗi trong ứng dụng của mình.
Cộng đồng lập trình viên đông đảo cung cấp sự hỗ trợ mạnh mẽ, giúp bạn dễ dàng tìm ra giải pháp cho các vấn đề phát sinh trong quá trình phát triển ứng dụng.
Các component là những khối xây dựng quan trọng cho bất kỳ ứng dụng nào được phát triển bằng React, và một ứng dụng thường bao gồm nhiều component khác nhau.
Component trong React là một phần của giao diện người dùng, giúp phân chia giao diện thành các phần độc lập và có thể tái sử dụng Mỗi component có khả năng được xử lý riêng biệt, mang lại tính linh hoạt và hiệu quả trong việc phát triển ứng dụng.
Tính tái sử dụng trong lập trình cho phép chúng ta sử dụng lại các thành phần đã được triển khai ở một khu vực của ứng dụng tại một khu vực khác Việc này không chỉ giúp tăng tốc độ phát triển mà còn giúp giữ cho mã nguồn trở nên gọn gàng và dễ quản lý hơn.
Các thành phần lồng nhau cho phép một thành phần chứa nhiều thành phần khác bên trong, từ đó tạo ra thiết kế phức tạp hơn và nâng cao khả năng tương tác giữa các yếu tố.
• Phương thức render: Trong hình thức tối thiểu, một thành phần phải định nghĩa một phương thức render chỉ ra cách nó được hiển thị trên DOM.
Truyền Props (Thuộc tính) là một thành phần quan trọng trong lập trình, cho phép nhận các props từ thành phần cha Đây là các thuộc tính được truyền vào để xác định các giá trị cụ thể cho thành phần, giúp tối ưu hóa quá trình phát triển và quản lý dữ liệu trong ứng dụng.
Functional components, also known as stateless components, are written as JavaScript functions and do not have their own state or traditional lifecycle methods However, with the introduction of React Hooks, their capabilities have expanded significantly, allowing them to manage state using the useState() hook.
Các thành phần lớp (Stateful Components) trong React được viết dưới dạng lớp trong JavaScript, cho phép quản lý trạng thái và sử dụng các phương thức vòng đời để kiểm soát sự thay đổi giao diện Tuy nhiên, React đang chuyển hướng sang các thành phần hàm (functional components) với Hooks vì tính đơn giản và hiệu quả của chúng.
Mounting
Mounting là giai đoạn khi một component được gắn vào DOM và hiển thị trên trang web Trong quá trình này, các phương thức được gọi theo thứ tự khi phần tử được tạo ra và chèn vào DOM.
Phương thức componentWillMount() được gọi ngay trước khi component được gắn vào DOM, thực hiện các tác vụ cần thiết trước lần render đầu tiên của ứng dụng React Sau khi phương thức này thực thi, component sẽ được gắn vào DOM, vì vậy tất cả các công việc cần hoàn thành trước khi gắn kết component sẽ được định nghĩa trong phương thức này.
• render():Phương thức này gắn component lên trình duyệt.
Phương thức componentDidMount() được gọi ngay sau khi component được gắn vào DOM, diễn ra một lần duy nhất sau khi phương thức render() được thực thi lần đầu tiên Trong các ứng dụng React, đây thường là nơi chúng ta thực hiện các cuộc gọi API.
Updating
Trong giai đoạn này, các phương thức được gọi khi State hoặc Props trong một component được cập nhật, cho phép ứng dụng React phản ứng với đầu vào của người dùng như nhấp chuột và nhấn phím Điều này dẫn đến việc tạo ra một giao diện người dùng web có khả năng phản hồi Các phương thức này được gọi theo thứ tự để thực hiện việc cập nhật của component.
• componentWillReceiveProps():Chúng ta gọi phương thức này trước khi một component nhận được props mới.
• setState():Hàm này có thể được gọi một cách rõ ràng bất cứ lúc nào Hàm này được sử dụng để cập nhật trạng thái của một component.
Phương thức shouldComponentUpdate() được gọi trước khi một component được render, giúp React xác định xem có nên cập nhật component khi nhận props hoặc state mới hay không Phương thức này nhận các props và state mới làm đối số và trả về giá trị True hoặc False để quyết định xem có cần render lại component hay không.
• componentWillUpdate(): Phương thức này được gọi một lần trước khi hàm render() được thực thi sau khi State hoặc Props được cập nhật.
• render():Component được render khi phương thức này được gọi.
• componentDidUpdate():Phương thức này được gọi một lần sau khi hàm render() được thực thi sau khi State hoặc Props được cập nhật.
Unmounting
Giai đoạn cuối cùng là khi component bị gỡ bỏ khỏi DOM, đánh dấu sự kết thúc của vòng đời component.
Phương thức componentWillUnmount() được gọi một lần trước khi component bị gỡ bỏ khỏi giao diện, giúp giải phóng tài nguyên và hủy bỏ các lắng nghe sự kiện, từ đó ngăn ngừa rò rỉ bộ nhớ.
5 Hooks và sự chuyển dịch từ Class Component sang Functional Com- ponent
Trong các phiên bản gần đây, React đã giới thiệu React Hooks, mang đến một giải pháp mạnh mẽ thay thế cho class component Điều này cho phép functional component quản lý state và sử dụng các phương thức lifecycle Chuyển sang functional component mang lại nhiều lợi ích đáng kể.
• Code dễ hiểu và gọn gàng hơn:Functional component thường ngắn gọn và dễ hiểu hơn class component, đặc biệt khi sử dụng React Hooks.
• Quản lý trạng thái dễ dàng với Hooks:VớiuseState()vàuseEffect(), bạn có thể dễ dàng quản lý và theo dõi trạng thái cũng như vòng đời của component.
React Hooks enable the creation of custom hooks, facilitating the easy reuse of logic across components This reduces redundancy and enhances the organization of the codebase.
React là thư viện UI dựa trên component, cho phép chia giao diện người dùng thành các phần nhỏ, có thể tái sử dụng và quản lý độc lập Một trong những cơ chế quan trọng trong React là Props, giúp kết nối các component này lại với nhau.
Props, viết tắt của "properties", là công cụ truyền dữ liệu từ component cha đến các component con trong ứng dụng Nhờ có props, các component con có thể sử dụng dữ liệu và hành vi từ component cha mà không thể thay đổi chúng, giúp duy trì tính nhất quán và đảm bảo sự phân cấp rõ ràng giữa các thành phần.
Props là các thuộc tính không thể thay đổi và chỉ có thể được truy cập trong component con, điều này giúp đảm bảo tính ổn định cho ứng dụng và ngăn chặn việc thay đổi dữ liệu không mong muốn.
Props giữ vai trò quan trọng trong việc duy trì tính tái sử dụng và phân cấp rõ ràng cho các component, giúp mã nguồn trở nên dễ đọc, dễ bảo trì và có khả năng mở rộng Ví dụ điển hình là việc truyền các thuộc tính hiển thị như màu sắc, kích thước, và các hành động (callback) từ component cha đến các nút (button) hoặc form trong component con.
2 Sử dụng Props trong React Để sử dụng props trong ứng dụng React, chúng ta cần thực hiện ba bước cơ bản:
• Định nghĩa một thuộc tính và giá trị của nó: Trong component cha,chúng ta định nghĩa props và gán giá trị cho nó.
• Truyền props đến component con: Props được truyền đến component con bằng cách sử dụng cú pháp tương tự như truyền thuộc tính HTML.
In child components, we can access and display prop values using the syntax this.props in class components or by utilizing the props parameter in functional components.
State trong React là một đối tượng dùng để lưu trữ dữ liệu liên quan đến một component cụ thể, quyết định cách hiển thị và phản hồi với hành động của người dùng Khi state thay đổi, React tự động render lại component để cập nhật giao diện.
State trong React có khả năng thay đổi suốt vòng đời của một component, khác với props Nó được sử dụng để lưu trữ các giá trị cần cập nhật như thông tin đầu vào của người dùng, trạng thái toggle, và dữ liệu từ API.
Khi trạng thái (state) thay đổi, React tự động gọi phương thức render() để cập nhật giao diện của component, đảm bảo rằng giao diện luôn phản ánh chính xác trạng thái hiện tại.
In functional components, the useState() hook simplifies state management, making it easier than traditional class components.
State đóng vai trò quan trọng trong việc phát triển các ứng dụng có khả năng phản hồi nhanh chóng và linh hoạt, đồng thời hỗ trợ tạo ra các giao diện tương tác tự động điều chỉnh dựa trên hành vi của người dùng.
To update the state in React, it is essential to use the setState() method in class components or the setter function from useState() in functional components This practice ensures that state changes are managed properly, allowing the component to re-render accurately.
Việc thay đổi giá trị của state trực tiếp sẽ không kích hoạt lại quá trình render của component, dẫn đến khả năng xảy ra lỗi không mong muốn Do đó, để đảm bảo cập nhật state một cách chính xác, luôn cần sử dụng phương thức setState().
Dưới đây là bảng so sánh sự khác nhau giữaState và Propstrong React:
State được sử dụng để lưu trữ dữ liệu của các thành phần (com- ponents) cần được render ra giao diện.
Props được sử dụng để truyền dữ liệu và các hàm xử lý sự kiện đến các thành phần con.
State lưu trữ dữ liệu và có thể thay đổi theo thời gian.
Props là bất biến - một khi đã được thiết lập, props không thể thay đổi.
Component State chỉ được sử dụng trong class components.
Props được sử dụng trong cả class components và functional compo- nents.
Cập nhật Các hàm xử lý sự kiện thường cập nhật state.
Component cha thiết lập props cho các component con.
Bảng 4.1: So sánh giữa State và Props
6 Khi nào sử dụng State và khi nào sử dụng Props?
useState()
The useState() hook in React is utilized to initialize and manage state within Functional Components, enabling the addition of state to these components, which was previously only possible in Class Components This hook returns an array containing two elements.
– State variable (biến trạng thái): Đây là biến mà bạn sử dụng để lưu trữ giá trị trạng thái của component.
The state updater function is essential for updating state values in a component When you invoke this function with a new value, it updates the state and triggers a re-render of the component, ensuring that the user interface reflects the latest changes.
Một số lưu ý khi sử dụng useState()
It is essential to initialize a value for useState() to ensure that the state is never undefined useState() can store various data types, including strings, numbers, booleans, arrays, and objects For example, you can initialize a state variable with const [count, setCount] = useState(0);.
• Giá trị của trạng thái sẽ quay về giá trị khởi tạo sau mỗi lần refresh trang.
• Component sẽ render lại mỗi khi giá trị của trạng thái bị thay đổi.
• useState() không ghi đè các trạng thái mà thay thế trạng thái cũ bằng giá trị của trạng thái mới.
• Không bao giờ thay đổi trạng thái trực tiếp bằng cách gán giá trị mới, ví dụ: count = count + 1 Hãy sử dụng setCountđể cập nhật lại trạng thái.
Hàm cập nhật trạng thái có khả năng nhận vào một giá trị mới hoặc một hàm để tính toán giá trị mới dựa trên trạng thái hiện tại Ví dụ, bạn có thể sử dụng setCount(count + 1) để tăng giá trị của biến đếm.
• Chỉ sử dụng useState cho những trạng thái cần thiết và không tạo ra quá nhiều trạng thái không cần thiết trong component của bạn.
The useState() hook in React should be utilized when managing and tracking the state of functional components Here are some situations where useState is recommended:
Quản lý trạng thái giao diện người dùng là rất quan trọng để lưu trữ và cập nhật thông tin như số lượng sản phẩm trong giỏ hàng, giá trị của các trường nhập liệu, và trạng thái hiển thị hoặc ẩn của các phần tử.
Khi cần lưu trữ dữ liệu tạm thời mà không sử dụng Redux hoặc Context API, useState là một giải pháp tiện lợi để quản lý trạng thái này.
Để xử lý trạng thái của form, useState thường được áp dụng để lưu trữ giá trị của các trường input, lựa chọn các mục trong danh sách, và kiểm tra tính hợp lệ của form trước khi gửi dữ liệu.
Sau khi component đã render, các trạng thái cần được cập nhật thông qua useState, cho phép bạn thay đổi trạng thái khi có sự kiện xảy ra hoặc khi gọi API Điều này giúp cập nhật giao diện người dùng một cách linh hoạt khi có sự thay đổi về trạng thái.
Quản lý hiệu ứng tương tác đơn giản như sự thay đổi của nút bấm hay sự xuất hiện/ẩn của các phần tử có thể được thực hiện hiệu quả bằng cách sử dụng useState Công cụ này giúp theo dõi và cập nhật trạng thái của các hiệu ứng một cách linh hoạt và dễ dàng.
Tóm lại, hook useState là công cụ quan trọng để quản lý trạng thái trong các components chức năng của React Nó không chỉ giúp tăng tính tương tác cho components mà còn cho phép cập nhật dễ dàng, từ đó tạo ra các ứng dụng React hiệu quả với mã nguồn dễ đọc và dễ bảo trì.
useEffect()
useEffect() là một hook quan trọng trong React, cho phép thực hiện các tác vụ phụ trong Functional Components Các tác vụ này bao gồm gọi API, thay đổi trạng thái, và quản lý sự kiện useEffect giúp bạn thực hiện những tác vụ này tại các thời điểm cụ thể trong vòng đời của component, đảm bảo hiệu suất và tổ chức mã nguồn tốt hơn.
Dependencies trong useEffect được sử dụng để kiểm soát cách hoạt động của useEffect() khi useEffect được gọi lại Có 3 trường hợp sử dụng useEffect:
Khi không cung cấp bất kỳ dependencies nào cho useEffect, nó sẽ được gọi và thực hiện các tính toán bên trong mỗi khi thành phần được render.
• Dependencies là mảng rỗng: Khi bạn truyền một mảng trống vào, nó sẽ chỉ thực thi một lần duy nhất sau khi thành phần đó render lần đầu tiên.
Dependencies in React, such as props or state, are defined within an array [props1, props2, stateA] The useEffect hook monitors these values and, during the next render, compares the new props and state to their previous values If there are differences, the useEffect callback is triggered; otherwise, no action is taken.
When using useEffect in React for side effect tasks, it’s essential to perform cleanup actions after a component unmounts or when dependencies change This practice helps prevent memory leaks and errors when transitioning to other components.
Khi nào sử dụng useEffect()
Hàm useEffect() trong React thường được sử dụng để thực hiện các tác vụ không liên quan đến việc rendering của component, bao gồm gọi API, thao tác với DOM, thiết lập lệnh lắng nghe sự kiện và các tác vụ khác.
Quản lý lý thuyết hợp đồng trong React với useEffect() cho phép thực hiện các tác vụ tại các thời điểm quan trọng trong vòng đời của component, như khi component được tạo ra (componentDidMount) hoặc khi nó được cập nhật (componentDidUpdate) Điều này giúp quản lý các tác vụ "side effects" một cách hiệu quả và dễ dàng.
You can utilize the useEffect() hook to monitor changes in props or state, allowing you to perform reactive tasks based on those changes.
Để thực hiện các tác vụ liên quan đến việc lấy dữ liệu từ API hoặc thực hiện các tính toán phức tạp, bạn có thể sử dụng useEffect() trong React.
The useEffect() hook is ideal for listening to native browser events, such as resize and scroll events, allowing developers to effectively monitor and handle these occurrences.
• Làm sạch tác vụ khi component unmount (componentWillUnmount): Bạn có thể sử dụng useEffect() với một hàm trả về để làm sạch các tác vụ khi component bị unmount.
useContext() là gì?
Hook useContext trong React cho phép người dùng truy cập các giá trị từ Context API, giúp truyền dữ liệu từ thành phần cha đến các thành phần con mà không cần phải truyền props qua nhiều lớp con trung gian.
• useContext giúp bạn lấy giá trị từ Context API một cách dễ dàng.
Cách sử dụng useContext
1 B1: Định nghĩa một Context:Trước tiên, bạn cần định nghĩa một Con- text bằng cách sử dụng createContext.
Để tạo một Provider trong ứng dụng React, bạn cần thiết lập một thành phần Provider nhằm cung cấp giá trị cho Context Thao tác này thường được thực hiện tại thành phần cha cao nhất trong cấu trúc ứng dụng của bạn.
3 B3: Sử dụng useContext trong thành phần con:Bây giờ bạn có thể sử dụng useContext trong các thành phần con để truy cập giá trị từ Context.
Để cung cấp giá trị từ Context cho các thành phần con, hãy chắc chắn rằng các thành phần con được bao quanh bởi thành phần Provider.
Khi nào thì nên sử dụng useContext
Khi cần chia sẻ dữ liệu hoặc trạng thái từ thành phần cha đến các thành phần con ở nhiều cấp độ trong ứng dụng mà không muốn truyền props qua từng lớp trung gian, useContext là giải pháp hiệu quả Việc này không chỉ giúp mã nguồn trở nên dễ đọc hơn mà còn giảm thiểu độ phức tạp trong quá trình truyền props.
Để theo dõi trạng thái toàn cục của ứng dụng như trạng thái đăng nhập, ngôn ngữ hiện tại hay chế độ tối/sáng, bạn có thể sử dụng useContext để quản lý và chia sẻ trạng thái này một cách hiệu quả với các thành phần con.
Khi cần truyền dữ liệu giữa các thành phần không có mối quan hệ cha con trực tiếp, bạn có thể sử dụng Context để thực hiện điều này mà không cần phải truyền props qua từng thành phần trung gian.
useRef() là gì?
useRef là một hook trong React, cho phép tạo tham chiếu đến phần tử DOM hoặc lưu trữ các giá trị cần duy trì giữa các chu kỳ render của component mà không làm tăng số lần render khi giá trị thay đổi.
Khi nào thì nên sử dụng useRef
useRef là một hook trong React, thường được sử dụng để truy cập và thao tác với các phần tử DOM Khi cần thực hiện các thay đổi trực tiếp trên phần tử DOM, chẳng hạn như thiết lập trạng thái focus, thay đổi kích thước hoặc vị trí của phần tử, useRef sẽ là lựa chọn tối ưu.
Để lưu trữ giá trị state trước đó mà không làm render lại component, hook useRef là một công cụ hữu ích useRef cho phép bạn duy trì giá trị mà không thay đổi trạng thái state, giúp giá trị này tồn tại qua các chu kỳ render.