Fragment react là gì
|
Để có thể tham gia các buổi phỏng vấn một cách tốt nhất, bạn cần có các kiến thức cơ bản về ReactJS. Các kiến thức cơ bản sẽ là nền tảng quan trọng cho bạn trong việc tiếp thu các kiến thức nâng cao. Hãy cùng Mellori tìm hiểu các câu hỏi thường được sử dụng trong các buổi phỏng vấn nhằm kiểm tra kiến thức React nhé! Show
Mục lục
React là gì? Tại sao sử dụng nó?React là một thư viện JavaScript, không phải là một framework. React giúp cho người dùng dễ dàng tạo giao diện người dùng bằng các công cụ như JSX. Nó cung cấp các components để dễ dàng chia sẻ các phần của giao diện người dùng (UI), điều mà bản thân HTML không thể làm được. JSX là gì?JSX viết tắt của JavaScript XML là một cách xây dựng giao diện người dùng React, cho phép áp dụng chức năng và sự linh hoạt của JavaScript cộng với việc sử dụng cú pháp đơn giản của HTML. Ví dụ: nếu bạn viết một “div” trong JSX thì nó sẽ tương đương với việc gọi “React.createElement()”. Qua đó bạn có thể rút gọn cú pháp khi sử dụng JSX. Làm thế nào để bạn truyền data cho các React components?Có hai cách chính để truyền data đến các React components:
Sự khác nhau giữa state và props là gì?States là giá trị có thể đọc và cập nhật trong các React components. Props là giá trị được truyền đến các React components dưới dạng read only. Bạn có thể hiểu đơn giản rằng props là những tham số của một hàm mà tồn tại bên ngoài component. Trong khi state là giá trị thay đổi theo thời gian, được khai báo và chỉ tồn tại bên trong component. React Fragments dùng để làm gì?React Fragments là common pattern – một tính năng đặc biệt của React giúp bạn viết các nhóm elements con hoặc component mà không cần tạo một node thật sự trong DOM. Cú pháp của Fragments như sau: <> hoặc tags như React.Fragment Nói một cách đơn giản hơn, đôi khi bạn cần phải bỏ nhiều React elements dưới một single parent, nhưng không muốn sử dụng một HTML element như div. Tại sao cần keys cho React lists?Keys là một giá trị duy nhất mà bạn có thể truyền nó cho key prop khi dùng .map() function để xử lý các element hoặc component trong list. Bạn cần dùng keys cho React lists bởi vì keys giúp React nhận biết và phân biệt được các component. Nếu không thì khi bạn thay đổi các items trong list bằng cách thêm mới hoặc chỉnh sửa chúng, thì React sẽ không biết thứ tự để sắp xếp chúng. Đó là bởi vì React sẽ xử lý tất cả các việc cập nhật DOM cho chúng ta nhưng React cần dùng đến keys để cập nhật chúng 1 cách chính xác. Ref là gì và được sử dụng như thế nào?Ref là một tham chiếu của DOM element trong React. Ref được tạo với sự trợ giúp của Useref Hook và có thể được đặt ngay lập tức trong một biến. Biến này sau đó được chuyển đến một React element (không phải là một component) để có được tham chiếu đến DOM element bên dưới (nghĩa là div, span, v.v.). Bản thân element và các thuộc tính của nó có thể được sử dụng bằng cách gọi .current của ref đó. Ref thường được biết đến như là “Escape hatch” để có thể làm việc với DOM element trực tiếp. Chúng cho phép bạn thực hiện một vài hành động nhất định mà không thể thực hiện thông qua React nếu không có Ref như là clear hoặc focus một input. useEffect được sử dụng để làm gì?useEffect hook được sử dụng để thực hiện các side effect trong các React components. Side effect là các phép toán được thực hiện với “thế giới bên ngoài” hoặc là một số thứ nằm bên ngoài context của React app. Một vài ví dụ của side effect có thể kể đến là thực hiện một GET hoặc POST request đến external API hoặc làm việc với một browser API như là window.navigator hoặc là document.getElementById(). Bạn không thể thực hiện các câu lệnh này trực tiếp trong body của React component. useEffect là một function giúp bạn có thể thực hiện các side effects, và bạn có thể sẽ cần khai báo một mảng dependencies chứa các giá trị bên ngoài mà function đó cần để hoạt động. Nếu có bất kỳ giá trị nào trong mảng dependencies thay đổi thì function effect sẽ được chạy lại. Khi nào thì nên sử dụng React context vs Redux?React Context là một biện pháp để cung cấp và sử dụng data xuyên suốt app mà không cần sử dụng props. React Context giúp bạn ngăn ngừa được vấn đề “props drilling” – là khi mà bạn truyền data bằng props qua các components không cần sử dụng đến chúng. Thay vào đó, với Context thì bạn có thể sử dụng data ở chính xác component mà nó cần. Trong khi bạn chỉ dùng Context để đọc, viết giá trị trên toàn app, thì Redux và các thư viện quản lý state khác cho phép bạn đồng thời đọc và cập nhật state. useCallback và useMemo dùng để làm gì?useCallback và useMemo được sử dụng để cải thiện component performance.
Trên đây là 10 câu hỏi bạn cần ghi nhớ để trả lời cho các buổi phỏng vấn. Bạn đã trả lời được mấy câu hỏi trên đây? Hãy cùng chia sẻ cho Mellori biết nhé! Mellori hiện đang tuyển dụng Giảng Viên giảng dạy online các lớp học về kỹ năng số với mức offer hấp dẫn. Để hợp tác giảng dạy, vui lòng liên hệ hotline: 090.226.1879, hoặc email: [email protected] (Ms.Nhung) |
