Nếu là một người lập trình sử dụng Reat thì chắc bạn đã quá quen thuộc vơi việc sử dụng Props hoặc State trong các component rồi nhỉ.
Nhưng liệu bạn đã biết về sự khác nhau giữa chúng chưa?
Nếu chưa thì cùng mình tìm hiểu nhé.
Props
- Props là 1 đối tượng chứa các giá trị của các attribute của một thẻ và là cách các component nhận được các giá trị truyền từ ngoài vào.
Ví dụ:
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">XinChao</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span>h1<span class="token operator">></span>Xin chào <span class="token punctuation">{</span>props<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token operator"><</span>XinChao name<span class="token operator">=</span><span class="token string">"Sara"</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span> root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span> |
- Ở đây chúng ta đã truyền property
namevào trong props của component XinChao. - Mỗi property của component sẽ tương ứng với một attribute của thẻ và giá trị của attribute đó sẽ được truyền vào property của props.
- Bạn có thể thay đổi Props bằng cách sử dụng setProps hoặc replaceProps nhưng không khuyến khích việc bạn sử dụng chúng vì React có 1 rule đó là pure function: không làm thay đổi giá trị đầu vào và luôn trả về 1 kiểu định dạng ( Props are Read-Only)
State
- Cũng giống như props , state cũng lưu trữ thông tin về component, nhưng là lưu trữ dữ liệu động của một component.
- State là dữ liệu động , nó cho phép một component theo dõi thông tin thay đổi giữa các kết xuất và khiến nó có thể tương tác.
- State chỉ có thể được sử dụng ở trong một component sinh ra nó.
- Nếu component cần quản lý state, thì nên tạo nó trong một class component chứ không phải là một function component.
ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">class</span> <span class="token class-name">Clock</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>date<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</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 function">render</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>h1<span class="token operator">></span>Xin chào<span class="token operator">!</span><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><span class="token constant">B</span>ây giờ là <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>date<span class="token punctuation">.</span><span class="token function">toLocaleTimeString</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 operator">/</span>h2<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 punctuation">}</span> <span class="token keyword">const</span> root <span class="token operator">=</span> ReactDOM<span class="token punctuation">.</span><span class="token function">createRoot</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> root<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Clock <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
- Với ví dụ trên thì khi chúng ta vào trang lúc 22:20:58 sẽ nhận được kết quả là
- Và mỗi lần chúng ta f5 thì giờ sẽ thay đổi.
- Để cho thời gian có thể update thì bạn có thể tìm hiểu thêm về lifecycle methods.
Props và State
Giống
- Cả 2 để là đối tượng cơ bản trong React và khi thay đổi giá trị sẽ thực hiện render.
Khác
| Props | State | |
|---|---|---|
| Quản lý dữ liệu | truyền dữ liệu đến component giống truyền param trong function | được quản lý bên trong component |
| Thay đổi dữ liệu trong component | Không (do dữ liệu được truyền vào) | Có (do được quản lý bên trong component) |
| Thay đổi dữ liệu từ component cha | Có | Không |
Kết Lại
- Trên đây là những gì mình biết về props và state trong React mong rằng nó sẽ giúp đỡ được mọi người.
- Cảm ơn mọi người đã đọc bài viết của mình nếu thấy có ích hãy upvote cho mình nhé!