Sự khác biệt giữa trạng thái và đạo cụ trong React là gì?

605
skaterdav85 2015-01-17 09:28.

Tôi đang xem một khóa học Pluralsight về React và người hướng dẫn đã nói rằng không nên thay đổi đạo cụ. Bây giờ tôi đang đọc một bài báo (uberVU / react-guide) về props vs. state và nó nói

Cả các thay đổi về đạo cụ và trạng thái đều kích hoạt cập nhật kết xuất.

Ở phần sau của bài báo, nó nói:

Props (viết tắt của thuộc tính) là một cấu hình của Component, các tùy chọn của nó nếu bạn có thể. Chúng được nhận từ trên cao và bất biến.

  • Vì vậy, đạo cụ có thể thay đổi nhưng chúng phải là bất biến?
  • Khi nào bạn nên sử dụng đạo cụ và khi nào bạn nên sử dụng trạng thái?
  • Nếu bạn có dữ liệu mà một thành phần React cần, nó có nên được chuyển qua các đạo cụ hay thiết lập trong thành phần React thông qua getInitialStatekhông?

30 answers

718
Todd 2015-01-17 10:37.

Đạo cụ và trạng thái có liên quan với nhau. Trạng thái của một thành phần thường sẽ trở thành đạo cụ của một thành phần con. Các đạo cụ được chuyển cho con trong phương thức hiển thị của cấp độ gốc dưới dạng đối số thứ hai React.createElement()hoặc, nếu bạn đang sử dụng JSX, các thuộc tính thẻ quen thuộc hơn.

<MyChild name={this.state.childsName} />

Giá trị trạng thái của cha mẹ childsNametrở thành của con this.props.name. Từ quan điểm của đứa trẻ, chỗ dựa tên là bất biến. Nếu nó cần được thay đổi, cha mẹ chỉ nên thay đổi trạng thái bên trong của nó:

this.setState({ childsName: 'New name' });

và React sẽ tuyên truyền nó đến đứa trẻ cho bạn. Một câu hỏi tiếp theo tự nhiên là: điều gì sẽ xảy ra nếu đứa trẻ cần thay đổi tên của nó? Điều này thường được thực hiện thông qua các sự kiện con và các lệnh gọi lại chính. Ví dụ, đứa trẻ có thể tiết lộ một sự kiện được gọi là onNameChanged. Sau đó, cha mẹ sẽ đăng ký sự kiện bằng cách chuyển một trình xử lý gọi lại.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

Con sẽ chuyển tên mới được yêu cầu của nó làm đối số cho lệnh gọi lại sự kiện bằng cách gọi, ví dụ this.props.onNameChanged('New name'), và cha sẽ sử dụng tên trong trình xử lý sự kiện để cập nhật trạng thái của nó.

handleName: function(newName) {
   this.setState({ childsName: newName });
}
236
BentOnCoding 2015-08-25 05:39.

Đối với giao tiếp giữa cha mẹ và con cái, chỉ cần chuyển các đạo cụ.

Sử dụng trạng thái để lưu trữ dữ liệu mà trang hiện tại của bạn cần trong chế độ xem bộ điều khiển.

Sử dụng đạo cụ để chuyển dữ liệu và trình xử lý sự kiện xuống các thành phần con của bạn.

Những danh sách này sẽ giúp hướng dẫn bạn khi làm việc với dữ liệu trong các thành phần của bạn.

Đạo cụ

  • là bất biến
    • cho phép React thực hiện kiểm tra tham chiếu nhanh
  • được sử dụng để chuyển dữ liệu xuống từ bộ điều khiển chế độ xem của bạn
    • thành phần cấp cao nhất của bạn
  • có hiệu suất tốt hơn
    • sử dụng điều này để chuyển dữ liệu cho các thành phần con

Tiểu bang

  • nên được quản lý trong bộ điều khiển chế độ xem của bạn
    • thành phần cấp cao nhất của bạn
  • có thể thay đổi
  • có hiệu suất kém hơn
  • không nên truy cập từ các thành phần con
    • chuyển nó xuống bằng các đạo cụ thay thế

Để giao tiếp giữa hai thành phần không có mối quan hệ cha-con, bạn có thể thiết lập hệ thống sự kiện toàn cầu của riêng mình. Đăng ký các sự kiện trong componentDidMount (), hủy đăng ký trong componentWillUnmount () và gọi setState () khi bạn nhận được một sự kiện. Mô hình dòng chảy là một trong những cách có thể để sắp xếp điều này. - https://facebook.github.io/react/tips/communicate-between-components.html

Thành phần nào nên có trạng thái?

Hầu hết các thành phần của bạn chỉ nên lấy một số dữ liệu từ các đạo cụ và kết xuất nó. Tuy nhiên, đôi khi bạn cần phản hồi thông tin đầu vào của người dùng, yêu cầu của máy chủ hoặc thời gian trôi qua. Đối với điều này, bạn sử dụng trạng thái.

Cố gắng giữ càng nhiều thành phần của bạn không trạng thái càng tốt . Bằng cách này, bạn sẽ cô lập trạng thái đến vị trí hợp lý nhất của nó và giảm thiểu sự dư thừa, giúp bạn dễ dàng lập luận về ứng dụng của mình hơn.

Một mẫu phổ biến là tạo một số thành phần không trạng thái chỉ hiển thị dữ liệu và có một thành phần trạng thái ở trên chúng trong cấu trúc phân cấp chuyển trạng thái của nó cho con của nó thông qua đạo cụ. Thành phần trạng thái đóng gói tất cả logic tương tác, trong khi các thành phần không trạng thái đảm nhận việc hiển thị dữ liệu theo cách khai báo. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Những gì nên đi trong tiểu bang?

Trạng thái phải chứa dữ liệu mà trình xử lý sự kiện của một thành phần có thể thay đổi để kích hoạt cập nhật giao diện người dùng. Trong các ứng dụng thực, dữ liệu này có xu hướng rất nhỏ và có thể tuần tự hóa JSON. Khi xây dựng một thành phần trạng thái, hãy nghĩ về cách biểu diễn trạng thái tối thiểu có thể có của nó và chỉ lưu trữ các thuộc tính đó trong this.state. Bên trong của render () chỉ cần tính toán bất kỳ thông tin nào khác mà bạn cần dựa trên trạng thái này. Bạn sẽ thấy rằng suy nghĩ và viết các ứng dụng theo cách này có xu hướng dẫn đến ứng dụng đúng nhất, vì việc thêm các giá trị thừa hoặc được tính toán vào trạng thái có nghĩa là bạn cần phải giữ chúng đồng bộ rõ ràng thay vì dựa vào React tính toán chúng cho bạn. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

93
mkarrfan 2018-05-08 22:56.

Bạn có thể hiểu rõ nhất về nó bằng cách liên hệ nó với các hàm Plain JS.

Chỉ cần đặt,

Trạng thái là trạng thái cục bộ của thành phần không thể truy cập và sửa đổi bên ngoài thành phần. Nó tương đương với các biến cục bộ trong một hàm.

Hàm JS thuần túy

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

Thành phần React

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

Đạo cụ , mặt khác, làm cho các thành phần tái sử dụng bằng cách cho các thành phần khả năng nhận dữ liệu từ thành phần cha mẹ của họ trong các hình thức của đạo cụ. Chúng tương đương với các tham số của hàm.

Hàm JS thuần túy

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

Thành phần React

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

Tín dụng: Manoj Singh Negi

Liên kết bài viết: Giải thích trạng thái React vs Props

51
broc.seib 2016-10-31 04:39.

Bản tóm tắt về đạo cụ và trạng thái mà tôi thích nhất ở đây: react-guide Big hat tip cho những người đó. Dưới đây là phiên bản đã chỉnh sửa của trang đó:


đạo cụ so với trạng thái

tl; dr Nếu một Thành phần cần thay đổi một trong các thuộc tính của nó tại một thời điểm nào đó, thì thuộc tính đó phải là một phần của trạng thái của nó, nếu không, nó chỉ nên là chỗ dựa cho Thành phần đó.


đạo cụ

Props (viết tắt của thuộc tính) là một cấu hình của Component. Chúng được nhận từ phía trên và không thay đổi khi Thành phần nhận chúng có liên quan. Một Component không thể thay đổi các đạo cụ của nó, nhưng nó có trách nhiệm tập hợp các đạo cụ của các Thành phần con lại với nhau. Đạo cụ không nhất thiết phải là dữ liệu - các hàm gọi lại có thể được chuyển vào dưới dạng đạo cụ.

tiểu bang

Trạng thái là một cấu trúc dữ liệu bắt đầu với một giá trị mặc định khi một Thành phần gắn kết. Nó có thể bị thay đổi theo thời gian, chủ yếu là do các sự kiện của người dùng.

Một Thành phần quản lý trạng thái của chính nó trong nội bộ. Bên cạnh việc thiết lập trạng thái ban đầu, nó không có công việc kinh doanh nào loay hoay với trạng thái con của nó. Bạn có thể khái niệm trạng thái là riêng tư đối với thành phần đó.

Thay đổi đạo cụ và trạng thái

                                                   trạng thái đạo cụ
    Có thể nhận giá trị ban đầu từ Thành phần mẹ? Vâng vâng
    Có thể được thay đổi bởi Thành phần mẹ? có không
    Có thể đặt các giá trị mặc định bên trong Thành phần không? * Có Có
    Có thể thay đổi bên trong Thành phần? Không có
    Có thể đặt giá trị ban đầu cho các Thành phần con không? Vâng vâng
    Có thể thay đổi trong các Thành phần con không? có không
  • Lưu ý rằng cả đạo cụ và giá trị ban đầu trạng thái nhận được từ cha mẹ ghi đè các giá trị mặc định được xác định bên trong Thành phần.

Thành phần này có trạng thái không?

Trạng thái là tùy chọn. Vì trạng thái làm tăng độ phức tạp và giảm khả năng dự đoán, nên một Thành phần không có trạng thái được ưu tiên hơn. Mặc dù rõ ràng bạn không thể thực hiện mà không có trạng thái trong một ứng dụng tương tác, nhưng bạn nên tránh có quá nhiều Thành phần trạng thái.

Các loại thành phần

Thành phần không trạng thái Chỉ có đạo cụ, không có trạng thái. Không có gì nhiều ngoài hàm render (). Logic của họ xoay quanh các đạo cụ mà họ nhận được. Điều này làm cho chúng rất dễ theo dõi và kiểm tra.

Thành phần trạng thái Cả đạo cụ và trạng thái. Chúng được sử dụng khi thành phần của bạn phải giữ lại một số trạng thái. Đây là một nơi tốt để giao tiếp giữa máy khách-máy chủ (XHR, ổ cắm web, v.v.), xử lý dữ liệu và phản hồi các sự kiện của người dùng. Những loại hậu cần này nên được gói gọn trong một số lượng vừa phải Thành phần trạng thái, trong khi tất cả logic hình ảnh hóa và định dạng nên chuyển xuống thành nhiều Thành phần không trạng thái.

nguồn

21
Alireza 2018-05-06 17:37.

đạo cụ (viết tắt của “thuộc tính”) và trạng thái đều là các đối tượng JavaScript thuần túy. Mặc dù cả hai đều nắm giữ thông tin ảnh hưởng đến đầu ra của kết xuất, nhưng chúng khác nhau ở một điểm quan trọng: đạo cụ được chuyển cho thành phần (tương tự như các tham số hàm) trong khi trạng thái được quản lý bên trong thành phần (tương tự như các biến được khai báo trong một hàm).

Vì vậy, chỉ đơn giản là nhà nước được giới hạn thành phần hiện tại của bạn nhưng đạo cụ có thể vượt qua đối với bất kỳ thành phần bạn muốn ... Bạn có thể vượt qua tình trạng của các thành phần hiện tại là chỗ dựa cho các thành phần khác ...

Ngoài ra trong React, chúng ta có các thành phần không trạng thái chỉ có đạo cụ chứ không có trạng thái bên trong ...

Ví dụ dưới đây cho thấy cách chúng hoạt động trong ứng dụng của bạn:

Gốc (thành phần toàn trạng thái):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

Con (thành phần ít trạng thái):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);
15
Aftab22 2019-03-05 20:09.

Sự khác biệt chính giữa đạo cụ và trạng thái là trạng thái nằm bên trong và được kiểm soát bởi chính thành phần trong khi đạo cụ là bên ngoài và được kiểm soát bởi bất kỳ thứ gì hiển thị thành phần.

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));


class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

  • Trạng thái có thể được thay đổi (Có thể thay đổi)
  • Trong khi Đạo cụ không thể (Bất biến)
11
Nesha Zoric 2018-03-02 05:13.

Về cơ bản, sự khác biệt là trạng thái là một cái gì đó giống như các thuộc tính trong OOP : nó là một cái gì đó cục bộ cho một lớp (thành phần), được sử dụng để mô tả nó tốt hơn. Đạo cụ giống như các tham số - chúng được truyền đến một thành phần từ trình gọi của một thành phần (cha): như thể bạn đã gọi một hàm với các tham số nhất định.

8
Vivek Mehta 2017-12-14 00:36.

Cả trạng tháiđạo cụ trong phản ứng đều được sử dụng để điều khiển dữ liệu vào một thành phần, nói chung các đạo cụ được thiết lập bởi cha mẹ và chuyển cho các thành phần con và chúng được cố định trong toàn bộ thành phần. Đối với dữ liệu sẽ thay đổi, chúng ta phải sử dụng trạng thái. Và đạo cụ là bất biến trong khi các trạng thái có thể thay đổi , nếu bạn muốn thay đổi đạo cụ, bạn có thể thực hiện từ thành phần mẹ và sau đó chuyển nó cho các thành phần con.

6
Rashid Iqbal 2019-12-28 00:57.

như tôi đã học khi làm việc với phản ứng.

  • đạo cụ được một thành phần sử dụng để lấy dữ liệu từ môi trường bên ngoài tức là một thành phần khác (thuần túy, chức năng hoặc lớp) hoặc một lớp chung hoặc mã javascript / typecript

  • trạng thái được sử dụng để quản lý môi trường bên trong của một thành phần có nghĩa là dữ liệu thay đổi bên trong thành phần

4
Poulima Biswas 2018-06-20 08:37.

Props: Props không là gì ngoài thuộc tính của component và thành phần react không là gì ngoài một hàm javascript.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

const phần tử =;

ở đây <Welcome name="Sara" />truyền một đối tượng {name: 'Sara'} làm đạo cụ của thành phần Chào mừng. Để chuyển dữ liệu từ một thành phần mẹ sang thành phần con, chúng ta sử dụng các đạo cụ. Đạo cụ là bất biến. Trong vòng đời của một thành phần, đạo cụ không được thay đổi (coi chúng là bất biến).

Trạng thái: trạng thái chỉ có thể truy cập trong Thành phần. Để theo dõi dữ liệu trong thành phần, chúng tôi sử dụng trạng thái. chúng ta có thể thay đổi trạng thái bằng setState. Nếu chúng ta cần chuyển trạng thái cho con, chúng ta phải chuyển nó làm đạo cụ.

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}
4
Akanksha gore 2018-08-24 03:00.

Tiểu bang:

  1. trạng thái có thể thay đổi.
  2. trạng thái được liên kết với các thành phần riêng lẻ không thể được sử dụng bởi các thành phần khác.
  3. trạng thái được khởi tạo trên component mount.
  4. trạng thái được sử dụng để hiển thị các thay đổi động trong thành phần.

đạo cụ:

  1. đạo cụ là bất biến.
  2. bạn có thể chuyển đạo cụ giữa các thành phần.
  3. Đạo cụ chủ yếu được sử dụng để giao tiếp giữa các thành phần, bạn có thể truyền trực tiếp từ cha mẹ sang con. Để truyền từ con sang cha mẹ, bạn cần sử dụng khái niệm nâng cao trạng thái.

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}

3
Alex.Me 2016-10-19 23:21.

Về cơ bản, đạo cụ và trạng thái là hai cách thành phần có thể biết những gì và làm thế nào để kết xuất. Phần nào của trạng thái ứng dụng thuộc về trạng thái nào và thuộc về một số cửa hàng cấp cao nhất, có liên quan nhiều hơn đến thiết kế ứng dụng của bạn, hơn là cách hoạt động của React. Cách đơn giản nhất để quyết định, IMO, là suy nghĩ xem phần dữ liệu cụ thể này có hữu ích cho toàn bộ ứng dụng hay đó là một số thông tin cục bộ. Ngoài ra, điều quan trọng là không được trùng lặp trạng thái, vì vậy nếu một số phần dữ liệu có thể được tính toán từ các đạo cụ - thì nó nên được tính toán từ các đạo cụ.

Ví dụ: giả sử bạn có một số điều khiển thả xuống (bao gồm lựa chọn HTML standart cho kiểu tùy chỉnh), có thể a) chọn một số giá trị từ danh sách và b) được mở hoặc đóng (tức là danh sách tùy chọn được hiển thị hoặc ẩn). Bây giờ, giả sử ứng dụng của bạn hiển thị danh sách các mục thuộc một số loại và bộ lọc điều khiển thả xuống của bạn cho các mục nhập danh sách. Sau đó, tốt nhất là chuyển giá trị bộ lọc đang hoạt động làm chỗ dựa và giữ trạng thái đóng / mở cục bộ. Ngoài ra, để làm cho nó hoạt động, bạn sẽ chuyển một trình xử lý onChange từ thành phần mẹ, sẽ được gọi là phần tử thả xuống bên trong và gửi thông tin cập nhật (bộ lọc được chọn mới) đến cửa hàng ngay lập tức. Mặt khác, trạng thái mở / đóng có thể được giữ bên trong thành phần thả xuống, vì phần còn lại của ứng dụng không thực sự quan tâm nếu điều khiển được mở, cho đến khi người dùng thực sự thay đổi giá trị của nó.

Đoạn mã sau đây không hoàn toàn hoạt động, nó cần css và xử lý các sự kiện nhấp chuột / làm mờ / thay đổi thả xuống, nhưng tôi muốn giữ ví dụ ở mức tối thiểu. Hy vọng nó sẽ giúp hiểu được sự khác biệt.

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);
3
EnriqueDev 2017-08-10 06:33.

State là cách phản ứng xử lý thông tin do thành phần của bạn nắm giữ.

Giả sử bạn có một thành phần cần tìm nạp một số dữ liệu từ máy chủ. Bạn thường muốn thông báo cho người dùng nếu yêu cầu đang được xử lý, nếu nó không thành công, v.v. Đây là một phần thông tin chỉ liên quan đến thành phần cụ thể đó. Đây là nơi trạng thái đi vào trò chơi.

Thông thường, cách tốt nhất để xác định trạng thái như sau:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

nhưng trong những triển khai trễ nhất của react native, bạn chỉ có thể làm:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

Hai ví dụ này thực thi theo cùng một cách, nó chỉ là một cải tiến về cú pháp.

Vậy, điều gì khác biệt so với việc chỉ sử dụng các thuộc tính đối tượng như chúng ta luôn có trong lập trình OO? Thông thường, thông tin được lưu giữ ở trạng thái của bạn không có nghĩa là tĩnh, nó sẽ thay đổi theo thời gian và Chế độ xem của bạn sẽ cần cập nhật để phản ánh những thay đổi này. State cung cấp chức năng này một cách đơn giản.

Nhà nước LÀ PHƯƠNG TIỆN ĐƯỢC BẮT ĐẦU! và tôi không thể làm đủ căng thẳng về điều này. Những gì hiện phương tiện này? Nó có nghĩa là bạn KHÔNG BAO GIỜ nên làm điều gì đó như thế này.

 state.key2 = newValue;

Cách thích hợp để làm điều đó là:

this.setState({ key2: newValue });

Sử dụng this.setState, thành phần của bạn chạy qua chu kỳ cập nhật và nếu bất kỳ phần nào của trạng thái thay đổi, phương thức kết xuất Thành phần của bạn sẽ được gọi lại để phản ánh những thay đổi này.

Kiểm tra tài liệu phản ứng để có giải thích mở rộng hơn: https://facebook.github.io/react/docs/state-and-lifecycle.html

3
Ajay Kumar 2017-12-11 22:57.

trạng thái - Nó là một thuộc tính có thể thay đổi đặc biệt chứa dữ liệu Thành phần. nó có giá trị mặc định khi Componet gắn kết.

props - Nó là một thuộc tính đặc biệt, bất biến về bản chất và được sử dụng trong trường hợp chuyển theo giá trị từ cha mẹ sang con. props chỉ là một kênh giao tiếp giữa các Component, luôn di chuyển từ top (cha) sang mông (con).

dưới đây là ví dụ đầy đủ về kết hợp trạng thái & đạo cụ: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>
3
AJEET SINGH 2018-02-16 08:18.

Props chỉ đơn giản là viết tắt của thuộc tính. Đạo cụ là cách các thành phần nói chuyện với nhau. Nếu bạn đã quen thuộc với React thì bạn nên biết rằng các đạo cụ chảy xuống từ thành phần mẹ.

Cũng có trường hợp bạn có thể có các đạo cụ mặc định để các đạo cụ được đặt ngay cả khi một thành phần mẹ không chuyển các đạo cụ xuống.

Đây là lý do tại sao mọi người gọi React là có luồng dữ liệu đơn hướng. Điều này khiến bạn phải suy nghĩ lại một chút và có thể tôi sẽ viết blog về vấn đề này sau, nhưng bây giờ chỉ cần nhớ: dữ liệu truyền từ cha mẹ sang con. Đạo cụ là bất biến (từ ngữ cho nó không thay đổi)

Vì vậy, chúng tôi rất vui. Các thành phần nhận dữ liệu từ cha. Tất cả đã được sắp xếp, phải không?

Chà, không hoàn toàn. Điều gì xảy ra khi một thành phần nhận dữ liệu từ một người nào đó không phải là thành phần gốc? Điều gì sẽ xảy ra nếu người dùng nhập dữ liệu trực tiếp vào thành phần?

Chà, đây là lý do tại sao chúng ta có trạng thái.

TIỂU BANG

Các đạo cụ không nên thay đổi, vì vậy hãy nâng cấp trạng thái. Thông thường các thành phần không có trạng thái và vì vậy được gọi là không trạng thái. Một thành phần sử dụng trạng thái được gọi là trạng thái. Hãy thoải mái bỏ đi những thứ vụn vặt đó trong các bữa tiệc và nhìn mọi người rời xa bạn.

Vì vậy, trạng thái được sử dụng để một thành phần có thể theo dõi thông tin giữa bất kỳ lần hiển thị nào mà nó thực hiện. Khi bạn setState, nó sẽ cập nhật đối tượng trạng thái và sau đó hiển thị lại thành phần. Điều này thật tuyệt vì điều đó có nghĩa là React đảm nhận công việc khó khăn và nhanh chóng.

Dưới đây là một ví dụ nhỏ về trạng thái, đây là một đoạn trích từ thanh tìm kiếm (đáng để xem qua khóa học này nếu bạn muốn tìm hiểu thêm về React)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

TÓM LƯỢC

Props và State làm những việc tương tự nhưng được sử dụng theo những cách khác nhau. Phần lớn các thành phần của bạn có thể sẽ không có trạng thái.

Props được sử dụng để truyền dữ liệu từ cha mẹ sang con hoặc bởi chính thành phần. Chúng là bất biến và do đó sẽ không bị thay đổi.

Trạng thái được sử dụng cho dữ liệu có thể thay đổi hoặc dữ liệu sẽ thay đổi. Điều này đặc biệt hữu ích cho đầu vào của người dùng. Hãy nghĩ đến các thanh tìm kiếm chẳng hạn. Người dùng sẽ nhập dữ liệu và điều này sẽ cập nhật những gì họ thấy.

3
Amruth L S 2018-08-29 23:05.

Nói ngắn gọn.

Không thể thay đổi giá trị đạo cụ [không thể thay đổi]

giá trị trạng thái có thể được thay đổi, sử dụng phương thức setState [có thể thay đổi]

2
Abhijit 2017-12-06 21:53.

Nói chung, trạng thái của một thành phần (cha) là chỗ dựa cho thành phần con.

  1. Trạng thái nằm trong một thành phần nơi các đạo cụ được truyền từ cấp độ gốc sang cấp độ con.
  2. Đạo cụ nói chung là bất biến.

    class Parent extends React.Component {
        constructor() {
            super();
            this.state = {
                name : "John",
            }
        }
        render() {
            return (
                <Child name={this.state.name}>
            )
        }
    }
    
    class Child extends React.Component {
        constructor() {
            super();
        }
    
        render() {
            return(
                {this.props.name} 
            )
        }
    }
    

Trong đoạn mã trên, chúng ta có một lớp cha (Parent) có tên là trạng thái của nó được chuyển cho thành phần con (Lớp con) như một chỗ dựa và thành phần con hiển thị nó bằng cách sử dụng {this.props.name}

2
Robert Rodriguez 2019-01-16 05:31.

Trong React, các trạng thái lưu trữ dữ liệu cũng như các đạo cụ. Sự khác biệt của nó với cái sau là dữ liệu được lưu trữ có thể được sửa đổi bằng những thay đổi khác nhau. Đây không gì khác hơn là các đối tượng được viết bằng JavaScript phẳng, vì vậy chúng có thể chứa dữ liệu hoặc mã, đại diện cho thông tin bạn muốn lập mô hình. Nếu bạn cần biết thêm chi tiết, bạn nên xem các ấn phẩm này. Sử dụng trạng thái trong ReactSử dụng đạo cụ trong React

2
raheel shahzad 2020-01-02 05:33.

Đạo cụ

  • sử dụng đạo cụ để chuyển dữ liệu trong thành phần con

  • đạo cụ thay đổi giá trị bên ngoài một thành phần (thành phần con)

Tiểu bang

  • trạng thái sử dụng bên trong một thành phần lớp

  • thay đổi trạng thái một giá trị bên trong một thành phần

  • Nếu bạn hiển thị trang, bạn gọi setState để cập nhật DOM (cập nhật giá trị trang)

State có một vai trò quan trọng trong phản ứng

1
Faris Rayhan 2018-02-08 19:04.

Đây là quan điểm hiện tại của tôi về việc giải thích giữa trạng thái và đạo cụ

  1. State giống như biến cục bộ bên trong thành phần của bạn. Bạn có thể thao tác giá trị của trạng thái bằng cách sử dụng trạng thái đặt. Sau đó, bạn có thể chuyển giá trị của trạng thái cho thành phần con của bạn chẳng hạn.

  2. Props là giá trị nằm chính xác bên trong cửa hàng redux của bạn, điều này thực sự đến từ trạng thái bắt nguồn từ bộ giảm thiểu. Thành phần của bạn phải được kết nối với redux để nhận giá trị từ các đạo cụ. Bạn cũng có thể chuyển giá trị đạo cụ của mình cho thành phần con của bạn

1
user3775501 2018-09-01 04:56.

Bạn có một số dữ liệu đang được nhập bởi người dùng ở đâu đó trong ứng dụng.

  1. thành phần mà dữ liệu đang được nhập phải có dữ liệu này ở trạng thái của nó vì nó cần thao tác và thay đổi nó trong quá trình nhập dữ liệu

  2. bất kỳ nơi nào khác trong ứng dụng, dữ liệu phải được truyền lại dưới dạng đạo cụ cho tất cả các thành phần khác

Vì vậy, có, các đạo cụ đang thay đổi nhưng chúng được thay đổi ở 'nguồn' và sau đó sẽ đơn giản chảy xuống từ đó. Vì vậy, đạo cụ là bất biến trong ngữ cảnh của thành phần nhận chúng .

Ví dụ: màn hình dữ liệu tham chiếu trong đó người dùng chỉnh sửa danh sách các nhà cung cấp sẽ quản lý trạng thái này, sau đó sẽ có một hành động khiến dữ liệu cập nhật được lưu trong ReferenceDataState có thể thấp hơn AppState một cấp và sau đó danh sách nhà cung cấp này sẽ được chuyển dưới dạng đạo cụ cho tất cả các thành phần cần thiết để sử dụng nó.

1
Changyuan Chen 2019-02-28 01:11.
  • đạo cụ --- bạn không thể thay đổi giá trị của nó.
  • trạng thái --- bạn có thể thay đổi giá trị của nó trong mã của mình, nhưng nó sẽ hoạt động khi kết xuất xảy ra.
1
Naqibullah 2019-06-23 09:17.

Một số khác biệt giữa "trạng thái" và "đạo cụ" trong phản ứng.

React điều khiển và hiển thị DOM dựa trên trạng thái. Có hai loại trạng thái thành phần: đạo cụ là trạng thái chuyển giao giữa các thành phần và trạng thái là trạng thái bên trong của các thành phần. Props được sử dụng để truyền dữ liệu từ thành phần mẹ sang thành phần con. Các thành phần cũng có trạng thái riêng của chúng bên trong: trạng thái chỉ có thể được sửa đổi bên trong thành phần.

Nói chung, trạng thái của thành phần nhất định có thể là đạo cụ của thành phần con, đạo cụ sẽ được chuyển cho thành phần con được nêu bên trong phương thức kết xuất của thành phần mẹ

0
Lucy Mac 2016-12-06 00:13.

Để trả lời cho câu hỏi ban đầu về việc đạo cụ là bất biến, chúng được cho là bất biến khi có liên quan đến thành phần con nhưng có thể thay đổi ở cấp độ gốc.

0
Juraj 2018-01-18 15:42.

Thành phần React sử dụng trạng thái để ĐỌC / VIẾT các biến bên trong có thể được thay đổi / thay đổi bằng cách ví dụ:

this.setState({name: 'Lila'})

React props là đối tượng đặc biệt cho phép lập trình viên lấy các biến và phương thức từ Parent Component vào Child Component.

Nó giống như cửa sổ và cửa ra vào của ngôi nhà. Props cũng là bất biến Child Component không thể thay đổi / cập nhật chúng.

Có một số phương pháp giúp lắng nghe khi các đạo cụ được thay đổi bởi Thành phần chính.

0
ASHISH BHARDWAJ 2018-11-07 02:30.

Giải thích đơn giản là: STATE là trạng thái cục bộ của thành phần, ví dụ color = "blue" hoặc animation = true, v.v. Sử dụng this.setState để thay đổi trạng thái của thành phần. PROPS là cách các thành phần nói chuyện với nhau (gửi dữ liệu từ cha sang con) và làm cho các thành phần có thể tái sử dụng.

0
Aneudy Adames 2018-12-12 07:01.

Trạng thái là dữ liệu của bạn, có thể thay đổi, bạn có thể làm bất cứ điều gì bạn cần với nó, đạo cụ là dữ liệu chỉ đọc, thường khi bạn chuyển đạo cụ, bạn đã làm việc với dữ liệu của mình và bạn cần thành phần con để hiển thị nó hoặc nếu đạo cụ của bạn là chức năng bạn gọi nó để thực hiện một nhiệm vụ

0
Bar Horing Amir 2019-01-13 13:37.

Trạng thái là nguồn gốc của sự thật, nơi dữ liệu của bạn tồn tại. Có thể nói trạng thái tự thể hiện qua đạo cụ.

Cung cấp đạo cụ cho các thành phần là điều giữ cho giao diện người dùng của bạn đồng bộ với dữ liệu của bạn. Một thành phần thực sự chỉ là một hàm trả về đánh dấu.

Với cùng một đạo cụ (dữ liệu để nó hiển thị), nó sẽ luôn tạo ra cùng một đánh dấu .

Vì vậy, các đạo cụ giống như các đường ống dẫn dữ liệu từ nguồn gốc đến các thành phần chức năng.

0
T.akanda 2019-02-16 10:58.

Props: đại diện cho dữ liệu "chỉ đọc", không thay đổi và tham chiếu đến các thuộc tính từ thành phần cha mẹ.

Trạng thái: đại diện cho dữ liệu có thể thay đổi, cuối cùng ảnh hưởng đến những gì được hiển thị trên trang và được quản lý nội bộ bởi chính thành phần và thay đổi ngoài giờ thường do người dùng nhập.

0
Amaan Salheen 2019-02-22 03:39.

Sự khác biệt chính là trạng thái là riêng tư đối với một thành phần và chỉ có thể được thay đổi bên trong thành phần đó trong khi các đạo cụ chỉ là giá trị tĩnh và khóa cho thành phần con được chuyển qua thành phần mẹ và không thể thay đổi bên trong thành phần con

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Thời gian, sự kiên nhẫn, thời gian, sự cống hiến và thời gian chỉ là một vài trong số những thứ mà Peter Bellerby cần để thành lập và sau đó điều hành Bellerby & Co. Globemakers, một trong những công ty duy nhất trên Trái đất vẫn sản xuất các quả địa cầu bằng tay.

Năm giai đoạn đau buồn sau khi mất việc làm

Năm giai đoạn đau buồn sau khi mất việc làm

Đó là một ngày thứ Bảy, máy bay của tôi hạ cánh, và tôi đã sẵn sàng để thư giãn trong một kỳ nghỉ cuối tuần ngắn ngủi, khi một email đến trên điện thoại của tôi. Tôi đã mất việc.

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Nếu bạn đã từng bị đánh cắp danh tính của mình, bạn biết đó là một trải nghiệm đáng sợ và căng thẳng. Một cách không phổ biến để ngăn chặn nó? Tín dụng bị đóng băng.

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Eleanor (Kristen Bell) dường như đã tình nguyện cho chúng tôi làm vật tưởng nhớ. NBC's The Good Place là một chương trình thích thử thách tốt.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language