Sự khác biệt giữa thành phần và container trong phản ứng redux

Sự khác biệt giữa thành phần và container trong phản ứng redux là gì?

Componentlà một phần của API React. Thành phần là một lớp hoặc chức năng mô tả một phần của UI React.

Container là một thuật ngữ không chính thức cho một thành phần React được connectchuyển đến một cửa hàng redux. Các container nhận các cập nhật và dispatchhành động trạng thái Redux và chúng thường không hiển thị các phần tử DOM; họ ủy thác kết xuất cho các thành phần con trình bày .

Để biết thêm chi tiết đọc phần trình bày so với các thành phần container của Dan Abramov.

Thành phần chịu trách nhiệm tìm nạp dữ liệu và hiển thị được gọi là thành phần thông minh hoặc bộ chứa. Dữ liệu có thể được lấy từ redux, bất kỳ cuộc gọi mạng hoặc thuê bao của bên thứ ba.

Các thành phần câm / trình bày là những thành phần chịu trách nhiệm trình bày quan điểm dựa trên các đạo cụ nhận được.

Bài viết hay với ví dụ ở đây

https://www.cronj.com/blog/difference-container-component-react-js/

Các thành phần xây dựng một phần của khung nhìn, do đó, nó sẽ hiển thị các phần tử DOM, đưa nội dung lên màn hình.

Các container tham gia vào quá trình xây dựng dữ liệu, do đó, nó sẽ "nói chuyện" với redux, bởi vì nó sẽ cần phải sửa đổi trạng thái. Vì vậy, bạn nên bao gồm kết nối (Reac-redux) những gì nó tạo ra kết nối và các chức năng mapStateToProps và mapDispatchToProps :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

Các thành phần

Các thành phần cho phép bạn chia UI thành các phần độc lập, có thể tái sử dụng và suy nghĩ về từng phần riêng lẻ. Chúng đôi khi được gọi là "các thành phần trình bày" và mối quan tâm chính là mọi thứ trông như thế nào

Hộp đựng

Các container giống như các thành phần không có UI và Container có liên quan đến cách mọi thứ hoạt động. . Nó chủ yếu nói chuyện với các cửa hàng redux để nhận và cập nhật dữ liệu

xem bảng so sánh từ tài liệu Redux

Giải thích chi tiết https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Cả hai đều là thành phần; các thùng chứa là chức năng, vì vậy chúng không tự hiển thị bất kỳ html nào, và sau đó bạn cũng có các thành phần trình bày, nơi bạn viết html thực tế. Mục đích của container là ánh xạ trạng thái và gửi đến các đạo cụ cho thành phần trình bày.

Đọc thêm: Liên kết

React, Redux là những thư viện độc lập.

React cung cấp cho bạn một khung để tạo tài liệu HTML. Các thành phần theo cách đại diện cho một phần cụ thể của tài liệu. Các phương thức được liên kết với một thành phần sau đó có thể thao tác phần rất đặc biệt của tài liệu.

Redux là một khung quy định một triết lý cụ thể để lưu trữ và quản lý dữ liệu trong môi trường JS. Nó là một đối tượng JS lớn với các phương thức nhất định được xác định, trường hợp sử dụng tốt nhất xuất hiện dưới dạng quản lý trạng thái của ứng dụng web.

Vì React quy định rằng tất cả dữ liệu sẽ chảy từ gốc xuống lá, nên việc tẻ nhạt tất cả các đạo cụ, xác định đạo cụ trong các thành phần và sau đó chuyển đạo cụ cho các đạo cụ nhất định cho trẻ em trở nên tẻ nhạt. Nó cũng làm cho toàn bộ trạng thái ứng dụng dễ bị tổn thương.

React Redux cung cấp một giải pháp sạch, trong đó nó kết nối trực tiếp bạn với cửa hàng Redux, chỉ bằng cách gói thành phần được kết nối xung quanh Thành phần React khác (của bạn Container). Vì trong triển khai của bạn, triển khai của bạn, bạn đã xác định phần nào của toàn bộ trạng thái ứng dụng bạn yêu cầu. Vì vậy, connectlấy dữ liệu đó ra khỏi cửa hàng và chuyển nó dưới dạng đạo cụ cho thành phần mà nó tự đóng gói.

Hãy xem xét ví dụ đơn giản này:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connectchức năng vượt qua một prop type.

Bằng cách này, một kết nối đóng vai trò là bộ chứa cho thành phần Person.

React có hai thành phần chính đầu tiên là thành phần thông minh (thùng chứa) và thứ hai là câm (thành phần trình bày). Các container rất giống với các thành phần, sự khác biệt duy nhất là các container nhận thức được trạng thái ứng dụng. Nếu một phần của trang web của bạn chỉ được sử dụng để hiển thị dữ liệu (câm) thì hãy biến nó thành một thành phần. Nếu bạn cần nó phải thông minh và nhận thức được trạng thái (bất cứ khi nào dữ liệu thay đổi) trong ứng dụng thì hãy biến nó thành một thùng chứa.