Trung tâm cá nhân
sách gpt4 ai đã đi

Ba cách để chia sẻ logic thành phần trong React

In lại Tác giả:qq735679552 Thời gian cập nhật: 2022-09-28 22:32:09 27 4
mua khóa gpt4 Nike

CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.

Bài đăng trên blog CFSDN này trình bày chi tiết ba cách chia sẻ logic thành phần trong React. Bài viết được tác giả thu thập và sắp xếp. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Không cần phải nói thêm nữa, ba phương pháp này là: render props, higher-order component và custom Hooks. Sau đây là minh họa từng cái một.

Giả sử có một thành phần TimeOnPage chuyên ghi lại thời gian người dùng ở lại trang hiện tại, như thế này:

?
1
2
3
4
5
6
7
8
9
10
11
12
const Thời gian trên trang = () => {
  const [giây, setSecond] = useState(0);
 
  sử dụngHiệu ứng(() => {
   thiết lập thời gian chờ(() => {
    setSecond(giây + 1);
   }, 1000);
  }, [thứ hai]);
  trở lại (
  
Thời gian dừng: {giây} giây
  );
}

Nếu một thành phần khác cần sử dụng lại chức năng này, chúng ta có thể đóng gói nó để có thể dễ dàng chia sẻ với các thành phần khác không?

Việc nghĩ đến các thành phần con lồng nhau và sử dụng props để truyền tham số là điều tự nhiên.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Child = (props) => {
  trở lại
Thời gian ở lại: {props.stayTime}s
;
};
 
const Thời gian trên trang = () => {
  const [giây, setSecond] = useState(0);
 
  sử dụngHiệu ứng(() => {
   thiết lập thời gian chờ(() => {
    setSecond(giây + 1);
   }, 1000);
  }, [thứ hai]);
  trở lại (
  
   
  
  );
}

Điều này được mã hóa cứng bên trong thành phần TimeOnPage và vẫn chưa đạt được mục tiêu đóng gói và tái sử dụng. Bạn có thấy render props hoạt động như thế nào không?

Render đạo cụ

"render prop" là một kỹ thuật đơn giản để chia sẻ mã giữa các thành phần React bằng cách sử dụng prop có giá trị là một hàm.

Tiếp tục từ bài viết trước, hãy định nghĩa một prop có giá trị hàm trong TimeOnPage. Nếu bạn muốn render một thành phần, chỉ cần trả về nó trong hàm. Tham số hàm là trạng thái bạn muốn chia sẻ.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Child = (props) => {
  trở lại
Thời gian ở lại: {props.stayTime}s
;
};
 
const TimeOnPage = (props) => {
  const [giây, setSecond] = useState(0);
 
  sử dụngHiệu ứng(() => {
   thiết lập thời gian chờ(() => {
    setSecond(giây + 1);
   }, 1000);
  }, [thứ hai]);
  trở lại
{props.render(giây)}
;
};
 

Trên thực tế, render prop là một function prop được sử dụng để cho component biết nội dung nào cần được hiển thị. React Router cũng sử dụng kỹ thuật này.

?
1
2
3
  <đường dẫn="" tuyến="" đường=""> "/trang chủ" render={() =>
Trang chủ
} />

Các thành phần bậc cao hơn

Các thành phần bậc cao (HOC) là một kỹ thuật tiên tiến để tái sử dụng logic thành phần trong React. Bản thân HOC không phải là một phần của React API, mà là một mẫu thiết kế dựa trên các đặc điểm kết hợp của React.

Thành phần bậc cao là hàm có tham số là thành phần A cần được sử dụng lại và giá trị trả về là thành phần mới N. Thành phần N mới dựa trên thành phần A và đã được xử lý một số phần, nhưng bản thân thành phần A sẽ không bị sửa đổi, chỉ có chức năng được cải tiến.

Giả sử có một thành phần danh sách tin tức trông như thế này:

?
1
2
3
4
5
6
7
8
9
10
const Danh sách mới = () => {
  trở lại (
  
   
        
  • Tin tức
    •
        
  • Tin tức
    •
       
      
      );
    }

    Điều này thường được thực hiện nếu bạn muốn hiển thị thành phần hoạt ảnh tải <đang tải=""> trong khi danh sách tin tức đang tải.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const Đang tải = () => {
      // tải hoạt ảnh
    }
    const NewList = ({ isLoading }) => {
      trở lại đang tải ? (
       <đang tải="">
      ) : (
      
       
          
    • Tin tức
      •
          
    • Tin tức
      •
         
        
        );
      };

      Giả sử bây giờ thành phần Bảng cũng muốn hiển thị thành phần hoạt ảnh tải trong quá trình tải dữ liệu, theo một mẫu tương tự.

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      const Đang tải = () => {
        // tải hoạt ảnh
      }
      const DataList = ({ isLoading, ...props }) => {
        trở lại đang tải ? (
         <đang tải="">
        ) : (
        
        );
      };

      Từ những điều trên, bạn sẽ thấy rằng cấu trúc của DataList và NewList cực kỳ giống nhau. Nếu có thành phần thứ ba và thứ tư cần tải, chúng ta có tiếp tục lặp lại mô hình này lần thứ ba và thứ tư không? Đây không phải là cách tiếp cận lý tưởng nhất. Một cách tiếp cận tốt hơn là sử dụng thành phần bậc cao hơn để trừu tượng hóa mẫu này:

      ?
      1
      2
      3
      4
      5
      const WithLoading = (WrappedComponent) => {
        trở lại ({isLoading, ...props}) => {
         trở lại isLoading ? <đang tải=""> : ;
        }
      };

      Sau đó, bạn có thể thêm tải vào chúng riêng biệt mà không cần sửa đổi NewList và DataList.

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      hai mươi mốt
      hai mươi hai
      hai mươi ba
      hai mươi bốn
      const Danh sách mới = () => {
        trở lại (
        
         
            
      • Tin tức
        •
            
      • Tin tức
        •
           
          
          );
        };
         
        const DataList = (props) => {
          trở lại
        };
         
        const WithLoading = (WrappedComponent) => {
          trở lại ({isLoading, ...props}) => {
           trở lại isLoading ? <đang tải=""> : ;
          }
        };
        // NewList với tải
        const WithLoadingNewList = WithLoading()
        // DataList với tải
        const WithLoadingDataList = WithLoading()

        Móc tùy chỉnh

        Hook là tính năng mới trong React 16.8. Nó cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết lớp.

        React Hooks bao gồm useState, useEffect, v.v. Tất cả đều là hàm. Custom Hook cũng là một hàm. Tên của nó cũng bắt đầu bằng use. Các Hook khác có thể được gọi bên trong hàm. Không giống như các thành phần React, Hook tùy chỉnh không phải trả về giá trị. Không giống như các hàm thông thường, Hook tùy chỉnh có thể gọi các Hook khác, trong khi các hàm thông thường thì không thể.

        Khi viết logic kinh doanh, một số phương thức có thể tái sử dụng thường được định nghĩa là các hàm công cụ, sau đó có thể được tái sử dụng ở mọi nơi. Tương tự như vậy, bằng cách tùy chỉnh Hooks, bạn có thể trích xuất logic thành phần thành các hàm có thể tái sử dụng. Việc chọn Hook tùy chỉnh hay hàm công cụ phụ thuộc vào việc logic thành phần cần trích xuất có cần sử dụng Hook khác hay không. Nếu vậy, hãy chọn Hook tùy chỉnh, nếu không hãy sử dụng hàm công cụ.

        Quay lại thành phần TimeOnPage đầu tiên trong bài viết này và thay đổi nó thành Hook tùy chỉnh.

        ?
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        const useTimeOnPage = () => {
          const [giây, setSecond] = useState(0);
         
          sử dụngHiệu ứng(() => {
           thiết lập thời gian chờ(() => {
            setSecond(giây + 1);
           }, 1000);
          }, [thứ hai]);
          trở lại thứ hai;
        }

        Hướng dẫn:

        ?
        1
        2
        3
        4
        const Bản trình bày = () => {
          const stayTime = useTimeOnPage();
          trở lại
        Thời gian lưu lại trang hiện tại: {stayTime} giây
        }

        Tóm tắt

        Ba cách chia sẻ logic thành phần có các tình huống áp dụng riêng: render props phù hợp để chia sẻ các thành phần cha với các thành phần con/phần tử con khác nhau. Các "khe" của các thành phần con/phần tử con đã được xác định và chỉ có thể được render tại các vị trí được chỉ định; các thành phần bậc cao phù hợp để mở rộng các thành phần mà không cần sửa đổi các thành phần gốc; các hàm thuần túy về cơ bản có thể làm những gì các Hook tùy chỉnh có thể làm, nhưng đôi khi việc triển khai bằng các Hook tùy chỉnh sẽ thuận tiện và nhanh hơn. Liên kết đến bài viết này: Github.

         Đây là phần cuối của bài viết này về ba cách chia sẻ logic thành phần trong React. Để biết thêm nội dung về logic thành phần chia sẻ của React, vui lòng tìm kiếm các bài viết trước của tôi hoặc tiếp tục duyệt các bài viết liên quan sau. Tôi hy vọng bạn sẽ ủng hộ tôi trong tương lai! .

        Liên kết gốc: https://juejin.cn/post/6905229862856818695.

        Cuối cùng, bài viết này về ba cách chia sẻ logic thành phần trong React đã kết thúc. Nếu bạn muốn biết thêm về ba cách chia sẻ logic thành phần trong React, vui lòng tìm kiếm các bài viết trên CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

        27 4 0
        qq735679552
        Hồ sơ cá nhân

        Tôi là một lập trình viên xuất sắc, rất giỏi!

        Nhận phiếu giảm giá Didi Taxi miễn phí
        Mã giảm giá Didi Taxi
        Các bài viết nóng hổi trên toàn bộ trang web
        Giấy chứng nhận ICP Bắc Kinh số 000000
        Hợp tác quảng cáo: 1813099741@qq.com 6ren.com