ReactJS - Harmon hóa: Hướng dẫn cho người mới bắt đầu
Xin chào các bạn 未来 React开发者! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những khía cạnh thú vị nhất của React: Harmon hóa. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ dẫn dắt bạn từng bước trong hành trình này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và cùng bắt đầu nhé!
Harmon hóa là gì?
Hãy tưởng tượng bạn đang trang trí lại phòng của mình. Bạn có một hình ảnh trong đầu về cách bạn muốn nó trông như thế nào, và bạn bắt đầu di chuyển các vật dụng xung quanh. Đó cũng chính là điều React làm với các trang web, và quá trình nó sử dụng được gọi là Harmon hóa.
Nói một cách đơn giản hơn, Harmon hóa là cách React cập nhật DOM (Document Object Model) một cách hiệu quả. Đó giống như siêu năng lực của React giúp ứng dụng web của bạn nhanh chóng và mượt mà.
Tại sao Harmon hóa lại quan trọng?
Trước khi chúng ta đi sâu hơn, hãy hiểu tại sao Harmonization lại quan trọng. Cập nhật DOM thường là phần chậm nhất của các ứng dụng web. Nếu React phải cập nhật toàn bộ DOM mỗi khi có sự thay đổi, ứng dụng của bạn sẽ chậm hơn một con ốc bươu leo lên đỉnh đồi!
Đó là lúc Harmonization ra vào cuộc. Đây là cách thông minh của React để giảm thiểu việc cập nhật DOM, giúp ứng dụng của bạn nhanh hơn Usain Bolt trong ngày tốt!
Cách Harmonization hoạt động
Virtual DOM
Trái tim của Harmonization là một thứ gọi là Virtual DOM. Hãy tưởng tượng nó như một tờ giấy nháp của React nơi nó lên kế hoạch tất cả các thay đổi trước khi thực sự thực hiện chúng.
Dưới đây là một ví dụ đơn giản để minh họa điều này:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Alice" />;
ReactDOM.render(element, document.getElementById('root'));Trong đoạn mã này, React tạo ra mộtrepräsentierte Darstellung des DOM mit einem <h1>-Element, das "Hello, Alice" enthält. Sau đó, nó cập nhật DOM thực tế một cách hiệu quả để khớp với điều này.
Algorithmus zur Differenzierung
Bây giờ, hãy nói chúng ta muốn thay đổi Alice thành Bob:
// Initial render
ReactDOM.render(
<Welcome name="Alice" />,
document.getElementById('root')
);
// Update
ReactDOM.render(
<Welcome name="Bob" />,
document.getElementById('root')
);React không xây dựng lại toàn bộ DOM. Thay vào đó, nó sử dụng một thuật toán "diffing" để so sánh DOM ảo mới với DOM ảo trước đó. Nó sau đó chỉ cập nhật những gì cần thiết - trong trường hợp này, thay đổi "Alice" thành "Bob".
Các khái niệm chính trong Harmonization
1. Loại Element
React trước tiên kiểm tra xem các loại element có相同 không. Nếu chúng thay đổi, nó sẽ xây dựng lại toàn bộ subtree.
Ví dụ:
// Trước
<div>
<Counter />
</div>
// Sau
<span>
<Counter />
</span>Trong trường hợp này, React sẽ hủy <div> và các con của nó, sau đó tạo một <span> và các con của nó mới.
2. Keys
Keys giúp React nhận biết các mục đã thay đổi, được thêm vào hoặc bị xóa trong một danh sách. Hãy xem một ví dụ:
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}key={todo.id} giúp React theo dõi từng mục trong danh sách, ngay cả khi thứ tự của chúng thay đổi.
3. Cycle của Component
Harmonization cũng liên quan đến các phương thức cycle của component. Dưới đây là một cái nhìn nhanh:
| Phương thức | Mô tả |
|---|---|
componentDidMount |
Được gọi sau khi component được chèn vào DOM |
componentDidUpdate |
Được gọi sau khi component được cập nhật |
componentWillUnmount |
Được gọi trước khi component bị xóa khỏi DOM |
Ví dụ:
class Clock extends React.Component {
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}Trong component này, componentDidMount thiết lập một bộ đếm thời gian, và componentWillUnmount dọn dẹp khi component bị xóa.
Harmonization trong hành động
Hãy kết hợp tất cả lại với một ví dụ phức tạp hơn:
class FruitList extends React.Component {
state = {
fruits: ['Apple', 'Banana', 'Cherry']
};
addFruit = () => {
this.setState(prevState => ({
fruits: [...prevState.fruits, 'Date']
}));
};
render() {
return (
<div>
<ul>
{this.state.fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
<button onClick={this.addFruit}>Add Date</button>
</div>
);
}
}Khi bạn nhấp vào nút "Add Date", quá trình harmonization của React bắt đầu:
- Nó tạo ra một DOM ảo mới với danh sách quảupdated.
- Nó so sánh DOM ảo mới với DOM ảo trước đó.
- Nó xác định rằng một
<li>mới cần được thêm vào. - Nó hiệu quả cập nhật chỉ phần đó của DOM thực tế.
Và voilà! Bạn sẽ thấy một quả mới trong danh sách của mình, nhanh hơn bạn có thể nói "React là tuyệt vời!"
Kết luận
Harmonization giống như đội ngũ hậu trường trong một buổi biểu diễn sân khấu. Bạn không thấy nó làm việc, nhưng nó rất quan trọng cho một buổi biểu diễn mượt mà. Bằng cách hiểu cách React cập nhật DOM một cách hiệu quả, bạn đã bước gần hơn một bước trong việc xây dựng các ứng dụng web nhanh và mượt mà.
Nhớ rằng, Roma không được xây dựng trong một ngày, và neither does expertise in React. Hãy tiếp tục thực hành, tiếp tục viết mã, và trước khi bạn biết điều đó, bạn sẽ harmonizing với những người giỏi nhất!
Chúc may mắn, các master React tương lai!
Credits: Image by storyset