Top những câu hỏi phỏng vấn React thường gặp - Phần 4
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnjXMWjf_E0_bayNR-g6D5QfmdRVeQzWslg9aRrIYy77t3IuP0Tc0KyMezAIP1Vbvt4-s43F7MC1nhdWdBuQSuoc1cNVyZ0Nx4lOjubyQnRYVUq7f2sHuXbV4zgnD0Z_wnh54pBVfqL8mqffMorw7hZDv0ormyzlWvq_023gOQX7uWSvethKeR1hXxtUc/s1920/part%204.png"
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="1080"
data-original-width="1920"
height="327"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnjXMWjf_E0_bayNR-g6D5QfmdRVeQzWslg9aRrIYy77t3IuP0Tc0KyMezAIP1Vbvt4-s43F7MC1nhdWdBuQSuoc1cNVyZ0Nx4lOjubyQnRYVUq7f2sHuXbV4zgnD0Z_wnh54pBVfqL8mqffMorw7hZDv0ormyzlWvq_023gOQX7uWSvethKeR1hXxtUc/w581-h327/part%204.png"
width="581"
/>
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:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
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:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
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().
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
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.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><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:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
<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:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
<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:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><img className="image" src={"images/" + this.props.image} />
Hoặc sử dụng template string:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
<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.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>
<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):
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>
Template string cũng hoạt động tương tự:
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><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() và
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.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><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ế.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><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.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
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.
style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
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é.
Các bài viết liên quan:
href="https://www.hijublog.com/2023/07/top-nhung-cau-hoi-phong-van-react-thuong-gap-phan-1.html"
target="_blank"
>Top những câu hỏi phỏng vấn React thường gặp - Phần 1 >
href="https://www.hijublog.com/2023/07/top-nhung-cau-hoi-phong-van-react-thuong-gap-phan-2.html"
target="_blank"
>Top những câu hỏi phỏng vấn React thường gặp - Phần 2 >
href="https://www.hijublog.com/2023/07/top-nhung-cau-hoi-phong-van-react-thuong-gap-phan-3.html"
target="_blank"
>Top những câu hỏi phỏng vấn React thường gặp - Phần 3 >
href="https://www.hijublog.com/2023/07/top-nhung-cau-hoi-phong-van-react-thuong-gap-phan-5.html"
target="_blank"
>Top những câu hỏi phỏng vấn React thường gặp - Phần 5 >
href="https://www.hijublog.com/2023/07/top-nhung-cau-hoi-phong-van-react-thuong-gap-phan-6.html"
target="_blank"
>Top những câu hỏi phỏng vấn React thường gặp - Phần 6 >
href="https://www.hijublog.com/2023/07/top-nhung-cau-hoi-phong-van-react-thuong-gap-phan-7.html"
target="_blank"
>Top những câu hỏi phỏng vấn React thường gặp - Phần 7 >
