Reactjs - Bài 5 - state là gì

Goal

Giới thiệu về state trong React và cách sử dụng nó.

Giới thiệu

Hãy chạy lại file props trong ví dụ trước:

https://slack-files.com/T035VUSF2-F060CUFL1-939dd508dd

Mở Google Chrome Dev Tool, và in ra các giá trị như sau:


(Click vào để mở lớn)

Ta có thể thấy,
props đóng vai trò như là IF để truyền data từ parent vào trong Component, nó được “sở hữu” bởi parent đó. Có thể coi props như một Component’s configuration.
Còn state như là một biến private của Component. Chúng ta có thể change states bằng cách gọi this.setState()
Lưu ý: trong bài trước, để thay đổi props ta phải gọi setProps từ bên ngoài Component: AvatarComponent.setProps

Ví dụ để hiểu rõ hơn state:

Ta sẽ lấy ví dụ trước và thử đưa state vào trong Component Avatar. Bởi vì state dùng cho việc thay đổi nội bộ trong Component, cho nên ta hãy xem cái gì trong nội bộ Avatar Component có thể thay đổi được một cách nội bộ.
OK, ta thử thay đổi image của avatar. Ý tưởng như sau: khi click vào button, thì image của avatar thay đổi.
Source code:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>Basic Example Props</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <script type="text/jsx">

    var Avatar = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        width: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired
      },

      getInitialState() {
        return {
          src: 'http://canime.files.wordpress.com/2010/05/mask-dtb.jpg'
        };
      },

      onClick() {
        this.setState({src: 'http://38.media.tumblr.com/9f96b52d8fda03c77d0b620d4f12a128/tumblr_n0lvu7fSqE1sont7fo1_500.gif'});
      },

      render() {
        //var src='http://canime.files.wordpress.com/2010/05/mask-dtb.jpg';
        return (
          <div>
            <img  src={this.state.src} width={this.props.width} height={this.props.height} alt="alt" />
            <span>{this.props.name}</span>
            <button onClick={this.onClick}>So HOT!!!!</button>
          </div>
        );
      }

    });


    var AvatarEl = <Avatar name="Foo" width={100} height={100}/>;

    var AvatarComponent = React.render(AvatarEl, document.body);


  </script>
</body>
</html>
Hãy thử chạy file source trên, click vào button, bạn có thấy image của avatar đã thay đổi!
Về cơ bản cấu trúc một Component có state như sau:
  1. method render()
  2. method getIntialState(): initial giá trị state cho Component. Trong ví dụ trên, chúng ta initial giá trị src của state là http://canime.files.wordpress.com/2010/05/mask-dtb.jpg
  3. method handle Event: đây là method dùng để handle sự kiện trong Component. Hay cũng chính là callback function của event. Trong ví dụ trên, khi có sự kiện click thì nó thực thi method onClick() thay đổi image source của avatar.
  4. this.setState: được gọi trong method onClick, sẽ thay đổi data trong Component -> trigger render -> rerender View của Component.

Sự giống nhau props và state

  • props và state đều là plain JS objects
  • props và state đều trigger render update khi thay đổi

Sự khác nhau props và state

Features props state
Can get initial value from parent Component? Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No
Nhãn: