- Sử dụng
React.createClass
- Bind trong lúc render
- Sử dụng Arrow function
- Bind trong cunstructor
- Sử dụng
Arrow Function
trong thuộc tính của class
React.createClass
Sử dụng Nếu sử dụng React.createClass
react tự động bind toàn bộ từ khóa this
const Contacts = React.createClass({
render() {
return (
<div onClick={this.handChange} />
);
}
});
Tuy nhiên từ khi ES6 có hỗ trợ class
, React.createClass có thể bị tách ra các release trong tương lai.
Bind trong lúc render
Nếu khai báo một component React bằng cách extends React.Component
, this
sẽ không được tự động bind như đã nói ở trên
class Contacts extends React.Component{
render() {
return (
<div onClick={this.handChange.bind(this)}/>
);
}
};
Cách này tuy là sạch sẽ gọn ràng dễ hiểu, tuy nhiên lại ảnh hưởng nhiều tới performance vì mỗi function sẽ reallocated lúc render. Kinh nghiệm không bind bằng cách này
Sử dụng Arrow function
Tương tự như cách trên, sử dụng arrow function để không thay đổi giá trị của this
lúc render
class Contacts extends React.Component{
render() {
return (
<div onClick={e => this.handChange} />
);
}
};
Cách này cũng không nên làm vì ảnh hương tới performance luôn
Bind trong cunstructor
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
Đây là cách được khuyến cáo sử dụng, nếu thật sự quan tâm tới performance thì nên sử dụng cách này khi muốn bind từ khóa this
.
Arrow Function
trong thuộc tính của class
Sử dụng Muốn sử dụng cách này, phải bật tính năng transform-class-properties trong Babel, xem thêm package này tại http://babeljs.io/docs/plugins/transform-class-properties
handleChange = () => {
// call this function from render
// and this.whatever in here works fine.
};
Đây cũng là cách mà mình thường sử dụng nhất vì vừa sạch vừa tốt cho performance
Initializing...