Bộ câu hỏi phỏng vấn ReactJs phần 10

Với quy mô Flux, UI phức tạp không còn bị update theo tầng ; bất kỳ React component nào đã có sẽ hoàn toàn có thể thiết kế xây dựng lại state của nó dựa trên tài liệu do Store phân phối. Mẫu Flux cũng thực thi tính toàn vẹn của tài liệu bằng cách hạn chế quyền truy vấn trực tiếp vào tài liệu được san sẻ .Thỉnh thoảng bạn muốn cập nhập lại Component một cách thủ công bằng tay, điều này hoàn toàn có thể đạt được bằng cách sử dụng phương pháp forceUpdate ( ). Đây là một phương pháp của lớp React. Component, vì thế những lớp con của React. Component sẽ được thừa kế phương pháp này .Khi ứng dụng đang chạy ở development mode, React sẽ tự động hóa kiểm tra tổng thể những props mà tất cả chúng ta thiết lập trên component để bảo vệ chúng phải đúng và đúng kiểu tài liệu. Đối với trường hợp loại tài liệu không đúng mực, nó sẽ tạo ra những thông tin cảnh báo nhắc nhở trong console dành cho development mode và nó bị tắt ở production mode để không bị tác động ảnh hưởng hiệu suất. Các prop bắt buộc được xác lập bằng isRequired .

React Fiber là gì?

Chúng ta sẽ thảo luận về cốt lõi của kiến trúc React Fiber. Fiber khá trừu tượng so với những thứ mà những nhà phát triển ứng dụng thường nghĩ đến. Nếu bạn cảm thấy thất vọng về những nỗ lực của mình để hiểu Fiber, đừng cảm thấy chán nản. Hãy tiếp tục cố gắng và cuối cùng cũng sẽ thu lại được gì đó có ý nghĩa. Chúng tôi đã xác định mục tiêu chính của Fiber là cho phép React tận dụng lợi ích từ việc lập kế hoạch (scheduling). Cụ thể chúng ta cần: – Tạm dừng công việc và quay lại thực hiện sau. – Gán ưu tiên cho những loại công việc khác nhau. – tái sử dụng lại những công việc đã hoàn thành. – bỏ qua những công việc mà không cần thiết nữa.

Để làm được những điều trên, trước tiên ta cần một cách để chia nhỏ 1 vông việc thành các đơn vị nhỏ hơn. Theo một cách nghĩa nào đó, một Fiber thể hiện một đơn vị công việc. Quay trở lại với ý tưởng trong React Components as functions of data, thường được biểu diễn như sau v = f(d)

Render ra một ứng dụng React như một lời gọi hàm mà bên trong chứa những lời gọi đến những hàm khác, và tiếp tục như thế. Điểm tương đồng này là hữu dụng khi ta nghĩ về Fibers. Cách mà các máy tính điển hình truy vết lại một thực thi của chương trình là sử dụng Call Stack. Khi một hàm được thực thi, một Stack Frame được thêm vào hàng đợi, Stack Frame đó đại diện cho công việc được thực thi bởi hàm đó.

Khi thao tác với những giao diện người dùng, yếu tố ở đây là có quá nhiều việc làm được thực thi trong cùng một lần, nó hoàn toàn có thể khiến cho Animation bị giảm FPS và trông rất tệ. thêm vào đó, một vài việc làm hoàn toàn có thể trở nên không thiết yếu nếu nó bị thay thế sửa chữa bởi những update gần hơn. Đây là nơi việc so sánh những thành phần UI và hàm bị phá vỡ, chính do thường thì những thành phần có nhiều mối liên hệ đơn cử hơn là functions .
Những browsers mới hơn ( và React Native ) cài đạt những API nhằm mục đích giúp chỉ ra đúng mực yếu tố : requestIdleCallback lập lịch một function có độ ưu tiên thấp được gọi trong tiến trình thảnh thơi, và requestAnimationFrame lập lịch cho những function có độ ưu tiên cao hoàn toàn có thể gọi trong khung hình sau đó. Vấn đề là, để sử dụng những API đó, bạn cần một cách để chia việc làm render thành những đơn vị chức năng nhỏ. Nếu bạn chỉ nhờ vào vào Call Stack, nó sẽ thao tác cho đến khi stack trống. Sẽ tốt hơn nếu tất cả chúng ta hoàn toàn có thể chỉnh sửa hành vi của Call Stack để tối ưu cho việc Render ra những UI ? Sễ tốt hơn nếu tất cả chúng ta hoàn toàn có thể ngắt quãng Call Stack theo ý mình và điều khiển và tinh chỉnh những Stack Frame bằng tay. Đó chính là tiềm năng của React Fiber. Fiber là một tái cấu trúc của Stack, chuyên biệt cho những components của React. Bạn hoàn toàn có thể hiểu một Fiber như thể một Stack Frame ảo. Lợi ích của việc tái cấu trúc Stack là bạn hoàn toàn có thể lưu những Stack Frame trong bộ nhowsvaf tiến hành chúng mặc dầu bạn không muốn. Điều này là thiết yếu cho việc đạt được tiềm năng cho việc lập lịch .
Bên cạnh việc lập lịch, giải quyết và xử lý những Stack Frame bằng tay mở ra tiềm năng cho những tính năng như Concurrency và Error Boundaries. Chúng ta sẽ bàn những yếu tố đó ở tương lai khi React Fiber chính thức được đưa vào sử dụng .

Source: https://www.lesabeilles.biz
Category: Mạng Internet