Reactjs - Bài 7 - component lifecyle là gì ?

Goal

Hiểu về life cycle của Component

Ví dụ dẫn nhập

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  5.   <title>Basic Example Props</title>
  6. </head>
  7. <body>
  8.   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>  
  9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  10.   <script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
  11.   <script type="text/jsx">
  13.     var Avatar = React.createClass({
  14.       propTypes: {
  15.         id: React.PropTypes.string.isRequired,
  16.         name: React.PropTypes.string.isRequired,
  17.         width: React.PropTypes.number.isRequired,
  18.         height: React.PropTypes.number.isRequired,
  19.         initialLike: React.PropTypes.bool.isRequired,
  20.         // Thêm Interface onDelete()
  21.         onDelete: React.PropTypes.func.isRequired,
  22.       },
  23.       getInitialState() {
  24.         return {
  25.           liked: this.props.initialLike
  26.         };
  27.       },
  28.       onClick() {
  29.         this.setState({liked: !this.state.liked});
  30.       },
  31.       // Ủy quyền cho Component cha xử lý.
  32.       _onDelete() {
  33.         this.props.onDelete(this.props.id);
  34.       },
  35.       render() {
  36.         var textLike = this.state.liked ? 'like' : 'haven\'t liked';
  37.         return (
  38.           <li key={this.props.id}>
  39.             <span>{this.props.id}</span>
  40.             <img  src={this.props.src} width={this.props.width} height={this.props.height} alt="alt" />
  41.             <span>{this.props.name}</span>
  42.             <button onClick={this.onClick}>{textLike}</button>
  43.             <button onClick={this._onDelete}>Delete</button>
  44.           </li>
  45.         );
  46.     }
  47.     });
  48.     var request = window.superagent;
  49.     var Avatars = React.createClass({
  51.       getInitialState() {
  52.         return {
  53.           avatars: [
  54.             {id: 1, name: "Avatar 1", height: 100, width: 100, like: false, src: "http://canime.files.wordpress.com/2010/05/mask-dtb.jpg"},
  55.             {id: 2, name: "Avatar 2", height: 100, width: 100, like: true, src: "http://z4.ifrm.com/30544/116/0/a3359905/avatar-3359905.jpg"},
  56.             {id: 3, name: "Avatar 3", height: 100, width: 100, like: false, src: "http://www.dodaj.rs/f/O/IM/OxPONIh/134.jpg"}
  57.           ]
  58.         }
  59.       },
  60.       // Thêm method deleteItem() set lại State (chứa các Component con) cho Component cha này
  61.       deleteItem(id) {
  62.         this.setState({
  63.           avatars: this.state.avatars.filter(function(avatar){
  64.             return avatar.id !== id;
  65.           })
  66.         });
  67.       },
  68.       componentDidMount: function() {
  69.         var self = this;
  70.         request.get('http://localhost:3000/api/employees', function(res) {
  71.         console.log(res);
  72.           self.setState({avatars: res.body});
  73.         });
  74.       },
  76.       render() {  
  77.         var avatars = this.state.avatars.map(function(avatar){
  78.         // use below solution
  79.         // map(function(){},this) 
  80.         // or map(function(){}.bind(this)) 
  81.         // or var that = this; onDelete = {that.deleteUser}
  82.         // to pass this value to map function.
  83.         // bind onDelete (event) to deleteUser.
  84.           return <Avatar onDelete={this.deleteItem} id={avatar.id} name={avatar.name} width={avatar.width} height={avatar.height} src={avatar.src} initialLike={avatar.like} />;
  85.         }, this);
  86.         return (
  87.           <ul>
  88.             {avatars}
  89.           </ul>
  90.         );
  91.       }
  92.     });
  93.     var AvatarsComponent = React.render(<Avatars />, document.body);
  94.   </script>
  95. </body>
  96. </html>
Trong ví dụ trên, tôi có đưa thêm vào một method là componentDidMount(). Trong phương thức này tôi sẽ lấy dữ liệu từ server lên và change state của Component là avatars. Method componentDidMount() là nằm trong LifeCycle của Component.
  • Trong ví dụ trên, tôi có dùng:
    1. superagentjs để thay cho jQuery Ajax
    2. loopback để tạo api server.
      (Bạn có thể dùng json server để có thể tạo một Mock API server đơn giản hơn)

Tham khảo

Link dưới đây minh họa khá rõ về Life Cycle của Component. Mời các bạn tham khảo.
http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
Nhãn: