Khi chúng ta xây dựng ứng dụng React, bạn sẽ cần phải đụng đến nhiều kiểu Component. Nhiều khả năng sẽ là Component như là InputForm mà sẽ yêu cầu các phương thức khác nhau. Nó rất có thể sẽ có một vài thay đổi state và có lẽ cần truy cập đến backend của bạn. Sau đó rất phổ biến chúng ta sẽ có một component như là Title mà sẽ không yêu cầu các phương thức và có thể chỉ truy cập đến props mục đích để render ra dữ liệu.

Stateful

Một ví dụ rất cơ bản về InputForm Component như bên dưới đây:

class InputForm extends Component {
 constructor(props) {
  super(props);
  this.state = {
    value: '',
  };
  this.handleChange = this.handleChange.bind(this);
 }
 handleChange(event) {
  this.setState({ value: event.target.value });
 }
 
 render() {
  return(
   <div>
    <input 
      type='text'
      value={this.state.value}
      onChange={this.handleChange}>
    </input>
   </div>
  )
 }
}

Như bạn nhìn thấy, trong Component này chúng ta sẽ thiết lập một state mới bên trong hàm constructor . State trong React  chỉ dành riêng cho các trao đổi bên trong Component. Nói cách khác, State là biến đóng. Nó chỉ tồn tại bên trong phạm vị của Component. Các biến này có thể được truyền ra bên ngoài Component hiện tại, nhưng khi điều này xảy ra nó sẽ thay đổi cách chúng ta tiếp cận nó. Khi trạng thái được truyền vào bên trong Component nó trở thành prop bởi vì nó được truyền vào thông qua các thuộc tính của Component khác.

Có thể hiểu điều này giống như là cuộc đối thoại bên trong. Như một con người, chúng ta thường nghĩ đến chính mình. Chúng ta có thể giao tiếp với chính mình, thay đổi quan điểm, xây dựng những ý tưởng mới, nhưng trong bản chất của nó những suy nghĩ và ý tưởng chỉ tồn tại bên trong tâm trí. Chỉ khi chúng ta chia sẻ những suy nghĩ đó với những người khác thì lúc đó mới nói ra những ý tưởng đó. Trong quá trình giao tiếp này, chúng ta đã chuyển đổi ý tưởng của mình sang phạm vi suy nghĩ của người khác. Trong suy nghĩ của họ, ý tưởng của chúng ta đã trở thành props hay các thuộc tính, được truyền vào bên trong thông qua Component khác hay có thể hiểu suy nghĩ của một người. Mặc dù chúng ta có thể lựa chọn thay đổi của mình state bằng các thuộc tính được truyền vào bên trong, nhưng những hành động này chỉ xảy ra khi chúng ta có chủ đích làm việc đó. Nếu lựu chọn không có hành động nào thì state sẽ không thay đổi.

Thay đổi có mục đích mà chúng ta đang đề cập đến ở đây có thể được hiểu như là khi chúng ta gọi phương thức setState(). Thường được sử dụng như là this.setState(), phương thức nhận các giá trị, các tham số, props… mà chúng ta muốn thay đổ state và gán giá trị đó cho biến được chỉ định trong state. Ví dụ

this.state = {
 tree: '',
}
this.setState({ tree: Redwood });

sẽ cho ra kết quả

console.log(this.state.tree) //Redwood

State là rất hữu ích. Như là cách hay nhất khi phát triển ứng dụng trong React, bạn có thể thử hoặc thay đổi state càng nghiều càng tốt. Nhưng hãy chú ý rằng this.setState() là hàm chạy bất đồng bộ. Nếu bạn có ý định render ra thông báo để miêu tả giá trị được cập nhập, bạn cần đảm bảo rằng hàm chạy bất đồng bộ đã hoàn thành trước khi câu lệnh render ra thông báo được gọi.

Stateless

Có rất nhiều trường hợp mà ở đó chúng ta không muốn nắm bắt state. Giả sử chúng ta chỉ muốn thay đổi state của Component khác. Có thể chúng ta muốn in ra username của một cá nhân trong đoạn text in đậm, to trên đầu trang web. Chúng ta đã nắm giữ username trong một Component tách rời. Vì chúng ta không cần nắm giữ thông tin này và chúng ta chỉ muốn in đậm, một stateless Component sẽ là lựa chọn tốt nhất để render ra kết quả mong muốn. Chúng ta có thể có username được truyền vào trong như một props và đơn giản là render thông tin này bằng hàm render. Ví dụ sẽ trông như sau

export default class Title extends Component {
 render() {
  return (
   <div>
    <h1>{this.props.username}</h1>
   </div>
  );
 };
};
//Ở đây chúng ta chỉ đơn giản truyền giá trị vào trong Component
<Title username='tommy' />
//Và xem cách thực hiện điều này khi sử dụng state của component khác
<Title username={this.state.username} />
//Khi được gọi bên trong component khác

Như bạn đã nhìn thấy ví dụ bên trên, chúng ta đã truyền username vào bên trong stateless component như một props. Tất cả những gì nó cần làm là render thông tin. Bằng cách prop vào trong thẻ H1 chúng ta đã render nó trong một font lớn và hiển thị như một Title. Stateless component là rất hữu ích và có thể nhìn thấy trong xuyên suốt ứng dụng React ở khắp mọi nơi. Một ví dụ cho bạn khi sử dụng stateless component là nếu thông tin của bạn không bao giờ cần thay đổi. Giả sử bạn muốn hiển thị logo của mình ở trên đầu góc bên trái. Logo chắc chắn sẽ không cần thay đổi thường xuyên và rõ ràng chỉ cần thay đổi trực tiếp. Trong trường hợp này, bạn chỉ cần tạo một stateless Component và fix cứng logo của bạn trong đó và render ở bất cứ chỗ nào mà nó được đặt trong code