[{"content":"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.\n Imperative vs Declarative Programming\nImperative là cách bạn làm một thứ.\nDeclarative là cái mà bạn muốn.\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.\nBạn có một cuộc hẹn cho buổi pạt ty cuối tuần, và bạn nhắn: \u0026ldquo;Tao tới CircleK rồi, làm sao tới chỗ mày đây?\u0026rdquo;\nImperative: Đ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.\nDeclarative: Nhà t ở 213/12 Phan Văn B, Google Maps đi con giai.\nCả 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.\nVớ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).\nVớ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.\nTa có thể thấy được các ngôn ngữ đang chia theo cách tiếp cận nào:\nImperative\n C C++ Java  Declarative\n SQL HTML  Both\n Javascript C# Python  Các ví dụ SELECT * FROM Users WHERE Country=\u0026#39;Viet Nam\u0026#39; 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.\n Bạn sẽ lấy được thông tin người dùng từ table Users, họ có quốc tịch Viet Nam\n 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ố đó.\nGiả sử mình có yêu cầu sau\nViế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 đó.\nVà 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:\n// Imperative function add(arr) {  let result = 0;  const len = arr.length;   for (let i = 0; i \u0026lt; len; i++) {  result += arr[i];  }   return result; } // Declarative function add(arr) {  return arr.reduce((total, current) =\u0026gt; (total += current), 0); } Tổng kết Imperative\n 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.\nDeclarative\n 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).\n","date":"2022-12-11T02:45:23+07:00","image":"https://toladev.netlify.app/posts/2022/dec/imperative-and-declarate-programming/intro_hu1188b62e35af3026c285fc26d50411d2_1317396_120x120_fill_box_smart1_3.png","permalink":"https://toladev.netlify.app/posts/2022/dec/imperative-and-declarate-programming/","title":"Imperative Programming và Declarative Programming"},{"content":"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, \u0026hellip;), nhưng cách React làm việc (how and why) thì vẫn còn khá mù mờ.\nVậ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.\nDOM Nodes (src: w3schools)\nNhư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.\nVậ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.\n Để 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\n 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\nconst Tag = () =\u0026gt; {  return \u0026lt;div\u0026gt;Hello World!\u0026lt;/div\u0026gt;; }; 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ể.\nVề cơ bản những gì bạn làm sẽ là thế này:\nconst Tag = () =\u0026gt; {  return React.createElement(\u0026#34;div\u0026#34;, {}, \u0026#34;Hello World!\u0026#34;); };  /** * createElement sẽ trông như thế này. * { $$typeof: Symbol(react.element), key: null, props: {children: \u0026#34;Hello World!\u0026#34;}, ref: null, type: \u0026#34;div\u0026#34; } */ 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.\nReact 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.\nVà 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.\n 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\n How DOM updated in react (src: geeksforgeeks)\nCá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.\nReact kiểm tra phần tử gỗc để thay đổi và cập nhật dựa trên type của element\nReact 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.\nVí dụ\n\u0026lt;div className=\u0026#34;class\u0026#34;\u0026gt;  \u0026lt;p\u0026gt;I did not change\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; Và nếu ta thay đổi type của thẻ div\n\u0026lt;p className=\u0026#34;class\u0026#34;\u0026gt;  \u0026lt;p\u0026gt;I did not change\u0026lt;/p\u0026gt; \u0026lt;/p\u0026gt; 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.\nTrong 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ử.\nTổng kết Hi vọng bài viết này đã đủ để nói về khái niệm về cách mà React đang hoạt động.\nTham khảo React under the hood - FreeCodeCamp\nWhat Does React Actually Do?\nHow React Works Under the Hood\nHow does React JS actually work?\nReact Behind The Scene\nWhat is Diffing Algorithm ?\n","date":"2022-12-10T21:45:42+07:00","image":"https://toladev.netlify.app/posts/2022/dec/how-react-works-under-the-hood/intro_hufbd489623a38272f01667814e13cffcb_92134_120x120_fill_q75_box_smart1.jpeg","permalink":"https://toladev.netlify.app/posts/2022/dec/how-react-works-under-the-hood/","title":"React hoạt động như thế nào?"}]