Goal
Hiểu về life cycle của ComponentVí dụ dẫn nhập
<!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 src="https://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
<script type="text/jsx">
var Avatar = React.createClass({
propTypes: {
id: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
initialLike: React.PropTypes.bool.isRequired,
// Thêm Interface onDelete()
onDelete: React.PropTypes.func.isRequired,
},
getInitialState() {
return {
liked: this.props.initialLike
};
},
onClick() {
this.setState({liked: !this.state.liked});
},
// Ủy quyền cho Component cha xử lý.
_onDelete() {
this.props.onDelete(this.props.id);
},
render() {
var textLike = this.state.liked ? 'like' : 'haven\'t liked';
return (
<li key={this.props.id}>
<span>{this.props.id}</span>
<img src={this.props.src} width={this.props.width} height={this.props.height} alt="alt" />
<span>{this.props.name}</span>
<button onClick={this.onClick}>{textLike}</button>
<button onClick={this._onDelete}>Delete</button>
</li>
);
}
});
var request = window.superagent;
var Avatars = React.createClass({
getInitialState() {
return {
avatars: [
{id: 1, name: "Avatar 1", height: 100, width: 100, like: false, src: "http://canime.files.wordpress.com/2010/05/mask-dtb.jpg"},
{id: 2, name: "Avatar 2", height: 100, width: 100, like: true, src: "http://z4.ifrm.com/30544/116/0/a3359905/avatar-3359905.jpg"},
{id: 3, name: "Avatar 3", height: 100, width: 100, like: false, src: "http://www.dodaj.rs/f/O/IM/OxPONIh/134.jpg"}
]
}
},
// Thêm method deleteItem() set lại State (chứa các Component con) cho Component cha này
deleteItem(id) {
this.setState({
avatars: this.state.avatars.filter(function(avatar){
return avatar.id !== id;
})
});
},
componentDidMount: function() {
var self = this;
request.get('http://localhost:3000/api/employees', function(res) {
console.log(res);
self.setState({avatars: res.body});
});
},
render() {
var avatars = this.state.avatars.map(function(avatar){
// use below solution
// map(function(){},this)
// or map(function(){}.bind(this))
// or var that = this; onDelete = {that.deleteUser}
// to pass this value to map function.
// bind onDelete (event) to deleteUser.
return <Avatar onDelete={this.deleteItem} id={avatar.id} name={avatar.name} width={avatar.width} height={avatar.height} src={avatar.src} initialLike={avatar.like} />;
}, this);
return (
<ul>
{avatars}
</ul>
);
}
});
var AvatarsComponent = React.render(<Avatars />, document.body);
</script>
</body>
</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:
- superagentjs để thay cho jQuery Ajax
- 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/