Asked Sep 3rd, 10:37 AM 102 0 3
  • 102 0 3
0

Khác nhau giữa class component và function component

Share
  • 102 0 3

với cùng state như nhau, mình muốn xem state đã thay đổi như thế nào sau khi setstate, nhưng tại sao có sự khác nhau giữa class component và function component sau khi setstate với syntax như nhau vậy mọi người.

3 ANSWERS


Answered Sep 4th, 3:49 AM
Accepted
+1

với class component khi bạn gọi setState bạn có thể update từng trường trong state, còn với hook thì khi bạn gọi setUser là nó sẽ thay thế cả data cũ của bạn nhé

Share
Avatar tapcode @tapcode
Sep 4th, 10:00 AM

giải thích rõ hơn tí dx hk bn ơi, ko thì có thể gửi dùm mình document để mình tìm hiểu. Thanks bn.

0
| Reply
Share
Avatar Khang @khangnd
Sep 6th, 1:53 AM

@tapcode Giải thích dễ hiểu vậy mà...

// this.setState
state = { ...oldState, ...newState }

// setUser
state = { ...newState }
0
| Reply
Share
Answered Sep 7th, 4:22 AM
+2

hi @tapcode

Với Class Component

  • thuộc tính state sẽ đại diện cho toàn bộ trạng thái của Class
  • khi gọi hàm setState, nếu bạn update thuộc tính nào thì chỉ update lại cho thuộc tính đó, như trong vd của bạn gọi this.setState chỉ set lại cho name thì age sẽ không đổi

Với Function Component

  • useState được gọi là hook của React, bạn xem thêm ở đây https://reactjs.org/docs/hooks-reference.html#usestate
  • hook này sẽ trả về cho bạn một biến giá trị và một hàm để update lại giá của nó và render lại trên view
  • Về bản chất thì nó chỉ là một variable có thể lưu string, number hay object. Trường hợp của bạn là lưu object với giá trị là {name: 'a', age: 20}. khi bạn gọi setUser với object chỉ có name thì nó sẽ override lại object cũ
  • Bạn có thể tạo nhiều state bằng cách gọi hook này nhiều lần như sau
     const [user, setUser] = useState({name: 'a', age: ''})
     const [loading, setLoading] = useState(false)
     const [countClick, setCountClick] = useState(0)
    
    Thì trên view sẽ là
    <div>
      {loading && (<div>Loading....</div>)}
     <div>{countClick}</div>
    </div>
    

Hope this help ^^!

Share
Answered Sep 4th, 6:06 PM
0

state.user != state

Share
Viblo
Let's register a Viblo Account to get more interesting posts.