Nếu gần đây bạn có theo dõi những thông tin mới từ cộng đồng React developers thì chắc hẳn bạn sẽ không bỏ qua sự kiện JSConf Iceland 2018
Và có một điều đáng chú ý nhất của sự kiện đó là bài nói của Dan Abramov về tương lai của React. Sneak Peek của bài viết có thể tìm thấy ở bài blog này, và đây là video đầy đủ về JS Conf.
Có một điều khá bất ngờ trong hội thảo này đó là phần lớn các bài thuyết trình đều hướng về hệ sinh thái React, hoặc ít nhất là có một code snippets trong đó, có thể thấy được React đã trở thành một thư viện phổ biến nhất nhiều năm qua.
Vậy thì có gì mới ở phiên bản React sắp ra mắt trong năm 2018? Điều gì khiến cộng đồng React developers trên các diễn đàn như Redit, Spetrum hay team Apollo hào hứng đến vậy?
Đó là chính là những ứng dụng cụ thể mà React Fiber mang lại sau khi React được viết lại trong bản 16, Dan đã chỉ ra cách để có thể cập nhật DOM elements một cách bất đồng bộ (asynchronous), điều mà trước đây không thể, thông qua 2 ví dụ về 2 thuật ngữ mới: “Time slicing” và “Suspense”
Mình sẽ lần lượt giải thích các ví dụ trong bài thuyết trình của Dan vì vậy bạn nên dành thời gian để xem qua nó trước.
Vấn đề với “Computing power” và “Network Speed”, làm sao để tạo ra một trải nghiệm người dùng tốt?Với khả năng của React, chúng ta có thể cải thiện những vân đề này.
Hiện tại, React cập nhật DOM một cách đồng bộ và một khi React bắt đầu render thì nó sẽ không dừng lại được.
Vậy nếu như React có thể cập nhật một cách bất đồng bộ, khi bắt đầu render, nó có thể tạm ngưng và tiếp tục render ở thời điểm khác (yeild). Ví dụ cụ thể đó là khi có một sự kiện quan trọng hơn cần update trước như một ô input, trình duyệt sẽ xử lý sự kiện đó trước mà không block các hành động khác.
Trong chế độ bất đồng bô, người dùng vẫn có thể tương tác với app ngay cả khi nó đang render.
Table of Contents
Lấy dữ liệu trong khi Render
import { createFetcher, Placeholder, Loading } from '../future';
Fetcher object sẽ làm việc giống như một nơi lưu trữ (cache) và nó có một method: read.
Đây là cách Future fetcher làm việc:
Trong hàm render, đọc các giá trị từ cache.
Nếu như các giá trị đã được lưu lại trước đó (cached), hàm render tiếp tục chạy như bình thường.
Nếu như dữ liệu chưa được cached, cache throws một Promise (thay vì error).
Khi Promise được resolved, React render lại những phần thiếu.
Dữ liệu cache được chia sẻ trong suốt cây DOM của React nhờ vào context API mới.
deferSetState nói cho React biết rằng nó được phép thay đổi một cách bất đồng bộ.Với Placeholder component, nếu như việc render tốn hơn 1500ms để đợi cho việc load các resource bất đồng bộ, React sẽ render ra một màn hình chờ (spinner).
Người dùng hoàn toàn có thể tương tác với ứng dụng ngay cả khi dữ liệu đang được lấy (fetching), và sẽ không có vấn đề gì kể cả chúng ta click xung quanh ứng dụng, trigger một hành động fetch khác.
Chúng ta có thể cho phép hiển thị cùng một lúc hoặc lựa chọn những components muốn hiển thị trước và sau. Trong ví dụ này, nếu như phần data review tốn hơn 1s để lấy, spinner sẽ được xuất hiện.Loading là một component cho bạn một hàm render prop với giá trị isLoading cho phép bạn quyết định hiển thị cái gì.
Code Splitting For The Win!
Code splitting sử dụng createFetcher API và được truyền vào một hàm trả về một dynamic import. Để lấy được component, gọi method .read().default từ fetcher.Để ngăn chặn việc nhảy trang khi một ảnh được loads, chúng ta có thể tránh việc hiển thị trang đó cho đến khi ảnh đã được load nhờ vào createFetcher API.Bạn vẫn có thể tương tác với app lúc này.
Time Slicing và Suspense được lấy cảm hứng từ Git as a metaphor
Đây là lý đo tại sao bạn nên học và tiếp tục sử dụng React! VirtualDOM có thể đễ dàng được tạo ra như nhiều thư viện khác đã làm (Vue, Preact,..), nhưng để tối ưu hóa là cực kỳ khó khăn. Tuy nhiên với những cải tiến này, React xứng đáng tiếp tục trở thành thư viện JavaScript số 1 trong những năm tới. 🙂
Previous post