Giới thiệu một thư viện cung cấp những tiện ích tuyệt vời cho React Component.

Trong giới dev FE thì chắc không ai lạ về ReactJS nữa rồi, một framework tuyệt vời để build một web application. Hôm nay mình sẽ không nói nhiều về ReactJS nữa(Vì bác Google đã có hết cho các bạn rồi =.=!). Hôm nay mình sẽ nói về higher-order component (HOC) trong React nhé! Và đồng thời mình cũng sẽ giới thiệu cho các bạn về thư viện cung cấp những HOC này là Recompose. Thôi không luyên thuyên nữa tốn time quá mình bắt đầu luôn nhé.

1. Higher-Order Components

Thì mình sẽ nói một chút về HOC nhé! HOC là một kỹ thuật trong ReactJS nhằm mục đích để chúng ta có thể reuse component logic và sử dụng chúng ở nhiều nơi. Lưu ý nhé kỹ thuật này không phải một phần của ReactJS đâu nhé! Nó giống như một pattern thôi. Và cụ thể hơn thì thực chất HOC bản thân nó là một function, nó nhận đầu vào là một component và cũng đồng thời trả về một component mới, component mới này sẽ được thêm mắm muối vào để trở nên ngon hơn =]].

Với HOC các bạn có rất nhiều cách để thêm mắm, muối, ... Các bạn có thể handle lifecycle trong này, thêm props để xử lý gì đó, ... rất rất nhiều tùy vào tình huống mà các bạn gặp phải. Và lưu ý là không bao giờ được biến đổi component được truyền vào nhé, việc biến đổi này sẽ làm chúng ta dễ lạc lối lắm đấy =]]. Vì HOC bản chất nó là một function nên các bạn có thế truyến thêm tham số vào dùng như một config, option cho nhiều trường hợp (vd trong app của bạn có 2 page Home và About, bạn muốn chạy loading animation trước khi load vào page chắng hạn và bạn muốn ở page Home thì sẽ run loading trong 1s rùi mới load vào page, còn ở page About thì 0.5s. Lúc này bạn cần phải tạo một function nhận vào 1 tham số là delay và trả về một HOC nhé). Còn một số lưu ý nữa nhưng có lẽ mình đã hơi lạc lối vào HOC quá nhiều rồi. Các bạn có thêm tham khảo thêm ở đây nhé. Chúng ta sẽ đi tiếp vào phần chính nhé!

2. Giới thiệu về thư viện Recompose

Yeah, vâng và chúng ta đã trở lại con vấn đề chính của ngày hôm nay (cứ tưởng đã lạc rồi chứ =]]). Phần trước mình có giới thiệu cho các bạn về HOC rồi, phần này thì sẽ nói về Recompose nhé! Các bạn hãy tưởng tưởng khi mình code HOC chay á cũng giống như việc các bạn đang làm ruộng với những công cụ thô sơ vậy. Và chúng ta cần những công cụ, máy móc tiến tiến hơn để làm ruộng. Vậy Recompose sẽ cung cấp cho các bạn điều đó nhé! Khi sử dụng Recompose bạn sẽ cảm thấy dễ sống hơn và cuộc sống lúc này sẽ có màu hường nhé =]].

Đây là link github của Recompose nhé! Thư viện này cung cấp rất nhiều function component và đặc biệt là HOC dùng trong việc code ReactJS thường ngày. Đơn giản như việc validate prop types và set default props chẳng hạn thay vì việc bạn đặt nó trong cùng một file và code thì quá dài, lại phải tìm, thay vì vậy thì bạn hãy define một component nữa dùng cho việc định nghĩa những props type và default props chẳng hạn, Recompose có cung cấp cho các bạn 2 HOC để làm việc đó là setPropTypes() và defaultProps(). Hay chỉ là tách riêng việc khai báo state và handle nó Recompose cũng cung cấp withState() và withStateHandlers() cũng như việc thêm những handle trong component của bạn như withHandlers(). Hay bạn muốn chú trọng vào việc performance của app hay dùng thử onlyUpdateForKeys() nếu bạn muốn xử lý rerender lại nếu những key bạn đã định nghĩa này thay đổi, hoặc có thể động bộ với props thay vì key onlyUpdateForPropTypes(). Kể cả define lifecycle Recompose cũng cung cấp cho các bạn HOC lifecycle(). Và còn rất rất nhiều nữa nhé! Nếu các bạn băn khoăn dùng quả nhiều thì sẽ phải hoc1(hoc2(...hocn)))(component) thì Recompose cũng cung cấp một function để xử lý nhé compose().

Chắc các bạn cũng biết hoặc nghe về Redux rồi đúng không! Vậy các bạn cũng có thể biết điều này function connect trong Redux thực chất là một HOC nhé =]]. Và về React Router nữa, trong thư viện này cũng có cung cấp HOC như là withRouter chẳng hạn. Yeah điều mình muốn nói ở đây là HOC được sử dụng rất nhiều nhé! Và Recompose nó chỉ cung cấp thôi. Hay viết những HOC của riêng mình nhé! Những bác nông dân nhà mình còn có những lúc làm ra những máy móc mạng lại giá trị tuyệt vời mà =]].

3. Kết bài

Vâng và cuối cũng cũng đến hồi kết rồi =]]. Thì mình cũng đã nói một tý về HOC và hoàn thành mục tiêu của bài viết này là giới thiệu cho các bạn về thư viện Recompose. Cuối bài mình chỉ muốn nói vài câu kết thôi. Về vấn đề HOC thì mình khuyên các bạn nên sử dụng nhiều nhé, ý là nhiều trong tùy tình huống nữa nhé, vì có một số lưu ý nhẹ về HOC mà mình chưa đề cập ở đây nên các bạn chịu khó đọc thêm tẹo để hiểu rõ core của nó nhé, những doc trên trang của ReactJS giúp bạn rất nhiều đấy nếu các bạn để ý kỹ. Mà thôi các bạn à, có những lúc phải thử ăn vả mới biết vả đau như thế nào (haiz). Còn về thư viện Recompose thì quá ngon rồi chỉ là các bạn áp đụng như thế nào vào code của mình thôi, à quên gợi ý cho các bạn khi sử dụng onlyUpdateForKeys() và onlyUpdateForPropTypes() nhé là đọc kỹ chỗ shallowEqual nhé! Một câu nữa thôi chúc các bạn sẽ luôn vui vẻ trong việc sử dụng HOC trong ReacJS nhé! Chào thân ái và hẹn gặp lại trong những bài viết sau!