State là gì?
State (trạng thái)
hoạt động khác vớiProps
.State
là thành phần củacomponent
, trong khi cácprops
lại được truyền giá trị từ bên ngoài vàocomponent
.State
vàProps
là 2 loại dữ liệu dùng để quản lý 1 component.- "State có thể thay đổi", trong tiếng Anh, ‘state of a being’ là chỉ đến tình trạng thể chất của một người, và nó là một trạng thái đơn thuần, thay đổi theo thời gian. Tương tự trong ReactJS và React Native, State được sử dụng trong các component để theo dõi thông tin.
- Hãy nhớ rằng không cập nhật state trực tiếp bằng cách sử dụng
this.state
. Luôn sử dụng phương thứcsetState
để cập nhật state của các đối tượng. Sử dụngsetState
đểre-renders
mộtcomponent
và tất cả cáccomponent con
.
Bạn có thể set state khi nào bạn có dữ liệu mới từ server, hoặc từ user nhập vào.
import React, { Component } from "react";
import { AppRegistry, Text, View } from "react-native";
class Blink extends Component {
constructor(props) {
super(props);
this.state = { isShowingText: true };
// Toggle the state every second
setInterval(() => {
this.setState((previousState) => {
return { isShowingText: !previousState.isShowingText };
});
}, 1000);
}
render() {
let display = this.state.isShowingText ? this.props.text : " ";
return <Text>{display}</Text>;
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text="I love to blink" />
<Blink text="Yes blinking is so great" />
<Blink text="Why did they ever take this out of HTML" />
<Blink text="Look at me look at me look at me" />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent("AwesomeProject", () => BlinkApp);
Khi nào bạn sử dụng 1 class component thay vì 1 functional component?
Nếu component của bạn có state hoặc các lifecycle method
, sử dụng 1 class component
, ngược lại, dùng 1 functional component
.
Refs là gì và tại sao chúng quan trọng?
Theo tài liệu của React
, refs
được sử dụng để lấy tham chiếu đến một node DOM(Document Object Model) hoặc có thể là một thể hiện của một component trong một ứng dụng React
, tức là refs sẽ return về một node mà chúng ta tham chiếu đến.
Để sử dụng chúng bạn thêm 1 thuộc tính refs
vào component của bạn, ví dụ:
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={(input) => (this.input = input)} />
<button type="submit">Submit</button>
</form>
);
}
}
Keys là gì và tại sao chúng quan trọng?
Keys
giúp React theo dõi những item nào được thay đổi, được thêm vào hoặc được xóa khỏi 1 list.
render () {
return (
<ul>
{this.state.todoItems.map(({task, uid}) => {
return <li key={uid}>{task}</li>
})}
</ul>
)
}
Keys
quan trọng là vì giá trị key là duy nhất để phân biệt 1 item với các item
khác.
Bạn thực hiện các request AJAX trong Lifecycle event nào và tại sao?
Các request AJAX
nên được thực hiện trong componentDidMount
lifecycle event, bởi vì:
- Việc thực hiện các thuật toán đối chiếu sự thay đổi của React có khả năng bắt đầu và ngừng render khi thấy cần thiết cho hiệu suất. Một trong các sự quản lý việc này là sự kiện
componentWillMount
, là 1 lifecycle event khác có thể thực hiện 1 request AJAX, là "non-deterministic", nghĩa là React có thể gọicomponentWillMount
vào những thời điểm khác nhau bất cứ khi nào nó cảm thấy cần, điều này rõ ràng là không tốt cho các request AJAX. - Bạn không thể đảm bảo các request AJAX sẽ được giải quyết sau khi component được gắn kết, điều đó có nghĩa là bạn đang cố dùng setState trên 1 component chưa được gắn kết, không những nó không hoạt động mà React còn báo lỗi cho bạn. Thực hiện 1 request AJAX trong
componentDidMount
sẽ đảm bảo điều đó.
Có bao nhiêu threads chạy trong React native?
2 theads, Javascript thead và main UI thread. Javascrip thread chạy trong thread riêng của nó, tách biệt so với main UI thread. Khi ứng dụng của bạn chạy 1 logic phức tạp, UI của bạn vẫn chạy mượt mà ngay cả khi chúng animating
hoặc scrolling
, bởi vì UI không bị block bởi JS thread.
Khi nào componentWillRecieveProps được gọi?
Khi các new props được pass vào component đó.