Top những câu hỏi phỏng vấn React thường gặp - Phần 3
Tiếp tục chuỗi bài viết về Top những câu hỏi phỏng vấn React thường gặp, đây
sẽ là phần 3.
Bây giờ hãy bắt đầu nào!
1. Lợi ích khi sử dụng React là gì?
Dưới đây là danh sách các ưu điểm chính của React,
- Tăng hiệu suất của ứng dụng với Virtual DOM.
- JSX làm cho code dễ đọc và dễ viết.
- Nó hiển thị cả ở phía client và server (SSR).
Dễ dàng tích hợp với các framework (Angular, Backbone) vì nó chỉ là một
view library.
Dễ dàng viết các unit and integration tests với các công cụ như Jest.
2. Các hạn chế khi sử dụng React là gì?
Ngoài những ưu điểm, React cũng có một số hạn chế,
- React chỉ là một view library, không phải là một full framework.
Có một đường cong học tập cho những người mới bắt đầu phát triển web.
Việc tích hợp React vào MVC framework truyền thống yêu cầu một số cấu
hình bổ sung.
- Độ phức tạp của code tăng lên khi tạo khuôn mẫu nội tuyến và JSX.
Quá nhiều component nhỏ hơn dẫn đến over engineering or boilerplate.
3. Việc sử dụng react-dom package là gì?
react-dom package cung cấp các phương thức dành riêng cho DOM có thể
được sử dụng ở cấp cao nhất trong ứng dụng của bạn. Hầu hết các component
không bắt buộc phải sử dụng module này. Một số phương thức của package này là:
- render()
- hydrate()
- unmountComponentAtNode()
- findDOMNode()
- createPortal()
4. Mục đích của phương thức render của react-dom?
Phương thức này được sử dụng để render một element React vào DOM trong
container được cung cấp và trả về một tham chiếu đến component đó. Nếu element
React trước đó đã được render vào container, thì element này sẽ thực hiện cập
nhật trên element đó và chỉ thay đổi DOM khi cần thiết để phản ánh những thay
đổi mới nhất.
ReactDOM.render(element, container, [callback])
Nếu callback tùy chọn được cung cấp, nó sẽ được thực thi sau khi component
được hiển thị hoặc cập nhật.
5. Cách sử dụng styles trong React?
Ngoài việc chúng ta import file style vào component hay sử dụng các thư viện
CSS để style thì ta có thể sử dụng thuộc tính style là một Javascript object
với các thuộc tính được viết dưới dạng camelCase thay vì chuỗi CSS thông
thường. Điều này phù hợp với thuộc tính Javascript kiểu DOM, hiệu quả hơn và
ngăn người các lỗ hổng bảo mật XSS.
const divStyle = {
color: "blue",
backgroundImage: "url(" + imgUrl + ")",
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
6. Các sự kiện khác nhau như thế nào trong React?
Xử lý các sự kiện trong các React element có một số khác biệt về cú pháp:
Trình xử lý sự kiện React được đặt tên bằng cách sử dụng camelCase, thay
vì chữ thường.
Với JSX, bạn chuyển một hàm handler xử lý sự kiện, thay vì một chuỗi.
7. Làm cách nào để bật chế độ production trong React?
Bạn nên sử dụng phương thức DefinePlugin của Webpack để đặt
NODE_ENV thành production, theo đó nó loại bỏ những thứ như xác
thực propType và các cảnh báo bổ sung. Ngoài ra, nếu bạn minify the code,
chẳng hạn như việc loại bỏ dead-code của Uglify để loại bỏ code và nhận xét
chỉ development, nó sẽ giảm đáng kể kích thước bundle của bạn.
8. CRA là gì và lợi ích của nó?
create-react-app CLI tools cho phép bạn tạo và chạy React app nhanh
chóng mà không cần các bước cấu hình.
Hãy thử tạo Todo App sử dụng CRA:
# Installation
$ npm install -g create-react-app
# Create new project
$ create-react-app todo-app
$ cd todo-app
# Build, test and run
$ npm run build
$ npm run test
$ npm start
Nó bao gồm mọi thứ chúng ta cần để xây dựng một ứng dụng React:
- Hỗ trợ cú pháp React, JSX, ES6 và Flow.
Các tính năng bổ sung của ngôn ngữ ngoài ES6 như object spread operator.
Autoprefixed CSS, vì vậy bạn không cần -webkit- hoặc các other prefixes.
Trình chạy unit test tương tác nhanh với hỗ trợ tích hợp cho báo cáo mức
độ phù hợp.
- Một máy chủ phát triển trực tiếp cảnh báo về các lỗi phổ biến.
Tập lệnh xây dựng để bundle JS, CSS và hình ảnh để sản xuất, với hàm băm
và bản đồ nguồn.
9. Tại sao chúng ta cần truyền một function cho hàm setState()?
Lý do đằng sau điều này là setState() là một hoạt động không đồng bộ. React
thay đổi state theo lô vì lý do hiệu suất, vì vậy state có thể không thay đổi
ngay sau khi setState() được gọi. Điều đó có nghĩa là bạn không nên dựa vào
state hiện tại khi gọi setState() vì bạn không thể chắc chắn state đó sẽ là
gì. Giải pháp là chuyển một hàm tới setState(), với state trước đó làm đối số.
Bằng cách này, bạn có thể tránh được các vấn đề với việc người dùng nhận được
giá trị state cũ khi truy cập do tính chất không đồng bộ của setState().
Giả sử giá trị đếm ban đầu bằng không. Sau ba thao tác tăng liên tiếp, giá trị
sẽ chỉ được tăng thêm một.
// assuming this.state.count === 0
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// this.state.count === 1, not 3
Nếu chúng ta chuyển một hàm tới setState(), thì số đếm sẽ tăng lên một cách
chính xác.
this.setState((prevState, props) => ({
count: prevState.count + props.increment,
}));
// this.state.count === 3 as expected
10. Tại sao function được ưu tiên hơn object cho setState()?
React có thể gộp nhiều lệnh gọi setState() thành một bản cập nhật duy nhất
để tăng hiệu suất. Vì this.props và this.state có thể được cập nhật không
đồng bộ, bạn không nên dựa vào các giá trị của chúng để tính toán trạng thái
tiếp theo.
Ví dụ truy cập này sẽ không cập nhật như mong đợi:
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
Cách tiếp cận ưa thích là gọi setState() bằng hàm chứ không phải đối tượng.
Hàm đó sẽ nhận trạng thái trước đó làm đối số đầu tiên và các props tại thời
điểm cập nhật được áp dụng làm đối số thứ hai.
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment,
}));
11. Strict mode trong React là gì?
React.StrictMode là một component hữu ích để làm nổi bật các vấn đề
tiềm ẩn trong một ứng dụng. Giống như <Fragment>,
<StrictMode> không hiển thị thêm bất kỳ phần tử DOM nào. Nó kích
hoạt kiểm tra bổ sung và cảnh báo cho hậu duệ của nó. Những kiểm tra này chỉ
áp dụng cho chế độ phát triển.
import React from "react";
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Header />
</div>
);
}
Trong ví dụ trên, kiểm tra strict mode chỉ áp dụng cho các component <ComponentOne> và <ComponentTwo>.
React.StrictMode hiện đang giúp bạn:
- Xác định các component có vòng đời không an toàn.
- Cảnh báo về việc sử dụng API tham chiếu chuỗi kế thừa.
- Cảnh báo về việc sử dụng findDOMNode không dùng nữa
- Phát hiện tác dụng phụ không mong muốn.
- Phát hiện API ngữ cảnh kế thừa.
12. Các Pointer Event đưuọc hỗ trợ trong React là?
Pointer event cung cấp một cách thống nhất để xử lý tất cả các sự kiện đầu vào. Ngày xưa, chúng ta có chuột và trình xử lý sự kiện tương ứng để xử lý chúng nhưng ngày nay chúng ta có nhiều thiết bị không liên quan đến việc có chuột, chẳng hạn như điện thoại có bề mặt cảm ứng hoặc bút. Chúng ta cần nhớ rằng những sự kiện này sẽ chỉ hoạt động trong các trình duyệt hỗ trợ đặc tả pointer event.
Các loại sự kiện sau hiện có sẵn trong React DOM:
- onPointerDown
- onPointerMove
- onPointerUp
- onPointerCancel
- onGotPointerCapture
- onLostPointerCapture
- onPointerEnter
- onPointerLeave
- onPointerOver
- onPointerOut
Kết luận
Vậy là mình đã tổng hợp thêm một số câu hỏi thường gặp khi phỏng vấn React ở phần 3 này. Mình sẽ tiếp tục thu thập nhiều hơn các câu hỏi và chia sẽ đến với mọi người. Các bạn hãy theo dõi Trang để không bỏ lỡ các bài viết tiếp theo nhé.
Các bài viết liên quan:
- Top những câu hỏi phỏng vấn React thường gặp - Phần 1
- Top những câu hỏi phỏng vấn React thường gặp - Phần 2
- Top những câu hỏi phỏng vấn React thường gặp - Phần 4
- Top những câu hỏi phỏng vấn React thường gặp - Phần 5
- Top những câu hỏi phỏng vấn React thường gặp - Phần 6
- Top những câu hỏi phỏng vấn React thường gặp - Phần 7
