React Fiber là gì, phân biệt React Component với Pure Component

Trong bài viết trước chúng ta đã tìm hiểu về Component trong React, React Native. Hôm nay chúng ta sẽ cùng đi phân biệt React Component với Pure Component để hiểu rõ hơn mục đích và trường hợp sử dụng của hai loại component này. Ngoài ra chúng ta cũng sẽ tìm hiểu sơ lược về React Fiber - một bản tái cấu trúc lại thuật toán của React.

1. React component và pure component

React Component và Pure Component thường xuyên được sử dụng trong các dự án về React, React Native, chúng có một số đặc điểm chung như:

• Các component dưới dạng class
• Có đầy đủ các lifecycle để có thể tạo các code logic xử lý đặc thù trước hay sau render.

Đối với react component nó sẽ re-render mỗi khi state hay props thay đổi kéo theo các component con cũng sẽ bị re-render kể cả props truyền xuống component con là không đổi. Giải pháp đặt ra là chúng có thể bổ sung code check props vào method shouldComponentUpdate ở component để đảm bảo nó sẽ chỉ re-render mỗi khi có sự thay đổi về props.

Đó cũng là cách mà PureComponent thực hiện, PureComponent cũng là 1 React.Component nhưng đã implement thêm phần logic check này. Tuy nhiên, lưu ý quạn trọng khi sử dụng method shouldComponentUpdate là: Returning false does not prevent child components from re-rendering when their state changes. Tức là việc trả về giá trị false hay không thì các child component vẫn có thể render vì state của child component có thể đã thay đổi.

Như vậy, PureComponent đã giải quyết được vấn đề về performance vẫn tồn tại ở React.Component, đó là việc ngăn chặn sự render không cần thiết, vậy từ giờ chúng ta thay thế toàn bộ các React.Component thành PureComponent có được không? Câu trả lời cho câu hỏi trên là không, bởi lẽ PureComponent dùng shallow equality để kiểm tra props và state có thay đổi hay không, vậy nên trong nhiều trường hợp props và state là dạng complex và có sự thay đổi nhưng shallow equality không phát hiện ra thay đổi đó vì vậy sẽ kông render khi cần thiết.

Một ví dụ điển hình về việc không render khi dùng Pure Component là khi ta thêm 1 item vào một array bằng lệnh push thì shallow equality không nhận thấy sự thay đổi. Để khắc phục điều này mà vẫn dùng Pure component thì ta có thể sử dụng hàm concat (vì nó sẽ tạo ra object mới do đó shallow equality nhận thấy có thay đổi)

2. React Fiber

a) Khái niệm

• React Fiber là bản tái cấu trúc thuật toán nền tảng của React
• Mục tiêu của React Fiber là tăng cường khả năng thích ứng với một số khía cạnh như hoạt ảnh (animation), bố cục (layout) hay cử chỉ (gestures)
• Thay đổi nằm ở tính năng gia tăng và lập lịch rendering được built-in vào React Fiber đảm bảo việc render đúng đối tượng và đúng lúc làm tăng tốc độ xử lý.
• React Fiber là bản viết lại react core với khả năng tương thích hoàn chỉnh và tương thích ngược

b) MỘt số khác biệt chính giữa React và React Fiber là về một số tính năng

• Tối ưu quá trình rendering: React v16 bao gồm một server renderer viết lại hoàn toàn:    
• Hỗ trợ streaming
• Chiến lược đóng gói mới, giúp chúng ta không còn phải bundle React để có được performance tốt.
• Không còn yêu cầu initial render để kết hợp chính xác kết quả từ máy chủ.
• Xử lý lỗi tốt hơn: Sử dụng error boundaries là các thành phần đặc biệt để bắt lỗi bên trong cây con và hiển thị lên giao diện, nó có thể sử dụng như component bình thường thay vì toàn bộ cây component bị unmount khi gặp lỗi. React cung cấp thêm 1 lifecycle method mới tên là componentDidCatch(error, info)
• Có thể render nhiều component trong hàm render thông qua một pattern phổ biến là Fragment. Fragment giúp nhóm các component mà không cần một component bao ngoài.