Tớ là Đép

Imperative Programming và Declarative Programming

Sun, 11 Dec 2022 02:45:23 +0700

Gần đây khi đọc vài tài liệu và bài viết mình có thấy lại khái niệm Imperative Programming và Declarative Programming, bỗng dưng thấy kiến thức này hơi hổng dù đã có nghía qua nó một lần. Nên mình vội vàng làm ngay một post để hâm lại kiến thức.

Imperative vs Declarative Programming

Imperative là cách bạn làm một thứ.

Declarative là cái mà bạn muốn.

Uhm, vậy nó là cái quái gì (!?)

Định nghĩa thì rắc rối, vậy nên mình đưa ra ví dụ cho dễ hình dung.

Bạn có một cuộc hẹn cho buổi pạt ty cuối tuần, và bạn nhắn: “Tao tới CircleK rồi, làm sao tới chỗ mày đây?”

Imperative: Đi thẳng 100m. Tới đường Nguyễn Văn A, rẽ trái. Đi thẳng đến đường Phan Văn B đi thêm 200m nữa thì rẽ vào hẻm 213, tới nhà có số 12.

Declarative: Nhà t ở 213/12 Phan Văn B, Google Maps đi con giai.

Cả 2 cách đều chỉ bạn đến nơi cần đến. Khác biệt ở chỗ, một cách sẽ cho bạn chỉ dẫn để có thể đến nơi, cách còn lại thì mong chị Google không dẫn bạn đi quá xa.

Với cách tiếp cận Imperative thì bạn sẽ có được một chỉ dẫn cụ thể, làm cách nào mà bạn đến được địa chỉ đó (how).

Với Declarative thì sẽ cho bạn cái bạn muốn (what) - một địa chỉ và mặc định bạn sẽ biết cách kiếm ra được đường đi.

Ta có thể thấy được các ngôn ngữ đang chia theo cách tiếp cận nào:

Imperative

C
C++
Java

Declarative

SQL
HTML

Both

Javascript
C#
Python

Các ví dụ

SELECT * FROM Users WHERE Country='Viet Nam'

Lướt qua ví dụ bạn có thể thấy và hiểu ngay bạn đang cần cái gì mà không cần quan tâm đến SQL lấy bằng cách nào hay bằng thuật toán nào.

Bạn sẽ lấy được thông tin người dùng từ table Users, họ có quốc tịch Viet Nam

function sum(a, b) {
 return a + b;
}

Rõ ràng, đây là cách tiếp cận Imperative, bạn khai báo một hàm, đặt tên cho nó, trong hàm có 2 tham số a, b và nó sẽ trả về cho bạn tổng của 2 số đó.

Giả sử mình có yêu cầu sau

Viết 1 hàm tên là add, nhận vào một mảng số nguyên và trả về tổng của các phần tử trong đó.

Và vì Javascript là ngôn ngữ có cả Imperative và Declarative nên ta hoàn toàn có 2 cách tiếp cận nó như sau:

// Imperative
function add(arr) {
 let result = 0;
 const len = arr.length;

 for (let i = 0; i < len; i++) {
 result += arr[i];
 }

 return result;
}

// Declarative
function add(arr) {
 return arr.reduce((total, current) => (total += current), 0);
}

Tổng kết

Imperative

Quen thuộc
Dễ học
Có tính logic

Đây là cách tiếp cận chúng ta được được học từ những ngày đầu, mô tả cách thực hiện. Logic được thể hiện rõ ra bên ngoài.

Declarative

Hạn chế sự thay đổi
Giảm side-effects
Code ngắn và dễ đọc hơn

Do không phải viết lại các bước logic, nên code sẽ rõ ràng hơn và dễ đọc hơn. Nhưng Logic lại bị ẩn đi (abstract).

React hoạt động như thế nào?

Sat, 10 Dec 2022 21:45:42 +0700

React là một thư viện Javascript rất phổ biến, và đang phát triển rất mạnh. Nhưng mấy ai biết được cách mà React thực sự hoạt động (trong đó có mình T.T). Đa số các lập trình viên đều biết các khái niệm và làm việc với React (core concepts, API, hooks, …), nhưng cách React làm việc (how and why) thì vẫn còn khá mù mờ.

Vậy React làm công chiện gì?

Công việc chính của React là làm vườn, nó chăm sóc cho bạn 1 cái cây, không phải cây cảnh mà là cây DOM. Cây này giúp các bạn các phép tính toán trên nodes.

DOM Nodes (src: w3schools)

Nhưng bất ngờ chưa, cây này không phải là cây thật (Real DOM) mà là cây ảo (Virtual DOM). React không những là anh làm vườn, mà còn là một cây tỉa nến chuyên nghiệp =]]z.

Vậy tại sao lại có cây này, hiểu đơn giản thì Real DOM giống như ngôi nhà đã được xây dựng vậy, còn Virtual DOM thì giống như bản thiết kế (blueprint). Đoán xem thay đổi ở đâu nhanh và nhẹ hơn nào.

Để có thể hiểu thêm quá trình Rendering trên trình duyệt thì bạn có thể nghía qua post này

JSX

Làm việc với React hẳn rất quen thuộc với cú pháp này, nó gọi là JSX

const Tag = () => {
 return <div>Hello World!</div>;
};

JSX là một cú pháp đặc biệt, chẳng phải là string, js hay là HTML. Nó là cú pháp mở rộng cho js và cho phép bạn viết cú pháp giống như HTML trong file js để tạo ra một đối tượng cụ thể.

Về cơ bản những gì bạn làm sẽ là thế này:

const Tag = () => {
 return React.createElement("div", {}, "Hello World!");
};

/**
 * createElement sẽ trông như thế này.
 * {
 $$typeof: Symbol(react.element),
 key: null,
 props: {children: "Hello World!"},
 ref: null,
 type: "div"
}
*/

Giờ bạn biết rồi đấy, khi app chạy, JSX được parsed và mọi phương thức React.createElement được gọi thì ta sẽ có một cục Object siêu to khổng lồ được lồng vào nhau.

React Virtual DOM và Reconciliation

Ứng dụng React được tạo thành bởi các Components. Component bản chất là nhóm React Element được trả về bởi phương thức render() hoặc return.

Và bởi các Component được lồng vào nhau và được duyệt trong quá trình chạy, React Elements thiết lập liên kết cha-con tương tự như DOM, đây chính là DOM ảo mà ta đã nói ở trên. Sau đó React sẽ đồng bộ DOM ảo với DOM thật.

React uses virtual DOM which is a lightweight version of the DOM. The only difference is the ability to write the screen like the real DOM, in fact, a new virtual DOM is created after every re-render. DOM stores the components of a website in a tree structure. Diffing Algorithm

How DOM updated in react (src: geeksforgeeks)

Cách DOM cập nhật trên React

Lần chạy đầu tiên, cả DOM ảo và DOM thật được khởi tạo.
React hoạt động trên observable pattern, từ đây, bất kì thay đổi nào trên state, React sẽ cập nhật lại DOM ảo.
Sau đó, React so sánh DOM ảo và DOM thật và cập nhật thay đổi, quá trình này gọi là reconciliation (hay giảng hòa).

Ract dùng thuật toán heuristic hay gọi là thuật toán Diffing để so sánh sự khác nhau.

React kiểm tra phần tử gỗc để thay đổi và cập nhật dựa trên type của element

React không thực hiện nhiều tính toán ở những phần diffing, React giả sử rằng nếu parent thay đổi, thì child chắn chắn sẽ thay đổi.

Ví dụ

<div className="class">
 <p>I did not change</p>
</div>

Và nếu ta thay đổi type của thẻ div

<p className="class">
 <p>I did not change</p>
</p>

Mặc dù ta không cần tạo lại thẻ p, nhưng React sẽ không biết khi duyệt cây từ trên xuống. Vì vậy, React quyết định hủy toàn bộ children và khởi tạo lại từ đầu.

Trong trường hợp phần tử có cùng type, React sẽ kiểm tra đến các thuộc tính. Sau đó mới cập nhật các nodes có thay đổi. Component sex được cập nhật vào lifecycle tiếp theo. Và đây cũng là lí do tại sao ta bắt buộc có thuộc tính key trong list render, để React có thể dễ dàng xác định các cập nhật trong các phần tử.