Phân biệt Props và State trong React native?

#1

XIn chào cả nhà
Mình mới học về React native. Thấy mọi người hay nói cần phải phân biệt kĩ Props với State.
Không biết hai cái này khác nhau cơ bản chỗ nào?
Như bài viết này: React Native – Phân biệt Props và State cực kỳ đơn giản và dễ hiểu

Thì Props: Các Props là không thể thay đổi
Còn State: có thể thay đổi

Các cao nhân React Native cho ý kiến có đúng vậy không?

#2

Điều đó đúng nhưng bài viết khá là dày đặc mà lại thiếu trọng tâm, đặc biệt là không có ý tưởng cốt lõi.
Trong React, giao diện được cấu thành từ các component lồng nhau hoặc liên tiếp nhau.
Ý tưởng là mỗi component đều mang trong mình “trạng thái” (state), khi trạng thái thay đổi, giao diện được render lại theo trạng thái đó.
Để trạng thái của component ảnh hưởng lên được component con, React có khái niệm property (props), cứ mỗi khi component cha được render, component con sẽ nhận được props gửi từ component cha, component con có thể tích lũy props đó vào trạng thái của nó, hoặc chỉ sử dụng để render đơn thuần thôi.
Vì props luôn là thứ được truyền từ compoment cha nên component con không nên chỉnh sửa nó (cứ mỗi lần render thì lại có props truyền vào, sửa vô ích). Còn state là do mỗi component tự nắm giữ nên sửa thoải mái.

6 Likes
#3

Phát biểu đó có đúng nhưng thực sự không thực tiễn lắm đối với kiến thức về react cũng như react-native. Theo mình nghĩ cách phân biệt đó cũng là một cách nhưng chả khác gì học vẹt dẫn đến lâu đụng lại thì đầu rỗng tuếch chả hiểu bản chất của props và state là như thế nào. Cái link đấy có giải thích đầy đủ nhưng cách tóm gọn của họ mình hoàn toàn không tán thành chút nào. [spoiler]Nói chung là học lập trình ở VN chán lắm! Có mấy trang của nước ngoài uy tín sao không vô đó mà học. Đừng trả lời mình là tiếng anh bạn kém nha![/spoiler](Giữ bình tĩnh nhất có thể để mở blurred text này). Bạn nên hiểu tường tận và đúng bản chất của props và state để có thể làm việc với react dễ hơn(đừng có thuộc lòng, hiểu trong đầu ý). Có thể vô link này đọc thêm: ReactJS: Props vs. State

P/s: Upd8 link vì stackoverflow thực sự không hiệu quả với topic này cho lắm :smile:

1 Like
#4

Thật sự thì nắm được ý tưởng cốt lõi của nó quan trọng hơn, link stackoverflow cũng thích show code với suy từ hệ quả đi ngược lại, không tập trung vào ý tưởng, đọc đau cả đầu.

3 Likes
#5

Có thể không đúng lắm nhưng bạn hiểu như thế này dễ hiểu hơn.

Properties dùng để bổ sung thông tin cho component
State dùng để nắm giữ thông tin của component.

Để dễ hiểu hãy xem ví dụ Person Component. Để biến Component này là ai, thì ta bổ sung thêm thông qua properties bao gồm Tên, Tuổi, Địa chỉ.

class Person extends Component {
  render() {
    const { name, age, addr } = this.props;
    return (
      <div>
        <div>Name: {name}</div>
        <div>Age: {age}</div>
        <div>Address: {addr}</div>
      </div>
    );
  }
}

Vì sao tên, tuổi, địa chỉ là ko thuộc về component này? Vì tên thì do phụ mẫu đặt, quản lý bởi Bộ Công an. Tuổi thì do trời đất quy định, cứ qua một năm là tự tăng, chứ bản thân cũng ko thể thích mà tự tăng tuổi được. Địa chỉ do sở nhà đất cấp. Tóm lại những thông tin trên là do một bên khác bổ sung vào, thì ta cho nó qua properties. Vì vậy properties không thay đổi được. Vì mình đâu có quản lý đâu mà thay đổi được! Muốn thay đổi là phải lên bộ này bộ kia mới được.

State là trạng thái, vậy một Person có state/ gì? Xem ví dụ dưới.

class Person extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activity: 'reading',
      emotion: 'confusing',
    }
  }
  
  understand = () => {
    this.setState({ activity: 'thank you', emotion: 'happy' });
  }
  
  render() {
    const { name, age, addr } = this.props;
    const { activity, emotion } = this.state;
    return (
      <div>
        <div>Name: {name}</div>
        <div>Age: {age}</div>
        <div>Address: {addr}</div>
        <div>Activity: {activity}</div>
        <div>Emotion: {emotion}</div>
        <button onClick={this.understand}>I understand now</button>
      </div>
    );
  }
}

Tại sao activity, emotion lại nằm trong trạng thái? Đơn giản vì nó thuộc về con người của bạn. Bạn thích thì bạn thay đổi. Không thì thì thôi. Giống như giả sử như bạn đọc xong reply của mình, hên thì cách diễn đạt của mình dễ hiểu thì bạn tiếp thu được rồi cảm ơn mình cái. Không thì thôi. Nó do bạn quyết định và là của bạn, do bạn sở hữu nên nằm trong state. Và cũng vì do của bạn, nên bạn thích sửa là sửa, xóa là xóa. Toàn quyền

Tuy nhiên khi học nữa. Bạn sẽ thấy quản lý state khá là khó khăn và có hiệu xuất không được tốt (vì sao thì code nhiều bạn sẽ thấy :v). Nên ngta ra đời redux. Một thư viện hỗ trợ quản lý state cho bạn. Thì khi đó mọi component đều không có states và rất cực kỳ hạn chế dùng states. Khi này có thể nói dễ hiểu hơn là Person thành Robot ấy. Nhận emotion, activity gì đều từ tổng tư lệnh redux hết. Thì một con robot bao giờ cũng dễ điều khiển hơn 1 con người. Nên ngta rất ưu tiên tạo ra những component như những Robot component.

9 Likes
#6

Bạn xem qua bài này, có lẽ là bài quan trọng nhất khi học React.

4 Likes
#7

Cám ơn các bạn rất nhiều
Mình đã hiểu rõ hơn phần nào rồi. Chắc để có nắm được bản chất thì phải làm một dự án thực tế thì mới ngấm được

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?