Props và State trong Reactjs
React kiểm soát luồng dữ liệu trong các componentvới state và props. Dữ liệu trong state và props được sử dụng để render Component với dữ liệu động.
Trong ReacJs có 2 khái niệm mà lúc bắt đầu học dễ bị nhầm lẫn là props và state. Vậy props và state là gì thì chúng ta sẽ cùng thảo luận sau đây
Props là gì?
- Trong React props được sử dụng để gửi dữ liệu tới các components.
- Trong React mỗi component được coi là một hàm JavaScript thuần.
- Trong React props giống như là tham số của 1 hàm javascript.
- Props là bất biến.
- Hàm ReactJs dựa trên component
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> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Profile</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// props.img_url = 'http://via.placeholder.com/350x150'</span> <span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> padding<span class="token punctuation">:</span> <span class="token string">'10px'</span><span class="token punctuation">,</span> border<span class="token punctuation">:</span> <span class="token string">'1px solid green'</span><span class="token punctuation">,</span> display<span class="token punctuation">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> marginLeft<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#4db1e8'</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>logo_url<span class="token punctuation">}</span> height<span class="token operator">=</span><span class="token string">"250px"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<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> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Profile<span class="token punctuation">;</span> |
- Class ReactJs dựa trên component
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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Profile</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// this.props.img_url = 'http://via.placeholder.com/350x150'</span> <span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> padding<span class="token punctuation">:</span> <span class="token string">'10px'</span><span class="token punctuation">,</span> border<span class="token punctuation">:</span> <span class="token string">'1px solid green'</span><span class="token punctuation">,</span> display<span class="token punctuation">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> marginLeft<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#4db1e8'</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>logo_url<span class="token punctuation">}</span> height<span class="token operator">=</span><span class="token string">"250px"</span><span class="token operator">/</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 keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>h1<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> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Profile<span class="token punctuation">;</span> |
- Import và sử dụng component của React
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">"react-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Profile <span class="token keyword">from</span> <span class="token string">"./components/Profile"</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span> <span class="token operator"><</span>Profile logo_url<span class="token operator">=</span><span class="token string">"https://books.agiliq.com/projects/django-design-patterns/en/latest/_static/logo.png"</span> title<span class="token operator">=</span><span class="token string">"Mobile App, Web App and API Development and More"</span><span class="token operator">/</span><span class="token operator">></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">"main"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
Trong đoạn code trên có thông qua 2 props là logo_url và title
- Chúng ta không cần sử dụng
thischo các function dựa trên component để truy cập props nhưng phải sử dụngthisđể truy cập propsthis.props.<props_name>.
State là gì?
- State giống như kho lưu trữ dữ liệu cho component của ReactJs. Nó chủ yếu được sử dụng để cập nhật component khi người dùng có các thao tác như nhấn nút, nhập text…
React.Componentlà lớp cơ sở cho tất cả các component của ReactJs. Bất cứ khi nào 1 class kế thừaReact.Componentcontructor của nó sẽ tự động gán thuộc tính cho lớp với giá trị khởi tạo là null. Chúng ta có thể thay đổi bằng cách ghi đè contructor của nó.- Trong nhiều trường hợp chúng ta phải cập nhật state. Để làm được điều này chúng ta phải sử dụng phương thức
setState()thay vì gán giá trị trực tiếp cho nó như thế nàythis.state = {'key': 'value'}. - Ví dụ tạo state
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 | <span class="token keyword">class</span> <span class="token class-name">Profile</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>props<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 keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">"show_technologies"</span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span>see_our_technologies <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>see_our_technologies<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">see_our_technologies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">"show_technologies"</span><span class="token punctuation">:</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 function">render</span><span class="token punctuation">(</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><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">)</span> <span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span> padding<span class="token punctuation">:</span> <span class="token string">'10px'</span><span class="token punctuation">,</span> border<span class="token punctuation">:</span> <span class="token string">'1px solid green'</span><span class="token punctuation">,</span> display<span class="token punctuation">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> marginLeft<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#4db1e8'</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> fontFamily<span class="token punctuation">:</span> <span class="token string">'sans-serif'</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> tech <span class="token operator">=</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token string">'#4db1e8'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token string">'5px'</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token string">'5px'</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>img src<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>img_url<span class="token punctuation">}</span> height<span class="token operator">=</span><span class="token string">"250px"</span><span class="token operator">/</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 keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<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 keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show_technologies <span class="token operator">?</span> <span class="token operator"><</span>p<span class="token operator">></span> <span class="token operator"><</span>span style<span class="token operator">=</span><span class="token punctuation">{</span>tech<span class="token punctuation">}</span><span class="token operator">></span>Python<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>span style<span class="token operator">=</span><span class="token punctuation">{</span>tech<span class="token punctuation">}</span><span class="token operator">></span>Django<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>span style<span class="token operator">=</span><span class="token punctuation">{</span>tech<span class="token punctuation">}</span><span class="token operator">></span>Django <span class="token constant">REST</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>span style<span class="token operator">=</span><span class="token punctuation">{</span>tech<span class="token punctuation">}</span><span class="token operator">></span>ReactJS<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>span style<span class="token operator">=</span><span class="token punctuation">{</span>tech<span class="token punctuation">}</span><span class="token operator">></span>Angular<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>span style<span class="token operator">=</span><span class="token punctuation">{</span>tech<span class="token punctuation">}</span><span class="token operator">></span> and More<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></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>button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>see_our_technologies<span class="token punctuation">}</span><span class="token operator">></span>Click to see Our Technologies<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token punctuation">}</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> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Profile<span class="token punctuation">;</span> |
Giao diện sẽ hiển thị với đoạn code trên như sau:
Sau khi click button sẽ thu được kết quả:
Trong đoạn code trên đã ghi đè constructor và thiết lập state ban đầu với key: show_technologies có giá trị false. Khi render component sẽ check xem giá trị của show_technologies nếu false thì chỉ render ra button. Sử dụng sự kiện click cho button. Khi click button state sẽ được xử lý this.setState({"show_technologies": true}) set lại giá trị cho show_technologies là true kết quả sau khi click sẽ thay đổi so với ban đầu.
Túm lại thì bất cứ khi nào state được cập nhật thì component sẽ đều render lại state mới nhất.
Bài viết trên là tìm hiểu đôi chút của mình về props và state, các bạn nếu muốn tìm hiểu kỹ hơn có thể đọc tại đây.
Nguồn tham khảo: