Đầu xuân xin chúc các bạn được nhiều sức khoẻ, làm ăn phát tài, công việc thuận lợi và gặp được nhiều may mắn nhá.
Giới thiệu
Xin chào các bạn, React là thư viện của Javascrip dễ học và phát triển, nhưng để viết mã có hiệu suất thì cần nắm rõ các hooks, xử lý functions sao cho hiệu quả. Hôm nay mình sẽ chia sẻ các bạn 1 số phương pháp, hy vọng các bạn sẽ học được gì đó mới trong này hôm nay!
1 số phương pháp
setState trong useEffect
Mình có 1 mãng users sau đó dựa vào onChange của selector để setState userID
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"User One"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">"2"</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"User Two"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">"3"</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"User Three"</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">Users</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 punctuation">[</span>userId<span class="token punctuation">,</span> setUserId<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"1"</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">(</span> <span class="token operator"><</span>select value<span class="token operator">=</span><span class="token punctuation">{</span>userId<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token function">setUserId</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<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 string">"1"</span><span class="token operator">></span>User One<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 string">"2"</span><span class="token operator">></span>User Two<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 string">"3"</span><span class="token operator">></span>User Three<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 comment">// muốn show user đã được chọn tại đây</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bây giờ muốn show tên userID được chọn thì tạo 1 state user và thì thực hiện lắng nghe sự thay đổi của userID trong useEffect để setState user
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token keyword">function</span> <span class="token function">Users</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 punctuation">[</span>userId<span class="token punctuation">,</span> setUserId<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>selectedUser<span class="token punctuation">,</span> setSelectedUser<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token function">useEffect</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> <span class="token function">setSelectedUser</span><span class="token punctuation">(</span>users<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">u</span> <span class="token operator">=></span> u<span class="token punctuation">.</span>id <span class="token operator">===</span> userId<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>userId<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>select value<span class="token operator">=</span><span class="token punctuation">{</span>userId<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token function">setUserId</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<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<span class="token operator">></span>Select a user<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 string">"1"</span><span class="token operator">></span>User One<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 string">"2"</span><span class="token operator">></span>User Two<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 string">"3"</span><span class="token operator">></span>User Three<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>selectedUser <span class="token operator">&&</span> <span class="token operator"><</span>p<span class="token operator">></span>The selected user is<span class="token operator">:</span> <span class="token punctuation">{</span>selectedUser<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token punctuation">}</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> |
Như trên thì component sẽ render 2 lần:
- sau khi setUserId
- sau khi setSelectedUser
Thay vì lắng nghe sự thay đổi trong userID trong useEffect thì ta tạo 1 biến để find user trong mãng users luôn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">function</span> <span class="token function">Users</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 punctuation">[</span>userId<span class="token punctuation">,</span> setUserId<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> <span class="token keyword">const</span> selectedUser <span class="token operator">=</span> users<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">u</span> <span class="token operator">=></span> u<span class="token punctuation">.</span>id <span class="token operator">===</span> userId<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>select value<span class="token operator">=</span><span class="token punctuation">{</span>userId<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token function">setUserId</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<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<span class="token operator">></span>Select a user<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 string">"1"</span><span class="token operator">></span>User One<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 string">"2"</span><span class="token operator">></span>User Two<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 string">"3"</span><span class="token operator">></span>User Three<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>selectedUser <span class="token operator">&&</span> <span class="token operator"><</span>p<span class="token operator">></span>The selected user is<span class="token operator">:</span> <span class="token punctuation">{</span>selectedUser<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token punctuation">}</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> |
Hoặc không cần tạo biến
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">function</span> <span class="token function">Users</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 punctuation">[</span>userId<span class="token punctuation">,</span> setUserId<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</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>select value<span class="token operator">=</span><span class="token punctuation">{</span>userId<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token function">setUserId</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<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<span class="token operator">></span>Select a user<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 string">"1"</span><span class="token operator">></span>User One<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 string">"2"</span><span class="token operator">></span>User Two<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 string">"3"</span><span class="token operator">></span>User Three<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>selectedUser <span class="token operator">&&</span> <span class="token operator"><</span>p<span class="token operator">></span>The selected user is<span class="token operator">:</span> <span class="token punctuation">{</span>users<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">u</span> <span class="token operator">=></span> u<span class="token punctuation">.</span>id <span class="token operator">===</span> userId<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token punctuation">}</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> |
setState trong event
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">function</span> <span class="token function">App</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 punctuation">[</span>name<span class="token punctuation">,</span> setName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>age<span class="token punctuation">,</span> setAge<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">newName<span class="token punctuation">,</span> newAge</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setName</span><span class="token punctuation">(</span>newName<span class="token punctuation">)</span> <span class="token function">setAge</span><span class="token punctuation">(</span>newAge<span class="token punctuation">)</span> <span class="token comment">// other code...</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">)</span> <span class="token comment">// tại đây thì vẫn là giá trị cũ</span> <span class="token punctuation">}</span> <span class="token comment">// đây là điểm cuối để thực hiện update, re-render</span> <span class="token punctuation">}</span> |
unmount hook
Trong useEffect cho phép kết xuất các functions chạy lần lượt, và khi unmount component thì cần phải clear functions để tăng hiệu suất cũng như tránh memory leak( các bạn tìm hiểu thêm giúp mình nhá ). Để thực hiện unmount thì trong useEffect thì ta thực hiện trong return của useEffect
1 2 3 4 5 6 7 8 | <span class="token function">useEffect</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> button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> listener<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> button<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> listener<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 punctuation">]</span><span class="token punctuation">)</span> |
Function removeEventListener giúp clear sự kiện click sau khi unmount component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token function">useEffect</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> <span class="token keyword">let</span> ignoreThisReq <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/api/users/userId</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// if this is true, this effect already belongs to a previous render</span> <span class="token comment">// so ignore the received data</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>ignoreThisReq<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setUser</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<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> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// clean up function is called, so discard the response from API</span> ignoreThisReq <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>userId<span class="token punctuation">]</span><span class="token punctuation">)</span> |
Thay đổi state dựa vào prevState
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">import</span> <span class="token punctuation">{</span>useState<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// thực hiện logic bla bloa</span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<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 className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello CodeSandbox<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>Start editing to see some magic happen<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span> <span class="token operator">></span>Nhấn<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>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Như dòng code trên thì mỗi lần các bạn nhấn onClick thì giá trị của log là bao nhiêu?
Và đây là kết quả
Vì khi thực hiện nhiều setState trong 1 function mà setState lại lấy count từ bên ngoài function phải đợi function đó thực hiện xong thì mới lấy được giá trị mới nhất của count. Để khắc phục điều đó thì
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">prev</span><span class="token punctuation">)</span> <span class="token operator">=></span> prev <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// thực hiện logic bla bloa</span> <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">prev</span><span class="token punctuation">)</span> <span class="token operator">=></span> prev <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<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> <span class="token punctuation">(</span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Hello CodeSandbox<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>Start editing to see some magic happen<span class="token operator">!</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span>Nhấn<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>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Và đây là kết quả
Bonus
Và dưới đây là 1 số mẹo giúp bạn clean code hơn nè:
- đặt tên rõ ràng
- mỗi function chỉ nên làm 1 việc
- mỗi component thì thể hiện đúng chức năng của nó
- comment khi cần thiết
Kết thúc
Như trên thì mình đã chia sẻ vài phương pháp giúp các bạn hiểu rõ hơn về state, quản lý và thay đổi trạng thái state. Hy vọng các bạn sẽ học hỏi được nhiều kiến thức mới và chúc một ngày tốt lành.