Tự động tải lại div javascript
React có thể được sử dụng trong bất kỳ ứng dụng web nào. Nó có thể được nhúng trong các ứng dụng khác và chỉ cần cẩn thận một chút, các ứng dụng khác có thể được nhúng trong React. Hướng dẫn này sẽ xem xét một số trường hợp sử dụng phổ biến hơn, tập trung vào việc tích hợp với jQuery và Backbone, nhưng những ý tưởng tương tự có thể được áp dụng để tích hợp các thành phần với bất kỳ mã hiện có nào Show
Tích hợp với các plugin thao tác DOMReact không biết về những thay đổi được thực hiện đối với DOM bên ngoài React. Nó xác định các bản cập nhật dựa trên biểu diễn bên trong của chính nó và nếu các nút DOM tương tự bị thao túng bởi một thư viện khác, React sẽ bị nhầm lẫn và không có cách nào để khôi phục Điều này không có nghĩa là không thể hoặc thậm chí là khó kết hợp React với các cách khác để tác động đến DOM, bạn chỉ cần chú ý đến những gì mỗi người đang làm Cách dễ nhất để tránh xung đột là ngăn không cho thành phần React cập nhật. Bạn có thể làm điều này bằng cách kết xuất các phần tử mà React không có lý do gì để cập nhật, chẳng hạn như một 5 trốngCách tiếp cận vấn đềĐể chứng minh điều này, hãy phác thảo một trình bao bọc cho một plugin jQuery chung Chúng tôi sẽ đính kèm một tham chiếu đến phần tử DOM gốc. Bên trong 6, chúng tôi sẽ nhận được một tham chiếu đến nó để chúng tôi có thể chuyển nó tới plugin jQueryĐể ngăn React chạm vào DOM sau khi cài đặt, chúng tôi sẽ trả về một 5 trống từ phương thức 8. Phần tử 5 không có thuộc tính hoặc phần tử con, vì vậy React không có lý do gì để cập nhật nó, để plugin jQuery tự do quản lý phần đó của DOM
Lưu ý rằng chúng tôi đã xác định cả hai phương pháp vòng đời 6 và 1. Nhiều plugin jQuery đính kèm trình xử lý sự kiện vào DOM, vì vậy điều quan trọng là phải tách chúng ra trong 1. Nếu plugin không cung cấp phương thức dọn dẹp, có thể bạn sẽ phải cung cấp phương thức của riêng mình, hãy nhớ xóa mọi trình xử lý sự kiện mà plugin đã đăng ký để tránh rò rỉ bộ nhớTích hợp với jQuery Chosen PluginĐể có một ví dụ cụ thể hơn về các khái niệm này, hãy viết một trình bao bọc tối thiểu cho plugin Chosen, plugin này tăng cường đầu vào 3
Đầu tiên, hãy xem Chosen làm gì với DOM Nếu bạn gọi nó trên một nút DOM 3, nó sẽ đọc các thuộc tính của nút DOM ban đầu, ẩn nó bằng một kiểu nội tuyến và sau đó nối thêm một nút DOM riêng biệt với biểu diễn trực quan của chính nó ngay sau 3. Sau đó, nó kích hoạt các sự kiện jQuery để thông báo cho chúng tôi về những thay đổiGiả sử đây là API mà chúng tôi đang phấn đấu với thành phần React trình bao bọc 6 của chúng tôi
Chúng tôi sẽ triển khai nó như một thành phần không được kiểm soát để đơn giản Đầu tiên, chúng tôi sẽ tạo một thành phần trống với phương thức 8 trong đó chúng tôi trả về 3 được bao bọc trong một 9
Lưu ý cách chúng tôi bọc 3 trong một 9 bổ sung. Điều này là cần thiết vì Chosen sẽ nối thêm một phần tử DOM khác ngay sau nút 3 mà chúng ta đã chuyển cho nó. Tuy nhiên, đối với React, 9 luôn chỉ có một con duy nhất. Đây là cách chúng tôi đảm bảo rằng các bản cập nhật React sẽ không xung đột với nút DOM bổ sung do Chosen thêm vào. Điều quan trọng là nếu bạn sửa đổi DOM bên ngoài luồng React, bạn phải đảm bảo React không có lý do gì để chạm vào các nút DOM đóTiếp theo, chúng tôi sẽ triển khai các phương thức vòng đời. Chúng ta cần khởi tạo Chosen với tham chiếu tới nút 3 trong 6 và chia nhỏ nó trong 1 5Dùng thử trên CodePen Lưu ý rằng React không gán ý nghĩa đặc biệt nào cho trường 57. Nó chỉ hoạt động vì trước đây chúng ta đã chỉ định trường này từ một 58 trong phương thức 8 9Điều này là đủ để thành phần của chúng tôi hiển thị, nhưng chúng tôi cũng muốn được thông báo về các thay đổi giá trị. Để làm điều này, chúng tôi sẽ đăng ký sự kiện jQuery 90 trên 3 được quản lý bởi ChosenChúng tôi sẽ không chuyển trực tiếp 92 cho Người được chọn vì các đạo cụ của thành phần có thể thay đổi theo thời gian và điều đó bao gồm các trình xử lý sự kiện. Thay vào đó, chúng tôi sẽ khai báo một phương thức 93 gọi 92 và đăng ký nó vào sự kiện jQuery 90 6Dùng thử trên CodePen Cuối cùng, còn một việc nữa phải làm. Trong React, props có thể thay đổi theo thời gian. Ví dụ: thành phần 6 có thể nhận các phần tử con khác nhau nếu trạng thái của thành phần cha mẹ thay đổi. Điều này có nghĩa là tại các điểm tích hợp, điều quan trọng là chúng ta phải cập nhật DOM theo cách thủ công để đáp ứng các bản cập nhật chống đỡ, vì chúng ta không còn để React quản lý DOM cho chúng ta nữaTài liệu của Chosen gợi ý rằng chúng ta có thể sử dụng API jQuery 97 để thông báo về các thay đổi đối với phần tử DOM ban đầu. Chúng tôi sẽ để React lo việc cập nhật 98 bên trong 3, nhưng chúng tôi cũng sẽ thêm một phương thức vòng đời 60 để thông báo cho Chosen về những thay đổi trong danh sách con 2Bằng cách này, Chosen sẽ biết để cập nhật phần tử DOM của nó khi 3 con do React quản lý thay đổiViệc triển khai hoàn chỉnh thành phần 62 trông như thế này 5Dùng thử trên CodePen Tích hợp với các thư viện View khácReact có thể được nhúng vào các ứng dụng khác nhờ tính linh hoạt của 63Mặc dù React thường được sử dụng khi khởi động để tải một thành phần React gốc duy nhất vào DOM, nhưng 63 cũng có thể được gọi nhiều lần cho các phần độc lập của giao diện người dùng có thể nhỏ như một nút hoặc lớn như một ứng dụngTrên thực tế, đây chính xác là cách React được sử dụng tại Facebook. Điều này cho phép chúng tôi viết các ứng dụng trong React từng phần một và kết hợp chúng với các mẫu do máy chủ tạo hiện tại của chúng tôi và mã phía máy khách khác Thay thế kết xuất dựa trên chuỗi bằng ReactMột mẫu phổ biến trong các ứng dụng web cũ hơn là mô tả các đoạn của DOM dưới dạng một chuỗi và chèn nó vào DOM như vậy. 65. Những điểm này trong một cơ sở mã là hoàn hảo để giới thiệu React. Chỉ cần viết lại kết xuất dựa trên chuỗi dưới dạng thành phần ReactVì vậy, triển khai jQuery sau đây… 9…có thể được viết lại bằng cách sử dụng thành phần React 0Từ đây, bạn có thể bắt đầu chuyển nhiều logic hơn vào thành phần và bắt đầu áp dụng các phương pháp React phổ biến hơn. Ví dụ: trong các thành phần, tốt nhất là không nên dựa vào ID vì cùng một thành phần có thể được kết xuất nhiều lần. Thay vào đó, chúng tôi sẽ sử dụng hệ thống sự kiện React và đăng ký trình xử lý nhấp chuột trực tiếp trên phần tử React 66 0Dùng thử trên CodePen Bạn có thể có bao nhiêu thành phần biệt lập như vậy tùy thích và sử dụng 67 để hiển thị chúng cho các vùng chứa DOM khác nhau. Dần dần, khi bạn chuyển đổi nhiều ứng dụng của mình sang React, bạn sẽ có thể kết hợp chúng thành các thành phần lớn hơn và di chuyển một số lệnh gọi 67 lên cấu trúc phân cấpNhúng React trong Chế độ xem xương sốngChế độ xem xương sống thường sử dụng các chuỗi HTML hoặc các hàm mẫu tạo chuỗi để tạo nội dung cho các phần tử DOM của chúng. Quá trình này cũng có thể được thay thế bằng việc hiển thị một thành phần React Dưới đây, chúng tôi sẽ tạo chế độ xem Xương sống có tên là 69. Nó sẽ ghi đè hàm 8 của Backbone để kết xuất một thành phần React 21 thành phần tử DOM do Backbone ( 57) cung cấp. Ở đây, chúng tôi cũng đang sử dụng 67 1Dùng thử trên CodePen Điều quan trọng là chúng ta cũng gọi 24 trong phương thức 25 để React hủy đăng ký các trình xử lý sự kiện và các tài nguyên khác được liên kết với cây thành phần khi nó được tách raKhi một thành phần bị xóa khỏi cây React, quá trình dọn dẹp được thực hiện tự động, nhưng vì chúng tôi đang xóa toàn bộ cây bằng tay nên chúng tôi phải gọi phương thức này Tích hợp với các lớp mô hìnhMặc dù thông thường nên sử dụng luồng dữ liệu một chiều như trạng thái React, Flux hoặc Redux, nhưng các thành phần React có thể sử dụng lớp mô hình từ các khung và thư viện khác Sử dụng các mô hình xương sống trong các thành phần phản ứngCách đơn giản nhất để sử dụng các mô hình và bộ sưu tập Xương sống từ một thành phần React là lắng nghe các sự kiện thay đổi khác nhau và buộc cập nhật theo cách thủ công Các thành phần chịu trách nhiệm kết xuất các mô hình sẽ lắng nghe các sự kiện 26, trong khi các thành phần chịu trách nhiệm kết xuất các bộ sưu tập sẽ lắng nghe các sự kiện 27 và 28. Trong cả hai trường hợp, hãy gọi 29 để kết xuất lại thành phần với dữ liệu mớiTrong ví dụ bên dưới, thành phần 50 hiển thị bộ sưu tập Xương sống, sử dụng thành phần 51 để hiển thị các mục riêng lẻ 2Dùng thử trên CodePen Trích xuất dữ liệu từ các mô hình xương sốngCách tiếp cận trên yêu cầu các thành phần React của bạn phải biết về các bộ sưu tập và mô hình xương sống. Nếu sau này bạn định chuyển sang một giải pháp quản lý dữ liệu khác, bạn có thể muốn tập trung kiến thức về Backbone vào càng ít phần mã càng tốt Một giải pháp cho vấn đề này là trích xuất các thuộc tính của mô hình dưới dạng dữ liệu thuần túy bất cứ khi nào nó thay đổi và giữ logic này ở một nơi duy nhất. Sau đây là thành phần bậc cao trích xuất tất cả các thuộc tính của mô hình Xương sống thành trạng thái, chuyển dữ liệu đến thành phần được bao bọc Bằng cách này, chỉ thành phần bậc cao hơn mới cần biết về nội bộ mô hình Xương sống và hầu hết các thành phần trong ứng dụng có thể không biết gì về Xương sống Trong ví dụ bên dưới, chúng ta sẽ tạo một bản sao các thuộc tính của mô hình để tạo thành trạng thái ban đầu. Chúng tôi đăng ký sự kiện 90 (và hủy đăng ký khi ngắt kết nối) và khi nó xảy ra, chúng tôi cập nhật trạng thái với các thuộc tính hiện tại của mô hình. Cuối cùng, chúng tôi đảm bảo rằng nếu bản thân giá đỡ 53 thay đổi, chúng tôi không quên hủy đăng ký mô hình cũ và đăng ký mô hình mớiLưu ý rằng ví dụ này không có nghĩa là toàn diện về cách làm việc với Backbone, nhưng nó sẽ cung cấp cho bạn ý tưởng về cách tiếp cận vấn đề này theo cách chung 3Để giải thích cách sử dụng nó, chúng tôi sẽ kết nối thành phần Phản ứng 54 với mô hình Xương sống và cập nhật thuộc tính 55 của nó mỗi khi đầu vào thay đổi 4Dùng thử trên CodePen Kỹ thuật này không giới hạn ở Backbone. Bạn có thể sử dụng React với bất kỳ thư viện mô hình nào bằng cách đăng ký các thay đổi của nó trong các phương thức vòng đời và, tùy chọn, sao chép dữ liệu vào trạng thái React cục bộ |