Top 3 React Design Pattern mà bạn nên biết trong năm 2022

React được cho là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng và một lý do giải thích cho điều này là bản chất không đơn giản hóa của nó. Cho dù bạn chọn xem React là một khuôn khổ hay thư viện, một điều có thể đồng ý là cách tiếp cận hợp lý của nó đối với cách các nhà phát triển nên xây dựng các ứng dụng phản ứng, cho phép các nhà phát triển và nhóm nhà phát triển tự do quyết định cách họ muốn ứng dụng của mình. làm ra. Sau khi làm việc trên các ứng dụng React khác nhau với các nhóm khác nhau và nghiên cứu các ứng dụng React khác được xây dựng, bạn nhận thấy một số mẫu thiết kế phổ biến.

Trong bài viết này, chúng ta sẽ xem xét ba mẫu thiết kế phổ biến để xây dựng các ứng dụng React.

1. Presentational and Container Component Pattern

Đây là một mô hình được đặt ra bởi Dan Abramov . Trong mẫu này, các thành phần được chia thành:

• Presentation Components : Đây là các thành phần chịu trách nhiệm về giao diện người dùng. Chúng không có bất kỳ phụ thuộc nào với bất kỳ phần nào của ứng dụng và được sử dụng để hiển thị dữ liệu. Một ví dụ là danh sách:

const ItemsList = (props) => {

    return (

    <ul>

        {props.items.map((item) => (

        <li key={item.id}>

            <a href={item.url}>{item.name}</a>

        </li>

        ))}

    </ul>

    );

};

Trong ví dụ trên, ItemsListthành phần của chúng ta chỉ chịu trách nhiệm hiển thị dữ liệu được truyền như propstrên giao diện Người dùng. Các thành phần trình bày cũng được gọi là các thành phần chức năng không trạng thái nhưng cũng có thể được viết dưới dạng các thành phần lớp và có thể chứa trạng thái liên quan đến giao diện người dùng

class TextInput extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      value: ""

    };

  }

  render() {

    return (

      <input

        value={this.state.value}

        onChange={(event) => this.setState({ value: event.target.value })}

      />

    );

  }

}

Container Components:  Không giống như các thành phần trình bày, các thành phần vùng chứa chịu trách nhiệm nhiều hơn về cách mọi thứ hoạt động. Chúng thường là các thành phần lớp chứa các phương thức vòng đời và các thành phần Trình bày. Nó cũng là nơi diễn ra quá trình tìm nạp dữ liệu.

class TvShowsContainer extends React.Component {

      constructor(props) {

        super(props);

        this.state = {

          shows: [],

          loading: false,

          error: ""

        };

      }

      componentDidMount() {

        this.setState({ loading: true, error: "" });

        fetch("https://api.tvmaze.com/schedule/web?date=2020-05-29")

          .then((res) => res.json())

          .then((data) => this.setState({ loading: false, shows: data }))

          .catch((error) =>

            this.setState({ loading: false, error: error.message || error })

          );

      }

      render() {

        const { loading, error, shows } = this.state;

        return (

          <div>

            <h1> Tv Shows </h1>

            {loading && <p>Loading...</p>}

            {!loading && shows && <ItemsList items={shows} />}

            {!loading && error && <p>{error}</p>}

          </div>

        );

      }

    }

>>> Đọc thêm: Làm thế nào để chuẩn bị phỏng vấn React.js vào năm 2022

Provider Pattern

Một vấn đề lớn mà các nhà phát triển React phải đối mặt là việc khoan Prop. Khoan nâng đỡ là một kịch bản trong đó dữ liệu (đạo cụ) được truyền cho các thành phần khác nhau cho đến khi nó đến được thành phần cần có giá đỡ. Mặc dù chống khoan không phải là xấu, nhưng nó sẽ trở thành một vấn đề khi các thành phần không liên quan chia sẻ dữ liệu đưa chúng ta đến mô hình Nhà cung cấp. Mẫu nhà cung cấp cho phép chúng ta lưu trữ dữ liệu ở vị trí trung tâm, ví dụ như đối tượng React Context và cửa hàng Redux. Sau đó, Nhà cung cấp / Cửa hàng ngữ cảnh có thể chuyển trực tiếp dữ liệu này đến bất kỳ thành phần nào cần đến nó mà không cần công cụ hỗ trợ.

Hãy tưởng tượng việc triển khai chế độ tối cho một ứng dụng web và làm cho các thành phần không liên quan phản ứng với một thay đổi chủ đề được kích hoạt bởi một thành phần khác. Chúng ta có thể đạt được điều đó bằng cách sử dụng mẫu Nhà cung cấp. Chúng tôi tạo một đối tượng ngữ cảnh React để lưu trữ giá trị của chủ đề.

import { createContext } from "react";

2const ThemeContext = createContext({

3  theme: "light",

4  setTheme: () => {}

5});

>>> Đọc thêm: Top 4 Alternative UI framework phổ biến nhất trong năm 2022

Compound Components Pattern

Các thành phần phức hợp là các thành phần có chung một trạng thái và làm việc cùng nhau để đạt được một mục tiêu chung. Một ví dụ là phần tử <select>và <option>HTML. Khi kết hợp, chúng tạo ra một menu thả xuống, nhưng chúng không đạt được nhiều thành tựu của riêng chúng.

Mẫu Compound Components được sử dụng trong các thư viện React UI phổ biến, ví dụ như Ant Design và Material UI. Dưới đây là cách triển khai thành phần Menu trong Material UI

import * as React from 'react';

import Menu from '@mui/material/Menu';

import MenuItem from '@mui/material/MenuItem';




export default function MaterialMenu() {

  return (

    <div>

      <Button> Menu </Button>

      <Menu>

        <MenuItem>Profile</MenuItem>

        <MenuItem>My account</MenuItem>

        <MenuItem>Logout</MenuItem>

      </Menu>

    </div>

  );

}

Nếu không có các thành phần ghép, chúng ta sẽ phải chuyển các đạo cụ cho thành phần mẹ và sau đó thành phần mẹ chuyển dữ liệu xuống cho các thành phần con

<Menu items={['Profile','My account', 'Logout']} />

Ở trên trông có vẻ đơn giản, nhưng chúng tôi bắt đầu gặp vấn đề khi chuyển nhiều đạo cụ xuống thành phần con. Ví dụ: hãy tưởng tượng chúng ta muốn có một mục menu được chọn mặc định.

<Menu items={['Profile','My account', 'Logout']} defaultSelected={1} />

>>> Tham khảo khóa học lập trình ReactJS tại Viện CNTT T3H