Chuyện gì xảy ra khi gọi setState
?
Đầu tiên, object được truyền trong setState
sẽ được merge với state hiện tại của component, dựa trên sự thay đổi của object này, UI được update với state mới.
Để làm được chuyện này, React sẽ dựng một cây React Element mới, so sánh sự khác nhau của cây element mới và cây element trước đó, React biết được chính xác chỉ cần update phần UI nào đã bị thay đổi.
Sự khác nhau giữa Element và Component trong React?
React Element ám chỉ những gì thấy trên màn hình.
React component là một function hoặc class có hoặc không có input và sẽ trả về một React element.
Khi nào thì sử dụng Class Component và Functional Component
Nếu component có state và các phương thức của lifecycle, sử dụng Class Component, ngược lại dùng functional component
Ref
trong React dùng để làm gì
Ref để truy cập trực tiếp đến DOM sau khi render
<input type="text" ref={(input) => this.input = input} />
Key trong React là gì
Key giúp React theo dõi sự thay đổi của một item trong list. Tại sao thêm key? để tối ưu performance, giúp React tìm nhanh tới element đó khi cần.
{this.state.todoItems.map((task, uid) => {
return
<li key={uid}>{task}</li>
}
)}
Sự khác nhau giữa controlled component và uncontrolled component
Controlled Component: prop
hoặc state
của component được gán cho giá trị DOM
<input type='text' value={this.state.username} onChange={this.updateUsername} />
Uncontrolled Component: giá trị của DOM thì do DOM quản
<input type='text' ref={(input) => this.input = input} />
Để gọi AJAX, sử dụng sự kiện nào của lifecycle?
componentDidMount
shouldComponentUpdate
dùng để làm gì
shouldComponentUpdate
cho phép can thiệp quá trình update UI của component và các component con của nó. Nếu return true
thì update, ngược lại false
Tại sao nên sử dụng React.Children.map()
thay vì props.children.map()
props.children
chưa chắc lúc nào cũng là array
. Ví dụ
<Parent>
<h1>Welcome.</h1>
</Parent>
Nếu sử dụng props.children.map
trong Parent sẽ bị lỗi vì props.children
là một object không phải array.
<Parent>
<h1>Welcome.</h1>
<h2>props.children will now be an array</h2>
</Parent>
React.Children.map
cho phép props.children
là array
hoặc object
đều được.
Events được xử lý trong React như thế nào?
Các hàm xử lý event trong React sẽ được truyền vào một instance của SyntheticEvent
, SyntheticEvent
cũng giống như những native event bình thường của Browser trừ việc nó có thể làm việc trên tất cả các trình duyệt.
React không attach event vô các child node, mà sẽ lắng nghe tất cả các event sử dụng 1 event listener duy nhất, Với mục đích là để tăng performance và React không cần phải update lại event listener khi update DOM.
Sự khác nhau giữa createElement
và cloneElement
createElement
là để tạo element, cloneElement
copy element và đưa vào các props mới.
Argument thứ 2 của setState
dùng để làm gì
callback function, function sẽ chạy sau khi component
được render
lại với state mới.
setState
là một phương thức bất đồng bộ (asynchronous)
Đoạn code sau sai ở đâu
this.setState((prevState, props) => {
return { streak: prevState.streak + props.count }
})
Không sai gì cả, ít người biết rằng khi setState
có thể truyền vào previous state
.
Bài viết gốc được đăng tải tại VuiLapTrinh
Có thể bạn quan tâm:
- Tại sao hầu hết các Scrum Master đều thất bại
- [AI Interview] 12 câu hỏi phỏng vấn Deep Learning siêu hay không thể bỏ qua
- HTML Questions – Front End Interview Handbook
Xem thêm các tuyển react developer hấp dẫn tại TopDev