Câu hỏi phỏng vấn javascript oops
|
Được làm bằng ♥ ở Redmond, Boston, SF & Dublin Show
2. Bây giờ, sự khác biệt giữa biểu diễn DOM trước đó và DOM mới được tính toán 3. Sau khi tính toán hoàn tất, DOM thực chỉ được cập nhật với những thứ đã thay đổi 10) React khác với Angular như thế nào?React khác với Angular ở những điểm sau AngularReactTác giảGoogleCộng đồng FacebookNhà phát triểnMisko HeveryJordan WalkeBản phát hành đầu tiênTháng 10 năm 2010Tháng 3 năm 2013Ngôn ngữJavaScript, HTMLJSXTypeMã nguồn mở MVC FrameworkKiểm tra đơn vị mã nguồn mởRenderingClient-SideServer-SideData-BindingBi-directionUni-directionDOM thông thường DOM ảoKiểm tra đơn vị và tích hợpKiểm tra đơn vịKiến trúc ứng dụngMVCFluxHiệu suấtChậmNhanh chóng, do DOM ảoĐể biết thêm thông tin, bấm vào đây 11) Cú pháp ES6 của React khác cú pháp ES5 như thế nào?Cú pháp ES6 của React đã thay đổi so với cú pháp ES5 ở các khía cạnh sau yêu cầu so với. Nhập khẩu xuất khẩu so với. xuất khẩu thành phần và chức năng đạo cụ tình trạng 12) Sự khác biệt giữa ReactJS và React Native là gì?Sự khác biệt chính giữa ReactJS và React Native được đưa ra bên dưới SNReactJSReact Native1. Phát hành lần đầu vào năm 2013. Phát hành lần đầu vào năm 2015. 2. Nó được sử dụng để phát triển các ứng dụng web. Nó được sử dụng để phát triển các ứng dụng di động. 3. Nó có thể được thực hiện trên tất cả các nền tảng. Nó không phải là nền tảng độc lập. Phải mất nhiều nỗ lực hơn để được thực thi trên tất cả các nền tảng. 4. Nó sử dụng thư viện JavaScript và CSS cho hoạt ảnh. Nó đi kèm với các thư viện hoạt hình tích hợp. 5. Nó sử dụng React-router để điều hướng các trang web. Nó có thư viện Navigator tích hợp để điều hướng các ứng dụng di động. 6. Nó sử dụng các thẻ HTML. Nó không sử dụng thẻ HTML. 7. Trong trường hợp này, Virtual DOM hiển thị mã trình duyệt. Trong đó, Native sử dụng API của mình để hiển thị mã cho các ứng dụng dành cho thiết bị di độngĐể biết thêm thông tin, bấm vào đây 13) Sự khác biệt giữa Real DOM và Virtual DOM là gì?Bảng sau chỉ rõ những khác biệt chính giữa Real DOM và Virtual DOM DOM thực tạo một DOM mới nếu phần tử cập nhật. DOM thực DOM ảo DOM thực cập nhật chậm hơn. DOM ảo cập nhật nhanh hơn. DOM thực có thể cập nhật trực tiếp HTML. DOM ảo không thể cập nhật trực tiếp HTML. DOM ảo cập nhật JSX nếu phần tử cập nhật. Trong DOM thực, thao tác DOM rất tốn kém. Trong DOM ảo, thao tác DOM rất dễ dàng. Có rất nhiều lãng phí bộ nhớ trong DOM thực. Không lãng phí bộ nhớ trong DOM ảoCâu hỏi phỏng vấn thành phần phản ứng14) Bạn hiểu gì từ "Trong React, mọi thứ đều là một thành phần. "Trong React, các thành phần là các khối xây dựng của ứng dụng React. Các thành phần này chia toàn bộ giao diện người dùng của ứng dụng React thành các đoạn mã nhỏ, độc lập và có thể tái sử dụng. React kết xuất độc lập từng thành phần này mà không ảnh hưởng đến phần còn lại của giao diện người dùng ứng dụng. Do đó, có thể nói rằng, trong React, mọi thứ đều là một thành phần 15) Giải thích mục đích của render() trong ReactMỗi thành phần React bắt buộc phải có hàm render(). Hàm kết xuất được sử dụng để trả về HTML mà bạn muốn hiển thị trong một thành phần. Nếu bạn cần hiển thị nhiều phần tử HTML, bạn cần nhóm lại với nhau bên trong một thẻ kèm theo (thẻ cha), chẳng hạn như ,,vân vân. Hàm này trả về cùng một kết quả mỗi khi nó được gọi Ví dụ. Nếu bạn cần hiển thị một tiêu đề, bạn có thể làm điều này như dưới đây Điểm cần lưu ý
16) Làm thế nào bạn có thể nhúng hai hoặc nhiều thành phần vào một?Bạn có thể nhúng hai hoặc nhiều thành phần vào theo cách sau 17) Props là gì?Props là viết tắt của "Properties" trong React. Chúng là đầu vào chỉ đọc cho các thành phần. Props là một đối tượng lưu trữ giá trị của các thuộc tính của thẻ và hoạt động tương tự như các thuộc tính HTML. Nó cung cấp một cách để truyền dữ liệu từ cha mẹ sang các thành phần con trong toàn bộ ứng dụng Nó tương tự như các đối số của hàm và được truyền vào thành phần theo cách giống như các đối số được truyền trong một hàm Props là bất biến nên chúng ta không thể sửa đổi props từ bên trong component. Bên trong các thành phần, chúng ta có thể thêm các thuộc tính được gọi là đạo cụ. Các thuộc tính này có sẵn trong thành phần như thế này. đạo cụ và có thể được sử dụng để hiển thị dữ liệu động trong phương thức kết xuất của chúng tôi Để biết thêm thông tin, bấm vào đây 18) Trạng thái trong React là gì?Trạng thái là một cấu trúc có thể cập nhật chứa dữ liệu và thông tin về thành phần. Nó có thể được thay đổi trong suốt vòng đời của thành phần để đáp ứng với hành động của người dùng hoặc sự kiện hệ thống. Nó là trái tim của thành phần phản ứng xác định hành vi của thành phần và cách nó sẽ hiển thị. Nó phải được giữ càng đơn giản càng tốt Hãy tạo một thành phần "Người dùng" với "trạng thái thông báo. " Để biết thêm thông tin, bấm vào đây 19) Phân biệt giữa States và PropsSự khác biệt chính giữa Bang và Props được đưa ra dưới đây SNPropsState1. Props là chỉ đọc. Thay đổi trạng thái có thể không đồng bộ. 2. Đạo cụ là bất biến. Trạng thái có thể thay đổi. 3. Đạo cụ cho phép bạn truyền dữ liệu từ một thành phần này sang thành phần khác dưới dạng đối số. Trạng thái nắm giữ thông tin về các thành phần. 4. Props có thể được truy cập bởi thành phần con. Trạng thái không thể được truy cập bởi các thành phần con. 5. Props được sử dụng để giao tiếp giữa các thành phần. Các trạng thái có thể được sử dụng để hiển thị các thay đổi động với thành phần. 6. Thành phần không trạng thái có thể có Đạo cụ. Các thành phần phi trạng thái không thể có Trạng thái. 7. Đạo cụ làm cho các thành phần có thể tái sử dụng. Nhà nước không thể làm cho các thành phần có thể tái sử dụng. 8. Đạo cụ là bên ngoài và được kiểm soát bởi bất kỳ thứ gì hiển thị thành phần. Nhà nước là nội bộ và được kiểm soát bởi chính thành phần đóĐể biết thêm thông tin, bấm vào đây 20) Làm cách nào bạn có thể cập nhật Trạng thái của một thành phần?Chúng tôi có thể cập nhật Trạng thái của một thành phần bằng cách sử dụng này. phương thức setState(). Phương pháp này không phải lúc nào cũng thay thế Nhà nước ngay lập tức. Thay vào đó, nó chỉ thêm các thay đổi vào Trạng thái ban đầu. Đây là một phương pháp chính được sử dụng để cập nhật giao diện người dùng (UI) để đáp ứng với các trình xử lý sự kiện và phản hồi của máy chủ Ví dụ Để biết thêm thông tin, bấm vào đây 21) Phân biệt giữa các thành phần không trạng thái và trạng tháiSự khác biệt giữa các thành phần không trạng thái và trạng thái là Thành phần SNStatelessThành phần có trạng thái1. Các thành phần không trạng thái không nắm giữ hoặc quản lý trạng thái. Các thành phần trạng thái có thể giữ hoặc quản lý trạng thái. 2. Nó không chứa kiến thức về những thay đổi trạng thái trong quá khứ, hiện tại và có thể xảy ra trong tương lai. Nó có thể chứa kiến thức về những thay đổi trạng thái trong quá khứ, hiện tại và có thể xảy ra trong tương lai. 3. Nó còn được gọi là một thành phần chức năng. Nó còn được gọi là một thành phần lớp. 4. Nó đơn giản và dễ hiểu. Nó phức tạp so với thành phần không trạng thái. 5. Nó không hoạt động với bất kỳ phương thức vòng đời nào của React. Nó có thể hoạt động với tất cả các phương thức vòng đời của React. 6. Các thành phần không trạng thái không thể được sử dụng lại. Các thành phần trạng thái có thể được sử dụng lại22) Chức năng mũi tên trong React là gì?Chức năng Mũi tên là tính năng mới của tiêu chuẩn ES6. Nếu bạn cần sử dụng các hàm mũi tên, không cần thiết phải liên kết bất kỳ sự kiện nào với 'điều này. ' Ở đây, phạm vi của 'cái này' là toàn cầu và không giới hạn ở bất kỳ chức năng gọi nào. Vì vậy, nếu bạn đang sử dụng Hàm mũi tên, thì không cần phải liên kết 'cái này' bên trong hàm tạo. Nó còn được gọi là hàm 'mũi tên béo' (=>) 23) Sự kiện trong React là gì?Sự kiện là một hành động kích hoạt do hành động của người dùng hoặc sự kiện do hệ thống tạo ra như nhấp chuột, tải trang web, nhấn phím, thay đổi kích thước cửa sổ, v.v. Trong React, hệ thống xử lý sự kiện rất giống với xử lý sự kiện trong các phần tử DOM. Hệ thống xử lý sự kiện React được gọi là Sự kiện tổng hợp, là trình bao bọc nhiều trình duyệt của sự kiện gốc của trình duyệt Xử lý các sự kiện với React có một số khác biệt về cú pháp, đó là
Để biết thêm thông tin, bấm vào đây 24) Làm thế nào để bạn tạo một sự kiện trong React?Chúng ta có thể tạo một sự kiện như sau Ví dụ Để biết thêm thông tin, bấm vào đây 25) Các sự kiện tổng hợp trong React là gì?Sự kiện tổng hợp là một đối tượng hoạt động như một trình bao bọc nhiều trình duyệt xung quanh sự kiện gốc của trình duyệt. Nó kết hợp hành vi của sự kiện gốc của các trình duyệt khác nhau thành một API, bao gồm stopPropagation() và preventDefault() Trong ví dụ đã cho, e là một biến cố Tổng hợp 26) sự khác biệt giữa các thành phần được kiểm soát và không được kiểm soát là gì?Sự khác biệt giữa các thành phần được kiểm soát và không được kiểm soát là SNĐược kiểm soátKhông được kiểm soát1. Nó không duy trì trạng thái bên trong của nó. Nó duy trì trạng thái bên trong của nó. 2. Ở đây, dữ liệu được kiểm soát bởi thành phần cha. Ở đây, dữ liệu được kiểm soát bởi chính DOM. 3. Nó chấp nhận giá trị hiện tại của nó như một chỗ dựa. Nó sử dụng một ref cho các giá trị hiện tại của họ. 4. Nó cho phép kiểm soát xác nhận. Nó không cho phép kiểm soát xác nhận. 5. Nó có quyền kiểm soát tốt hơn đối với các thành phần và dữ liệu của biểu mẫu. Nó có quyền kiểm soát hạn chế đối với các phần tử biểu mẫu và dữ liệuĐể biết thêm thông tin, bấm vào đây 27) Giải thích các List trong ReactDanh sách được sử dụng để hiển thị dữ liệu theo định dạng được sắp xếp. Trong React, Danh sách có thể được tạo theo cách tương tự như chúng ta tạo trong JavaScript. Chúng ta có thể duyệt qua các phần tử của danh sách bằng hàm map() Ví dụ Để biết thêm thông tin, bấm vào đây 28) Tầm quan trọng của các phím trong React là gì?Khóa là mã định danh duy nhất. Trong React, nó được sử dụng để xác định mục nào đã thay đổi, cập nhật hoặc xóa khỏi Danh sách. Nó hữu ích khi chúng tôi tạo các thành phần động hoặc khi người dùng thay đổi danh sách. Nó cũng giúp xác định thành phần nào trong bộ sưu tập cần được kết xuất lại thay vì kết xuất lại toàn bộ bộ thành phần mỗi lần. Nó làm tăng hiệu suất ứng dụng Để biết thêm thông tin, bấm vào đây 29) Các biểu mẫu được tạo trong React như thế nào?Biểu mẫu cho phép người dùng tương tác với ứng dụng cũng như thu thập thông tin từ người dùng. Biểu mẫu có thể thực hiện nhiều tác vụ như xác thực người dùng, thêm người dùng, tìm kiếm, lọc, v.v. Một biểu mẫu có thể chứa các trường văn bản, nút, hộp kiểm, nút radio, v.v. React cung cấp một cách tiếp cận có trạng thái, phản ứng để xây dựng một biểu mẫu. Các biểu mẫu trong React tương tự như biểu mẫu HTML. Nhưng trong React, thuộc tính trạng thái của thành phần chỉ được cập nhật thông qua setState() và một hàm JavaScript xử lý việc gửi của chúng. Chức năng này có toàn quyền truy cập vào dữ liệu được người dùng nhập vào biểu mẫu Để biết thêm thông tin, bấm vào đây 30) Các giai đoạn khác nhau trong vòng đời của thành phần React là gì?Các giai đoạn khác nhau trong vòng đời của thành phần React là Giai đoạn đầu. Đây là giai đoạn ra đời của vòng đời React khi thành phần bắt đầu hành trình của nó trên đường đến DOM. Trong giai đoạn này, một thành phần chứa Đạo cụ mặc định và Trạng thái ban đầu. Các thuộc tính mặc định này được thực hiện trong hàm tạo của một thành phần giai đoạn lắp đặt. Trong giai đoạn này, phiên bản của một thành phần được tạo và thêm vào DOM Giai đoạn cập nhật. Đây là giai đoạn tiếp theo của vòng đời React. Trong giai đoạn này, chúng tôi nhận được Đạo cụ mới và thay đổi Trạng thái. Giai đoạn này chỉ có thể cập nhật và kết xuất lại khi xảy ra thay đổi trạng thái hoặc chỗ dựa. Mục đích chính của giai đoạn này là đảm bảo rằng thành phần đang hiển thị phiên bản mới nhất của chính nó. Giai đoạn này lặp đi lặp lại nhiều lần Giai đoạn tháo gỡ. Đây là giai đoạn cuối cùng của vòng đời React, trong đó phiên bản thành phần bị hủy và không được đếm (đã xóa) khỏi DOM Để biết thêm thông tin, bấm vào đây 31) Giải thích chi tiết các phương pháp vòng đời của các thành phần ReactCác phương pháp vòng đời React quan trọng là
Để biết thêm thông tin, bấm vào đây 32) Thành phần tinh khiết là gì?Các thành phần thuần túy được giới thiệu trong React 15. 3 phiên bản. phản ứng. Thành phần và Phản ứng. PureComponent khác nhau trong phương thức vòng đời của shouldComponentUpdate() React. Phương thức này quyết định kết xuất lại thành phần bằng cách trả về giá trị boolean (đúng hoặc sai). trong phản ứng. Thành phần, phương thức shouldComponentUpdate() trả về true theo mặc định. Nhưng trong phản ứng. PureComponent, nó so sánh các thay đổi về trạng thái hoặc props để kết xuất lại thành phần. Thành phần thuần túy nâng cao tính đơn giản của mã và hiệu suất của ứng dụng 33) Các thành phần bậc cao hơn (HOC) là gì?Trong React, Thành phần bậc cao hơn là một kỹ thuật nâng cao để sử dụng lại logic thành phần. Nó là một hàm lấy một thành phần và trả về một thành phần mới. Nói cách khác, nó là một hàm chấp nhận một hàm khác làm đối số. Theo trang web chính thức, đó không phải là tính năng (một phần) trong React API, mà là một mẫu xuất hiện từ bản chất cấu thành của React Để biết thêm thông tin, bấm vào đây 34) Bạn có thể làm gì với HOC?Bạn có thể thực hiện nhiều nhiệm vụ với HOC, một số nhiệm vụ được đưa ra bên dưới
35) Sự khác biệt giữa Phần tử và Thành phần là gì?Sự khác biệt chính giữa các yếu tố và thành phần là SNElementComponent1. Một phần tử là một đối tượng JavaScript đơn giản mô tả trạng thái thành phần và nút DOM cũng như các thuộc tính mong muốn của nó. Một thành phần là khối xây dựng cốt lõi của ứng dụng React. Đó là một lớp hoặc hàm chấp nhận đầu vào và trả về phần tử React. 2. Nó chỉ chứa thông tin về loại thành phần, thuộc tính của nó và bất kỳ phần tử con nào bên trong nó. Nó có thể chứa trạng thái và đạo cụ và có quyền truy cập vào các phương thức vòng đời của React. 3. nó là bất biến. nó có thể thay đổi. 4. Chúng tôi không thể áp dụng bất kỳ phương pháp nào trên các phần tử. Chúng ta có thể áp dụng các phương thức trên các thành phần. 5. Ví dụphần tử const = Phản ứng. tạo phần tử ( 'div', {nhận dạng. 'đăng nhập-btn'}, 'Đăng nhập' ) Ví dụ nút chức năng ({ onLogin }) { trả lại phản ứng. tạo phần tử ( 'div', {nhận dạng. 'đăng nhập-btn', onClick. mộtĐăng nhập}, 'Đăng nhập' ) } 36) Làm thế nào để viết bình luận trong React?Trong React, chúng ta có thể viết bình luận như chúng ta viết bình luận trong JavaScript. Nó có thể theo hai cách 1. Nhận xét một dòng. Chúng ta có thể viết bình luận dưới dạng /* Block Comments */ với dấu ngoặc nhọn 2. Nhận xét nhiều dòng. Nếu chúng tôi muốn bình luận thêm một dòng, chúng tôi có thể làm điều này như 37) Tại sao phải bắt đầu tên các thành phần bằng chữ in hoa?Trong React cần bắt đầu tên component bằng chữ in hoa. Nếu chúng ta bắt đầu tên thành phần bằng chữ thường, nó sẽ báo lỗi là thẻ không được nhận dạng. Đó là bởi vì, trong JSX, tên thẻ chữ thường được coi là thẻ HTML 38) Mảnh vỡ là gì?In được giới thiệu trong React 16. 2 phiên bản. Trong React, Fragment được sử dụng cho các component trả về nhiều phần tử. Nó cho phép bạn nhóm một danh sách gồm nhiều nút con mà không cần thêm nút phụ vào DOM Ví dụ Ngoài ra còn có một cú pháp tốc ký để khai báo các Đoạn, nhưng nó không được hỗ trợ trong nhiều công cụ Để biết thêm thông tin, bấm vào đây 39) Tại sao các mảnh vỡ tốt hơn div vùng chứa?
40) Làm cách nào để áp dụng xác thực trên props trong React?Xác thực đạo cụ là một công cụ giúp nhà phát triển tránh các lỗi và sự cố trong tương lai. Nó làm cho mã của bạn dễ đọc hơn. Các thành phần phản ứng đã sử dụng thuộc tính đặc biệt PropTypes giúp bạn bắt lỗi bằng cách xác thực các loại giá trị dữ liệu được truyền qua các đạo cụ, mặc dù không cần thiết phải xác định các thành phần với propTypes Chúng tôi có thể áp dụng xác thực trên các đạo cụ bằng Ứng dụng. propTypes trong thành phần React. Khi một số đạo cụ được chuyển với loại không hợp lệ, bạn sẽ nhận được cảnh báo trên bảng điều khiển JavaScript. Sau khi chỉ định các mẫu xác thực, bạn cần đặt Ứng dụng. mặc địnhProps Để biết thêm thông tin, bấm vào đây 41) Ứng dụng tạo-phản ứng là gì?Create React App là công cụ được Facebook giới thiệu để xây dựng ứng dụng React. Nó cung cấp cho bạn khả năng tạo các ứng dụng React một trang. Ứng dụng tạo phản ứng được cấu hình sẵn, giúp bạn tiết kiệm thời gian thiết lập và cấu hình như Webpack hoặc Babel. Bạn cần chạy một lệnh duy nhất để bắt đầu dự án React, được cung cấp bên dưới Lệnh này bao gồm mọi thứ chúng ta cần để xây dựng ứng dụng React. Một số trong số họ được đưa ra dưới đây
Để biết thêm thông tin, bấm vào đây 42) Làm thế nào bạn có thể tạo một thành phần trong React?Có hai cách khả thi để tạo một thành phần trong React Thành phần chức năng. Đây là cách đơn giản nhất để tạo một component trong React. Đây là các hàm JavaScript thuần túy chấp nhận đối tượng đạo cụ làm tham số đầu tiên và trả về các phần tử React Thành phần lớp. Phương thức thành phần lớp tạo điều kiện cho bạn sử dụng lớp ES6 để định nghĩa một thành phần. Thành phần chức năng trên có thể được viết là 43) Khi nào chúng ta thích sử dụng thành phần lớp hơn thành phần chức năng?Nếu một thành phần cần các phương thức trạng thái hoặc vòng đời, chúng ta nên sử dụng thành phần lớp; . Tuy nhiên, sau React 16. 8, với việc bổ sung Móc, bạn có thể sử dụng các phương thức trạng thái, vòng đời và các tính năng khác chỉ khả dụng trong thành phần lớp ngay trong thành phần chức năng của bạn 44) Trình duyệt web có thể đọc JSX trực tiếp không?Trình duyệt web không thể đọc JSX trực tiếp. Điều này là do các trình duyệt web được xây dựng để chỉ đọc các đối tượng JS thông thường và JSX không phải là một đối tượng JavaScript thông thường Nếu bạn muốn trình duyệt web đọc tệp JSX, bạn phải chuyển đổi tệp thành đối tượng JavaScript thông thường. Với mục đích này, Babel được sử dụng 45) Bạn hiểu thế nào về trạng thái trong React?Trong phản ứng, trạng thái của một thành phần là một đối tượng chứa một số thông tin có thể thay đổi trong suốt thời gian tồn tại của thành phần đó. Tốt nhất là cố gắng làm cho trạng thái của bạn đơn giản nhất có thể và giảm thiểu số lượng các thành phần trạng thái Hãy xem cách tạo thành phần người dùng với trạng thái thông báo State rất giống với props, nhưng nó là private và được kiểm soát hoàn toàn bởi component. Tôi. e. , Nó không thể truy cập được đối với bất kỳ thành phần nào khác cho đến khi thành phần chủ sở hữu quyết định chuyển nó 46) Những thay đổi chính xuất hiện trong cú pháp ES6 của React so với cú pháp ES5 là gì?/Cú pháp ES6 của React khác với ES5 như thế nào?Sau đây là cú pháp dễ thấy nhất mà chúng ta có thể thấy khi so sánh ES6 và ES5 yêu cầu so với nhập khẩuCú pháp trong ES5 Cú pháp trong ES6 xuất khẩu so với xuất khẩuCú pháp trong ES5 Cú pháp trong ES6 thành phần và chức năngCú pháp trong ES5 Cú pháp trong ES6 đạo cụCú pháp trong ES5 Cú pháp trong ES6 tình trạngCú pháp trong ES5 Cú pháp trong ES6 47) Bạn hiểu props trong React là gì?Trong React, props là đầu vào cho các thành phần. Chúng là các giá trị hoặc đối tượng đơn lẻ chứa một tập hợp các giá trị được chuyển đến các thành phần khi tạo bằng cách sử dụng quy ước đặt tên tương tự như các thuộc tính thẻ HTML. Chúng là dữ liệu được truyền từ thành phần cha mẹ sang thành phần con Mục đích chính của props trong React là cung cấp chức năng thành phần sau
Ví dụ: chúng ta hãy tạo một phần tử có thuộc tính reactProp Tên reactProp này trở thành một thuộc tính gắn liền với đối tượng props gốc của React, thuộc tính này đã tồn tại trên tất cả các thành phần thư viện React Câu hỏi phỏng vấn giới thiệu phản ứng48) Bạn hiểu thế nào là ref trong React?Refs là tốc ký được sử dụng cho các tham chiếu trong React. Nó là một thuộc tính giúp lưu trữ một tham chiếu đến các nút DOM cụ thể hoặc các phần tử React. Nó cung cấp một cách để truy cập các nút React DOM hoặc các phần tử React và cách tương tác với nó. Nó được sử dụng khi chúng ta muốn thay đổi giá trị của component con mà không cần sử dụng props Để biết thêm thông tin, bấm vào đây 49) Làm thế nào để tạo ref?Có thể tạo giới thiệu bằng cách sử dụng React. createRef() và gắn vào các phần tử React thông qua thuộc tính ref. Nó thường được gán cho một thuộc tính thể hiện khi một thành phần được tạo và sau đó có thể được tham chiếu trong toàn bộ thành phần 50) Chuyển tiếp giới thiệu là gì?Chuyển tiếp giới thiệu là một tính năng được sử dụng để chuyển một giới thiệu qua một thành phần tới một trong các thành phần con của nó. Nó có thể được thực hiện bằng cách sử dụng React. phương thức forwardRef(). Nó đặc biệt hữu ích với các thành phần bậc cao hơn và được sử dụng đặc biệt trong các thư viện thành phần có thể tái sử dụng Ví dụ Để biết thêm thông tin, bấm vào đây 51) Tham chiếu gọi lại hoặc findDOMNode() tùy chọn ưa thích là gì?Tùy chọn ưa thích là sử dụng giới thiệu gọi lại trên API findDOMNode(). Bởi vì các giới thiệu gọi lại giúp kiểm soát tốt hơn khi các giới thiệu được đặt và không được đặt trong khi findDOMNode() ngăn cản một số cải tiến nhất định trong React trong tương lai Cách tiếp cận được khuyến nghị là 52) Việc sử dụng Refs là gì?Ref trong React được sử dụng trong các trường hợp sau
Để biết thêm thông tin, bấm vào đây Câu hỏi phỏng vấn bộ định tuyến phản ứng53) Bộ định tuyến phản ứng là gì?React Router là một hệ thống thư viện định tuyến tiêu chuẩn được xây dựng dựa trên React. Nó được sử dụng để tạo Định tuyến trong ứng dụng React bằng Gói Bộ định tuyến React. Nó giúp bạn xác định nhiều tuyến đường trong ứng dụng. Nó cung cấp URL đồng bộ trên trình duyệt với dữ liệu sẽ được hiển thị trên trang web. Nó duy trì cấu trúc và hành vi tiêu chuẩn của ứng dụng và chủ yếu được sử dụng để phát triển các ứng dụng web một trang Để biết thêm thông tin, bấm vào đây 54) Tại sao chúng ta cần Router trong React?React Router đóng vai trò quan trọng để hiển thị nhiều view trong ứng dụng một trang. Nó được sử dụng để xác định nhiều tuyến đường trong ứng dụng. Khi người dùng nhập một URL cụ thể vào trình duyệt và nếu đường dẫn URL này khớp với bất kỳ 'tuyến đường' nào trong tệp bộ định tuyến, thì người dùng sẽ được chuyển hướng đến Tuyến đường cụ thể đó. Vì vậy, chúng ta cần thêm một thư viện Router vào ứng dụng React, cho phép tạo nhiều route với mỗi route dẫn đến một view duy nhất 55) Liệt kê những ưu điểm của React RouterNhững lợi thế quan trọng của React Router được đưa ra dưới đây
56) React Router khác với Định tuyến thông thường như thế nào?Sự khác biệt giữa Định tuyến phản ứng và Định tuyến thông thường là SNConventional RoutingReact Routing1. Trong Định tuyến thông thường, mỗi chế độ xem chứa một tệp mới. Trong React Routing, chỉ có một trang HTML duy nhất tham gia. 2. Yêu cầu HTTP được gửi đến máy chủ để nhận trang HTML tương ứng. Chỉ thuộc tính Lịch sử được thay đổi. 3. Trong trường hợp này, người dùng điều hướng qua các trang khác nhau cho mỗi chế độ xem. Trong trường hợp này, người dùng đang nghĩ rằng anh ta đang điều hướng qua các trang khác nhau, nhưng đó chỉ là ảo ảnh57) Tại sao bạn nhận được cảnh báo "Bộ định tuyến có thể chỉ có một phần tử con"?Đó là bởi vì bạn không phải bọc Tuyến đường của mình trong một khối hoặc khối chỉ hiển thị một tuyến đường Ví dụ nên là 58) Tại sao từ khóa switch được sử dụng trong React Router v4?Từ khóa 'switch' được sử dụng để chỉ hiển thị một Tuyến duy nhất được hiển thị trong số một số Tuyến được xác định. Thành phần chỉ được sử dụng để hiển thị các thành phần khi đường dẫn sẽ được khớp. Nếu không, nó sẽ trở về thành phần không tìm thấy Câu hỏi phỏng vấn về phong cách phản ứng59) Làm cách nào để sử dụng các kiểu trong React?Chúng ta có thể sử dụng thuộc tính style để tạo kiểu trong các ứng dụng React, bổ sung thêm các kiểu được tính toán động tại thời điểm kết xuất. Nó chấp nhận một đối tượng JavaScript trong thuộc tính camelCased thay vì chuỗi CSS. Thuộc tính kiểu nhất quán với việc truy cập các thuộc tính trên các nút DOM trong JavaScript Ví dụ 60) Có bao nhiêu cách chúng ta có thể tạo kiểu cho Thành phần React?Chúng ta có thể tạo kiểu cho Thành phần React chủ yếu theo bốn cách, được đưa ra bên dưới
Để biết thêm thông tin, bấm vào đây 61) Giải thích kiểu dáng Mô-đun CSS trong ReactMô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định. Nó chỉ khả dụng cho thành phần nhập nó và nếu không có sự cho phép của bạn, nó không thể được áp dụng cho bất kỳ Thành phần nào khác. Bạn có thể tạo tệp Mô-đun CSS bằng. mô-đun. phần mở rộng css Để biết thêm thông tin, bấm vào đây 62) Styled Component là gì?Styled-Components là một thư viện cho React. Nó là sự kế thừa của Mô-đun CSS. Nó sử dụng CSS nâng cao để tạo kiểu cho các hệ thống thành phần React trong ứng dụng của bạn, được viết bằng hỗn hợp JavaScript và CSS. Nó nằm trong phạm vi một thành phần duy nhất và không thể rò rỉ sang bất kỳ thành phần nào khác trong trang Các thành phần theo kiểu cung cấp
Để biết thêm thông tin, bấm vào đây 63) Các hook trong React là gì?Hooks là tính năng mới được giới thiệu trong React 16. 8 tạo điều kiện cho chúng tôi 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 Xem ví dụ sau về hook useState 64) Các quy tắc bạn nên tuân theo đối với hook trong React là gì?Chúng ta phải tuân theo hai quy tắc sau để sử dụng hook trong React
65) Biểu mẫu trong React là gì?Trong React, các biểu mẫu được sử dụng để cho phép người dùng tương tác với các ứng dụng web. Sau đây là danh sách các cách sử dụng biểu mẫu phổ biến nhất trong React
66) Ranh giới lỗi hoặc ranh giới lỗi là gì?Ranh giới lỗi là một khái niệm được giới thiệu trong phiên bản 16 của React. Ranh giới lỗi cung cấp một cách để tìm ra các lỗi xảy ra trong giai đoạn kết xuất. Bất kỳ thành phần nào sử dụng một trong các phương thức vòng đời sau đều được coi là ranh giới lỗi. Hãy xem những nơi mà ranh giới lỗi có thể phát hiện lỗi
Hãy xem một ví dụ để hiểu rõ hơn Không sử dụng ranh giới lỗi Trong đoạn mã trên, bạn có thể thấy rằng khi counterValue bằng 2, nó sẽ báo lỗi bên trong phương thức kết xuất. Chúng tôi biết rằng bất kỳ lỗi nào bên trong phương thức kết xuất đều dẫn đến việc ngắt kết nối thành phần, vì vậy, để hiển thị lỗi xảy ra bên trong phương thức kết xuất, chúng tôi sử dụng ranh giới lỗi. Khi chúng tôi không sử dụng ranh giới lỗi, chúng tôi thấy một trang trống thay vì thấy lỗi Với ranh giới lỗi Chúng tôi đã chỉ định trước đó rằng ranh giới lỗi là một thành phần sử dụng một hoặc cả hai phương pháp sau
Xem đoạn mã sau nơi chúng tôi tạo ranh giới lỗi để xử lý lỗi trong giai đoạn kết xuất Bạn có thể thấy trong đoạn mã trên, hàm getDerivedStateFromError hiển thị giao diện UI dự phòng khi phương thức kết xuất có lỗi componentDidCatch ghi thông tin lỗi vào dịch vụ theo dõi lỗi Bây giờ với ranh giới lỗi, chúng ta có thể kết xuất CounterComponent theo cách sau 67) Những trường hợp nào ranh giới không bắt lỗi?Sau đây là một số trường hợp trong đó ranh giới lỗi không bắt lỗi
Phản ứng câu hỏi phỏng vấn Redux68) Các vấn đề chính với MVC framework là gì?Các vấn đề chính với khung MVC là
69) Giải thích khái niệm FluxFlux là một kiến trúc ứng dụng mà Facebook sử dụng nội bộ để xây dựng ứng dụng web phía máy khách với React. Nó không phải là một thư viện cũng không phải là một khuôn khổ. Nó là một loại kiến trúc bổ sung cho React dưới dạng chế độ xem và tuân theo khái niệm về mô hình Luồng dữ liệu đơn hướng. Nó rất hữu ích khi dự án có dữ liệu động và chúng ta cần cập nhật dữ liệu một cách hiệu quả Để biết thêm thông tin, bấm vào đây 70) Redux là gì?Redux là một thư viện JavaScript nguồn mở được sử dụng để quản lý trạng thái ứng dụng. React sử dụng Redux để xây dựng giao diện người dùng. Ứng dụng Redux dễ kiểm tra và có thể chạy trong các môi trường khác nhau thể hiện hành vi nhất quán. Nó được giới thiệu lần đầu tiên bởi Dan Abramov và Andrew Clark vào năm 2015 React Redux là ràng buộc React chính thức cho Redux. Nó cho phép các thành phần React đọc dữ liệu từ Cửa hàng Redux và gửi Hành động đến Cửa hàng để cập nhật dữ liệu. Redux giúp các ứng dụng mở rộng quy mô bằng cách cung cấp một cách hợp lý để quản lý trạng thái thông qua mô hình luồng dữ liệu một chiều. React Redux đơn giản về mặt khái niệm. Nó đăng ký vào cửa hàng Redux, kiểm tra xem dữ liệu mà thành phần của bạn muốn đã thay đổi chưa và hiển thị lại thành phần của bạn Để biết thêm thông tin, bấm vào đây 71) Ba nguyên tắc mà Redux tuân theo là gì?Ba nguyên tắc mà redux tuân theo là
72) Liệt kê các thành phần của ReduxCác thành phần của Redux được đưa ra dưới đây
Để biết thêm thông tin, bấm vào đây 73) Giải thích vai trò của ReducerBộ giảm tốc đọc tải trọng từ các hành động và sau đó cập nhật Cửa hàng thông qua Trạng thái tương ứng. Nó là một hàm thuần túy trả về một trạng thái mới từ Trạng thái ban đầu. Nó trả về Trạng thái trước đó như hiện tại nếu không cần thực hiện công việc nào 74) Ý nghĩa của Store trong Redux là gì?Cửa hàng là một đối tượng chứa Trạng thái của ứng dụng và cung cấp các phương thức để truy cập Trạng thái, gửi Hành động và đăng ký người nghe thông qua đăng ký (người nghe). Toàn bộ cây Trạng thái của ứng dụng được lưu trong một Cửa hàng duy nhất giúp Redux trở nên đơn giản và dễ đoán. Chúng tôi có thể chuyển phần mềm trung gian đến Cửa hàng để xử lý việc xử lý dữ liệu cũng như ghi nhật ký các hành động khác nhau làm thay đổi Trạng thái của Cửa hàng. Tất cả các Hành động trả về trạng thái mới thông qua bộ giảm tốc 75) Redux khác với Flux như thế nào?Redux khác với Flux theo cách sau SNReduxFlux1. Redux là một thư viện JavaScript nguồn mở được sử dụng để quản lý Trạng thái ứng dụng. Flux không phải là thư viện hay khung. Nó là một loại kiến trúc bổ sung cho React dưới dạng chế độ xem và tuân theo khái niệm về mô hình Luồng dữ liệu đơn hướng. 2. Trạng thái của cửa hàng là bất biến. Trạng thái của cửa hàng có thể thay đổi. 3. Trong này, lưu trữ và thay đổi logic là riêng biệt. Trong này, Cửa hàng chứa Trạng thái và logic thay đổi. 4. Nó chỉ có một cửa hàng duy nhất. Nó có thể có nhiều Cửa hàng. 5. Redux không có khái niệm Dispatcher. Nó có một Bộ điều phối duy nhất và tất cả các hành động đều thông qua Bộ điều phối đó76) Ưu điểm của Redux là gì?Ưu điểm chính của React Redux là
77) Làm cách nào để truy cập cửa hàng Redux bên ngoài một thành phần?Bạn cần xuất Cửa hàng từ mô-đun nơi nó được tạo bằng phương thức createStore(). Ngoài ra, bạn cần đảm bảo rằng nó sẽ không gây ô nhiễm không gian cửa sổ chung Một số React MCQ thường gặp nhất1) Babel trong React là gì?
Trả lời. D là phương án đúng. Babel vừa là trình biên dịch vừa là trình biên dịch. Nó được sử dụng để bao gồm khả năng biên dịch JSX thành JavaScript thông thường. Nó được đưa vào chế độ phát triển và cũng có thể làm nhiều thứ mạnh mẽ khác 2) Bạn hiểu gì về quy trình Hòa giải trong React?
Trả lời. A là phương án đúng. React sử dụng thuật toán "diffing" giúp các bản cập nhật thành phần có thể dự đoán được và nhanh hơn. Trước tiên, React tính toán sự khác biệt giữa DOM thực và bản sao DOM khi tìm thấy bản cập nhật của các thành phần. Sau khi tính toán xong, bản cập nhật mới sẽ được phản ánh trên DOM thực 3) Cái nào sau đây được sử dụng để truyền dữ liệu cho một thành phần từ các ứng dụng React bên ngoài?
Trả lời. B là phương án đúng. Prop "Key" là một cách để React xác định một mục mới được thêm vào danh sách và so sánh nó trong thuật toán "diffing" |
