React: Các thành phần trình bày so với vùng chứa

Sự khác biệt giữa các thành phần trình bày và vùng chứa trong React

Trong React, các thành phần thường được chia thành 2 nhóm lớn:thành phần trình bàythành phần container.

Mỗi người trong số họ có những đặc điểm riêng biệt.

Các thành phần trình bày chủ yếu quan tâm đến việc tạo ra một số đánh dấu được xuất ra.

Họ không quản lý bất kỳ loại trạng thái nào, ngoại trừ trạng thái liên quan đến bản trình bày

Các thành phần vùng chứa chủ yếu liên quan đến các hoạt động “phụ trợ”.

Chúng có thể xử lý trạng thái của các thành phần phụ khác nhau. Chúng có thể bao bọc một số thành phần thuyết trình. Họ có thể giao tiếp vớiRedux.

Như một cách để đơn giản hóa sự phân biệt, chúng ta có thể nóicác thành phần trình bày liên quan đến giao diện,các thành phần container quan tâm đến việc làm cho mọi thứ hoạt động.

Ví dụ, đây là một thành phần trình bày. Nó lấy dữ liệu từ các đạo cụ và chỉ tập trung vào việc hiển thị một phần tử:

const Users = props => (
  <ul>
    {props.users.map(user => (
      <li>{user}</li>
    ))}
  </ul>
)

Mặt khác, đây là một thành phần container. Nó quản lý và lưu trữ dữ liệu của chính nó, và sử dụng thành phần trình bày để hiển thị nó.

class UsersContainer extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }

componentDidMount() { axios.get(’/users’).then(users => this.setState({ users: users })) ) }

render() { return <Users users={this.state.users} /> } }

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: