Sự khác biệt giữa ReactJS giữa tiểu bang và quốc tịch

Question

Tôi đang cố gắng hiểu sự khác biệt chính xác giữa các thành phần trạng thái không trạng thái và trạng thái của React. Ok, các thành phần không trạng thái chỉ làm một cái gì đó, nhưng hãy nhớ không có gì, trong khi các thành phần stateful có thể làm tương tự, nhưng họ nhớ những thứ trong phạm vi this.state. Đó là lý thuyết.

Nhưng bây giờ, hãy kiểm tra cách hiển thị mã này bằng cách sử dụng, tôi gặp một chút rắc rối khi tạo sự khác biệt. Tôi có đúng với hai ví dụ sau không? Sự khác biệt duy nhất thực sự là định nghĩa của hàm getInitialState.

Ví dụ về một thành phần không quốc tịch:

var React = require('react'); 

var Header = React.createClass({ 
    render: function() { 
     return(
      <img src={'mypicture.png'} /> 
     ); 
    } 
}); 

module.exports = Header; 

Ví dụ về một thành phần stateful:

var React = require('react'); 

var Header = React.createClass({ 

    getInitialState: function() { 
     return { 
      someVariable: "I remember something" 
     }; 
    }, 

    render: function() { 
     return(
      <img src={'mypicture.png'} /> 
     ); 
    } 
}); 

module.exports = Header; 

Answer 1

Vâng, đó là loại sự khác biệt. Trừ trường hợp được stateful phần bạn cũng thay đổi tiểu bang có thể, sử dụng this.setState ví dụ:

var React = require('react'); 

var Header = React.createClass({ 

    getInitialState: function() { 
     return { 
      imageSource: "mypicture.png" 
     }; 
    }, 

    changeImage: function() { 

     this.setState({imageSource: "differentpicture.png"}); 
    }, 

    render: function() { 
     return(
      <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} /> 
     ); 
    } 
}); 

module.exports = Header; 

Vì vậy, trong ví dụ trên, changeImagequản lý tình trạng của các thành phần (mà cũng sẽ gây ra tất cả các thành phần con/phụ thuộc sẽ được hiển thị lại).

Một nơi nào đó trong ứng dụng, bạn cần phải ràng buộc dữ liệu hoặc ghi nhớ mọi thứ. Các thành phần không có trạng thái là câm (và điều đó là tốt), chúng không thể nhớ và chúng không thể cung cấp ngữ cảnh cho các phần khác của giao diện người dùng. Các thành phần có trạng thái cung cấp ngữ cảnh cần thiết keo.

Mặt khác, thành phần không quốc tịch chỉ nhận được bối cảnh truyền (thường là thông qua this.props:

var React = require('react'); 

var Header = React.createClass({ 
    render: function() { 
     return(
      <img src={this.props.imageSource} /> 
     ); 
    } 
}); 

ReactDOM.render(<Header imageSource="myImage.png"/>, document.body); 

Trong ví dụ trên, bạn có thể thấy rằng trong render, imageSource được thông qua tại như một thuộc tính và sau đó thêm vào các thành phần quốc tịch this.props đối tượng.

Answer 2

trong một định nghĩa đơn giản, nó có thể được giải thích như

Nếu hành vi của một bộ phận phụ thuộc vào st ăn của thành phần sau đó nó có thể được gọi là thành phần stateful và nếu hành vi độc lập với trạng thái của nó thì nó có thể là một thành phần không trạng thái.

Khi một thứ gì đó "trạng thái", đó là điểm trung tâm lưu trữ thông tin trong bộ nhớ về trạng thái của ứng dụng/thành phần. Khi một cái gì đó là "phi trạng thái", nó tính toán trạng thái bên trong của nó nhưng nó không bao giờ trực tiếp làm biến đổi nó.

Các thành phần không trạng thái đôi khi được gọi là thành phần câm

Lợi thế chính không trạng thái trên thành phần trạng thái là khả năng mở rộng và khả năng sử dụng lại.