HomeLập trìnhJavaScriptThành phần chức...

Thành phần chức năng trong JavaScript


Thành phần chức năng là ứng dụng theo chiều dọc của một chức năng cho kết quả của một chức năng khác. Các nhà phát triển làm điều đó theo cách thủ công mỗi ngày khi họ lồng các chức năng:

compose = (fn1, fn2) => value => fn2(fn1(value))

Nhưng điều này là khó đọc. Có một cách tốt hơn là sử dụng thành phần chức năng. Thay vì đọc chúng từ trong ra ngoài:

add2AndSquare = (n) => square(add2(n))

Chúng ta có thể sử dụng hàm bậc cao hơn để xâu chuỗi chúng theo cách có thứ tự.

add2AndSquare = compose( add2, square)

Một triển khai đơn giản của soạn thảo sẽ là:

compose = (f1, f2) => value => f2( f1(value) );

Để linh hoạt hơn nữa, chúng ta có thể sử dụng hàm lessRight:

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);

Đọc soạn từ trái sang phải cho phép xâu chuỗi rõ ràng các hàm bậc cao hơn. Các ví dụ trong thế giới thực đang thêm xác thực, ghi nhật ký và thuộc tính ngữ cảnh. Đó là một kỹ thuật cho phép tái sử dụng ở mức cao nhất. Dưới đây là một số ví dụ về cách sử dụng nó:

// example
const add2        = (n) => n + 2;
const times2      = (n) => n * 2;
const times2add2  = compose(add2, times2);
const add6        = compose(add2, add2, add2);

times2add2(2);  // 6
add2tiems2(2);  // 8
add6(2);        // 8

Bạn có thể nghĩ rằng đây là lập trình chức năng nâng cao và nó không phù hợp với lập trình giao diện người dùng. Nhưng nó cũng hữu ích trong Ứng dụng Trang đơn. Ví dụ: bạn có thể thêm hành vi vào thành phần React bằng cách sử dụng các thành phần bậc cao hơn:

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  return InputComponent;
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);

Tóm lại, thành phần chức năng cho phép tái sử dụng chức năng ở mức rất cao. Nếu các chức năng được cấu trúc tốt, nó cho phép các nhà phát triển tạo hành vi mới dựa trên hành vi hiện có.

Đọc thêm  Cách phân biệt giữa bản sao sâu và nông trong JavaScript

Nó cũng làm tăng khả năng đọc của việc thực hiện. Thay vì lồng các hàm vào nhau, bạn có thể xâu chuỗi các hàm một cách rõ ràng và tạo các hàm bậc cao hơn với các tên có ý nghĩa.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status