1. Mở đầu
Trong vòng vài năm gần đây hooks đang được rất ưa chuộng trong đội ngũ reactjs, một trong những lý do chính đó là sự thuận tiện, ngắn gọn tuyệt vời mà nó mang lại. Hơn thế nữa chúng ta hoàn toàn có thể có thêm lựa chọn để chia code một cách tường minh. Một trong số cách tuyệt vời đó là custom hooks.
2, Custom Hooks là gì và ví dụ:
Có thể hiểu đơn giản custom hooks là một cách chia code dẽ dàng và hiệu quả.
Ok trong một dự án các bạn sẽ thấy có một file .eslintrc, file này sẽ quy định các quy tắc viết code của bạn, thường để đảm bảo tính tường minh và dễ bảo trì thì độ dài của một file sẽ vào khoảng 200 dòng. Nó đảm bảo bạn sẽ chia các đoạn code theo từng tác vụ mà nó thực hiện, nếu bạn chỉ đơn giản viết tách ra một componenter và import vào thì đơn giản nhưng bạn sẽ phải lặp lại đoạn import thư viện, defaul value vv… khá là nhiều công việc phải lặp lại đúng không nào. Thay vì đó bạn có thể tạo ra một custorm hooks và viết tất cả chúng vào, khi nào cần chỉ cần useNameHook đó vào là song.
Để thấy rõ vấn đề này chúng ta sẽ cùng đi vào một số ví dụ để thấy được sự thú vị của hàm này nhé.
Đầu tiên mình muốn vẽ một table, chúng ta sẽ có một đoạn code như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 | <span class="token keyword">const</span> <span class="token function-variable function">Table</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> Data<span class="token punctuation">,</span> paginate<span class="token punctuation">,</span> <span class="token keyword">delete</span><span class="token punctuation">,</span> fetch<span class="token punctuation">,</span> search<span class="token punctuation">,</span> id<span class="token punctuation">,</span> authUser<span class="token punctuation">,</span> updateStatus<span class="token punctuation">,</span> userProject<span class="token punctuation">,</span> roleUser <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span>Option<span class="token punctuation">}</span> <span class="token operator">=</span> Select<span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">renderTagSeverity</span><span class="token punctuation">(</span>severity<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>severity<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'critical'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'#991aff'</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'high'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'#f80000'</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'medium'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'#fb9900'</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'low'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'rgb(195, 195, 32)'</span><span class="token punctuation">;</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'red'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">checkShowStatus</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token constant">PROCESS</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">PROCESS</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token constant">APPROVED</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">APPROVED</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token constant">REJECT</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">REJECT</span><span class="token punctuation">;</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">PROCESS</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">getColumn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Severity'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'severity'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Impact'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'impact'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Owner'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'username'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'16%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Status'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'status'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'15%'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token function">showSelectWithRole</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'14%'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">return</span> columns<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> value<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">updateStatus</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id<span class="token punctuation">:</span> record<span class="token punctuation">.</span>key<span class="token punctuation">,</span> status<span class="token punctuation">:</span> value<span class="token punctuation">,</span> userId<span class="token punctuation">:</span> authUser<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handlePageChange</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>id<span class="token punctuation">,</span> search<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token operator">...</span>search<span class="token punctuation">,</span> page<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">confirm</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">delete</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">showSelectWithRole</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> userCreateId <span class="token operator">=</span> <span class="token function">record</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user_id'</span><span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>roleUser <span class="token operator">===</span> <span class="token constant">ADMIN</span> <span class="token operator">||</span> userProject <span class="token operator">===</span> <span class="token constant">PM</span> <span class="token operator">||</span> userCreateId <span class="token operator">===</span> authUser<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>Select name<span class="token operator">=</span><span class="token string">'status'</span> defaultValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">checkShowStatus</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">140</span><span class="token punctuation">}</span><span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>value <span class="token operator">=></span> <span class="token function">handleChange</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">PROCESS</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token constant">PROCESS</span><span class="token operator"><</span><span class="token operator">/</span>Option<span class="token operator">></span> <span class="token operator"><</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">APPROVED</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token constant">APPROVED</span><span class="token operator"><</span><span class="token operator">/</span>Option<span class="token operator">></span> <span class="token operator"><</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">REJECT</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token constant">REJECT</span><span class="token operator"><</span><span class="token operator">/</span>Option<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Select<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>Select name<span class="token operator">=</span><span class="token string">'status'</span> defaultValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">checkShowStatus</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>value <span class="token operator">=></span> <span class="token function">handleChange</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">}</span> disabled showArrow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">PROCESS</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token constant">PROCESS</span><span class="token operator"><</span><span class="token operator">/</span>Option<span class="token operator">></span> <span class="token operator"><</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">APPROVED</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token constant">APPROVED</span><span class="token operator"><</span><span class="token operator">/</span>Option<span class="token operator">></span> <span class="token operator"><</span>Option value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token constant">REJECT</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token constant">REJECT</span><span class="token operator"><</span><span class="token operator">/</span>Option<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Select<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">checkRole</span><span class="token punctuation">(</span>userId<span class="token punctuation">,</span> id<span class="token punctuation">,</span> idProject<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>userId <span class="token operator">===</span> authUser<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>Tooltip title<span class="token operator">=</span><span class="token string">'Edit'</span> placement<span class="token operator">=</span><span class="token string">'top'</span><span class="token operator">></span> <span class="token operator"><</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`/project/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>idProject<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/edit/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>Button<span class="token operator">></span> <span class="token operator"><</span>EditOutlined <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Tooltip<span class="token operator">></span> <span class="token operator"><</span>Popconfirm title<span class="token operator">=</span><span class="token string">'Are you sure delete this security vulnerability?'</span> onConfirm<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">confirm</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span> okText<span class="token operator">=</span><span class="token string">'Yes'</span> cancelText<span class="token operator">=</span><span class="token string">'No'</span> <span class="token operator">></span> <span class="token operator"><</span>Tooltip title<span class="token operator">=</span><span class="token string">'Delete'</span> placement<span class="token operator">=</span><span class="token string">'top'</span><span class="token operator">></span> <span class="token operator"><</span>Button danger<span class="token operator">></span> <span class="token operator"><</span>DeleteOutlined <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Tooltip<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Popconfirm<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> dataTable <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> Data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> dataTable<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'id'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> severity<span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator"><</span>span<span class="token operator">></span> <span class="token operator"><</span>Tag color<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">renderTagSeverity</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'severity'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'severity'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>Tag<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">,</span> score<span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator"><</span>span<span class="token operator">></span> <span class="token operator"><</span>a style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">'#01a9ac'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> href<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span> target<span class="token operator">=</span><span class="token string">'__blank'</span> <span class="token operator">></span> <span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">,</span> impact<span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator"><</span>span<span class="token operator">></span> <span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'impact'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">,</span> username<span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator"><</span>span<span class="token operator">></span> <span class="token punctuation">{</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user_id'</span><span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">,</span> status<span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator"><</span>span<span class="token operator">></span> <span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">,</span> action<span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token function">checkRole</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user_id'</span><span class="token punctuation">,</span> <span class="token string">'id'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> dataTable<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token function">getColumn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span><span class="token operator">></span> <span class="token operator"><</span>Table dataSource<span class="token operator">=</span><span class="token punctuation">{</span>dataTable<span class="token punctuation">}</span> columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span> scroll<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>y<span class="token punctuation">:</span> <span class="token string">'55vh'</span><span class="token punctuation">}</span><span class="token punctuation">}</span> pagination<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token punctuation">{</span> defaultPageSize<span class="token punctuation">:</span> pagination<span class="token punctuation">.</span>pageSize<span class="token punctuation">,</span> pageSize<span class="token punctuation">:</span> paginate<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'perPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> defaultCurrent<span class="token punctuation">:</span> pagination<span class="token punctuation">.</span>currentPage<span class="token punctuation">,</span> current<span class="token punctuation">:</span> paginate<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'currentPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> total<span class="token punctuation">:</span> paginate<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'total'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> showSizeChanger<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> onChange<span class="token punctuation">:</span> page <span class="token operator">=></span> <span class="token function">handlePageChange</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
với Data là dữ liệu mình muốn render ra, paginate là phân trang, và các hàm delete, fetch, search, id, authUser, updateStatus, userProject, roleUser là các hàm sử lý của mình. Các bạn không cần quá quan tâm xem nó thực hiện các tác vụ gì, mà thực ra từ cái tên các bạn đã dễ dàng nhận ra nó để làm gì rồi. Vấn đề mình muốn nói tới ở đây dù mình đã đặt tên khá tường mình nhưng thật khó để các bạn heo dõi luồng xử lý logic của mình.
thay vì đó mình sẽ tách các một số hàm trên thành một file đặt tên là: useSupportHook.js các bạn chú ý lên đặt tên có phần use đằng trước nhé. Và mình có đoạn nột dung như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">PROCESS</span><span class="token punctuation">,</span> <span class="token constant">APPROVED</span><span class="token punctuation">,</span> <span class="token constant">REJECT</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'~/utils/status'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">renderTagSeverity</span> <span class="token operator">=</span> <span class="token punctuation">(</span>severity<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>severity<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'critical'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'#991aff'</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'high'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'#f80000'</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'medium'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'#fb9900'</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'low'</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'rgb(195, 195, 32)'</span><span class="token punctuation">;</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token string">'red'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">checkShowStatus</span> <span class="token operator">=</span> <span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token constant">PROCESS</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">PROCESS</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token constant">APPROVED</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">APPROVED</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token constant">REJECT</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">REJECT</span><span class="token punctuation">;</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token constant">PROCESS</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">useSupportHook</span> <span class="token operator">=</span> <span class="token punctuation">(</span>showSelectWithRole<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">function</span> <span class="token function">getColumn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Severity'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'severity'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Impact'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'impact'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'12%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Owner'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'username'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'16%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Status'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'status'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'15%'</span><span class="token punctuation">,</span> render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token function">showSelectWithRole</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Action'</span><span class="token punctuation">,</span> dataIndex<span class="token punctuation">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'14%'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">return</span> columns<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> renderTagSeverity<span class="token punctuation">,</span> checkShowStatus<span class="token punctuation">,</span> getColumn <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> useSupportHook<span class="token punctuation">;</span> |
và bên file mình sẽ import vào import useSupportHook from ‘./useSupportHook’; và use vào:
1 2 | const [renderTagSeverity, checkShowStatus, getColumn] = useSupportHook(showSelectWithRole); |
và bây giời mình chỉ việc sử dụng chúng thôi thật ngắn gọn và tường mình đúng không nào.
3, Kết luận:
Đọc tới đây chắc các bạn cũng đã hình dung được custom hook là gì cũng như cách sử dụng, hoạt động của nó rồi đúng không ạ. Tương tự với cách sử dụng như vậy, bạn có thể tạo ra nhiều các biến thể khác nhau cho phù hợp với mục đích sử dụng. Các ơn các bạn đã theo dõi.
