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 4


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 4. 

Bây giờ hãy bắt đầu nào!

1. Tại sao tên component nên bắt đầu bằng chữ in hoa?

Nếu bạn đang render component của mình bằng JSX, tên của component đó phải bắt đầu bằng chữ in hoa nếu không React sẽ đưa ra lỗi dưới dạng thẻ không được nhận dạng. Quy ước này là do chỉ các phần tử HTML và thẻ SVG mới có thể bắt đầu bằng một chữ cái viết thường.

Bạn có thể định nghĩa class component có tên bắt đầu bằng chữ thường, nhưng khi nó được import, nó phải có chữ in hoa. Ở đây chữ thường vẫn hoạt động:

class myComponent extends Component {
  render() {
    return <div />;
  }
}

export default myComponent;

Trong khi khi được import vào một tệp khác, nó phải bắt đầu bằng chữ in hoa:

import MyComponent from "./myComponent";

2. Bạn có thể buộc một component re-render lại mà không cần gọi setState() không?

Theo mặc định, khi state hoặc props của component thay đổi, component của bạn sẽ re-render lại. Nếu phương thức render() của bạn phụ thuộc vào một số dữ liệu khác, bạn có thể cho React biết rằng component đó cần re-render lại bằng cách gọi forceUpdate().

component.forceUpdate(callback);

3. Làm các nào để loop trong JSX?

Bạn chỉ có thể sử dụng Array.prototype.map với cú pháp arrow function của ES6.

Ví dụ, mảng items của các object được map vào một bảng các component.

<tbody>
  {items.map((item) => (
    <SomeComponent key={item.id} name={item.name} />
  ))}
</tbody>

Nhưng bạn không thể lặp khi sử dụng vòng for:

<tbody>
  for (let i = 0; i < items.length; i++) {
    <SomeComponent key={items[i].id} name={items[i].name} />
  }
</tbody>

4. Làm các nào để bạn truyền các props bên trong dấu ngoặc kép?

React (hoặc JSX) không hỗ trợ nội suy biến bên trong một giá trị thuộc tính. Đại diện dưới đây sẽ không hoạt động:

<img className="image" src="images/{this.props.image}" />

Nhưng bạn có thể đặt bất kỳ biểu thức JS nào bên trong dấu ngoặc nhọn làm toàn bộ giá trị thuộc tính. Vì vậy, biểu thức dưới đây hoạt động:

<img className="image" src={"images/" + this.props.image} />

Hoặc sử dụng template string:

<img className="image" src={`images/${this.props.image}`} />

5. Làm cách nào để áp dụng điều kiện cho thuộc tính class?

Bạn không nên sử dụng dấu ngoặc nhọn bên trong dấu ngoặc kép vì nó sẽ được đánh giá là một chuỗi.

<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

Thay vào đó, bạn cần di chuyển các dấu ngoặc nhọn ra bên ngoài (đừng quên bao gồm khoảng trắng giữa các tên lớp):

<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

Template string cũng hoạt động tương tự:

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

6. Sự khác nhau giữa React và ReactDOM?

React package chứa React.createElement(), React.Component, React.Children và các trình trợ giúp khác liên quan đến các element và lớp component. Bạn có thể coi đây là những trình trợ giúp đẳng cấu hoặc phổ quát mà bạn cần để xây dựng các component. Gói react-dom chứa ReactDOM.render() và trong react-dom/server, chúng tôi có hỗ trợ render phía máy chủ với ReactDOMServer.renderToString()ReactDOMServer.renderToStaticMarkup().

7. Tại sao ReactDOM được tách rời khỏi React?

Nhóm React đã làm việc để trích xuất tất cả các tính năng liên quan đến DOM vào một thư viện riêng gọi là ReactDOM. React v0.14 là bản phát hành đầu tiên trong đó các thư viện được phân chia. Bằng cách xem xét một số package, react-native, react-canvas và react-three, rõ ràng là vẻ đẹp và bản chất của React không liên quan gì đến trình duyệt hoặc DOM.

Để xây dựng nhiều môi trường hơn mà React có thể render, nhóm React đã lên kế hoạch chia gói React chính thành hai: react và react-dom. Điều này mở đường cho việc viết các component có thể được chia sẻ giữa phiên bản web của React và React Native.

8. Làm cách nào để sử dụng React label element?

Nếu bạn cố gắng render một element <label> được liên kết với một text input bằng cách sử dụng thuộc tính for tiêu chuẩn, thì nó sẽ tạo ra HTML thiếu thuộc tính đó và in một cảnh báo tới console.

<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

Vì for là một từ khóa dành riêng trong JavaScript, nên hãy sử dụng htmlFor để thay thế.

<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

9. Sự khác nhau giữa các phương thức setState() và replaceState()?

Khi bạn sử dụng setState() trạng thái hiện tại và trạng thái trước đó được hợp nhất. replaceState() loại bỏ trạng thái hiện tại và chỉ thay thế nó bằng những gì bạn cung cấp. Thông thường, setState() được sử dụng trừ khi bạn thực sự cần xóa tất cả các khóa trước đó vì lý do nào đó. Bạn cũng có thể đặt trạng thái thành false/null trong setState() thay vì sử dụng replaceState().

10. Tại sao bạn không thể cập nhật props trong React?

Triết lý của React là các props phải không thay đổi và từ trên xuống. Điều này có nghĩa là cha mẹ có thể gửi bất kỳ giá trị prop nào cho con, nhưng con không thể sửa đổi các prop nhận được.

11. Cấu trúc thư mục phổ biến cho React là gì?

Có 2 cấu trúc thư mục cho React project file structure.

Grouping by features or routes: Một cách phổ biến để cấu trúc các dự án là định vị CSS, JS và tests cùng nhau, được nhóm theo tính năng hoặc route.

common/
├─ Avatar.js
├─ Avatar.css
├─ APIUtils.js
└─ APIUtils.test.js
feed/
├─ index.js
├─ Feed.js
├─ Feed.css
├─ FeedStory.js
├─ FeedStory.test.js
└─ FeedAPI.js
profile/
├─ index.js
├─ Profile.js
├─ ProfileHeader.js
├─ ProfileHeader.css
└─ ProfileAPI.js

Grouping by file type: Một cách phổ biến khác để cấu trúc các dự án là nhóm các tệp tương tự lại với nhau.

api/
├─ APIUtils.js
├─ APIUtils.test.js
├─ ProfileAPI.js
└─ UserAPI.js
components/
├─ Avatar.js
├─ Avatar.css
├─ Feed.js
├─ Feed.css
├─ FeedStory.js
├─ FeedStory.test.js
├─ Profile.js
├─ ProfileHeader.js
└─ ProfileHeader.css

12.  Các gói phổ biến cho animations là gì?

React Transition Group và React Motion là các gói hoạt hình phổ biến trong hệ sinh thái React.

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 4 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é. 

No comments:

Powered by Blogger.