Home Công nghệ React Bind Pattern: 5 cách chỉ định tham chiếu this

React Bind Pattern: 5 cách chỉ định tham chiếu this

409

Bài viết được sự cho phép của tác giả: Lưu Bình An

Để thay đổi ngữ cảnh của chữ this trong javascript, sử dụng ở đâu và như thế nào cho hợp lý nhất
  3 bước tối ưu hiệu năng React App bằng các API mới của React
  5 sai lầm thường thấy khi viết react component

Sử dụng React.createClass

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.Componentthis 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.

Sử dụng Arrow Function trong thuộc tính của class

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

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

Xem thêm các việc làm Developer hấp dẫn tại TopDev

Báo cáo bài viết vi phạm bản quyền>>