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
Tích hợp với các plugin thao tác DOM
React 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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Cá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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Để ngăn React chạm vào DOM sau khi cài đặt, chúng tôi sẽ trả về một
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}class SomePlugin extends React.Component {
componentDidMount[] {
this.$el = $[this.el]; this.$el.somePlugin[]; }
componentWillUnmount[] {
this.$el.somePlugin['destroy']; }
render[] {
return this.el = el} />; }
}Lưu ý rằng chúng tôi đã xác định cả hai phương pháp vòng đời
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}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
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}Ghi chú
Chỉ vì nó khả thi, không có nghĩa đó là cách tiếp cận tốt nhất cho các ứng dụng React. Chúng tôi khuyến khích bạn sử dụng các thành phần React khi bạn có thể. Các thành phần React dễ sử dụng lại hơn trong các ứng dụng React và thường cung cấp nhiều quyền kiểm soát hơn đối với hành vi và giao diện của chúng
Đầ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
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}Giả 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
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}Lưu ý cách chúng tôi bọc
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}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
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dùng thử trên CodePen
Lưu ý rằng React không gán ý nghĩa đặc biệt nào cho trường
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Đ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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}Chúng tôi sẽ không chuyển trực tiếp
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dù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
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}Tài liệu của Chosen gợi ý rằng chúng ta có thể sử dụng API jQuery
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Bằng cách này, Chosen sẽ biết để cập nhật phần tử DOM của nó khi
class Chosen extends React.Component {
render[] {
return [
this.el = el}> {this.props.children}
];
}
}Việc triển khai hoàn chỉnh thành phần
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dùng thử trên CodePen
Tích hợp với các thư viện View khác
React có thể được nhúng vào các ứng dụng khác nhờ tính linh hoạt của
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Mặ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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Trê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 React
Mộ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.
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Vì vậy, triển khai jQuery sau đây…
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}…có thể được viết lại bằng cách sử dụng thành phần React
class SomePlugin extends React.Component {
componentDidMount[] {
this.$el = $[this.el]; this.$el.somePlugin[]; }
componentWillUnmount[] {
this.$el.somePlugin['destroy']; }
render[] {
return this.el = el} />; }
}Từ đâ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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dù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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Nhúng React trong Chế độ xem xương sống
Chế độ 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à
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dùng thử trên CodePen
Điều quan trọng là chúng ta cũng gọi
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Khi 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ình
Mặ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 ứng
Cá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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Trong ví dụ bên dưới, thành phần
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dùng thử trên CodePen
Trích xuất dữ liệu từ các mô hình xương sống
Cá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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Lư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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Để 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
function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}function Example[] {
return [
console.log[value]}>
vanilla
chocolate
strawberry
];
}Dù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ộ