1.2K 56 57

Đã đăng vào thg 1 26, 2016 5:55 CH 7 phút đọc

2.1K

Tương tác với UIs trong ReactJS

Bài đăng này đã không được cập nhật trong 8 năm

I. Interactivity and Dynamic UIs

I.1. Event Handling and Synthetic Events

Có thể dễ dàng truyền event handler giống như với HTML thông thường. React đảm bảo mọi event hoạt động giống như trên IE8 và React biết cách bubble và capture các sự kiện thông qua spec, Các sự kiện sẽ được xử lý bởi event handler và được đảm bảo phù hợp với w3c spec. Nó chạy được trên tất các các trình duyệt khác nhau.

I.2 Autobinding

Khi làm việc với js thông thường, khi tạo ra một callback bạn thường phải bind một phưowng thức tới một thành phần một cách tường minh.
Với React Mọi phương thức sẽ tự động được bind tới các component. React lưu vào cache các phương thức đã được bind, điều này làm giảm tải CPU vào tiết kiệm bộ nhớ.

I.3 Event delegation

Thực tế thì React không mang theo các event hander bên trong các node của chúng. Khi React được load nó sẽ lắng nghe tất các các event ở top level sử dụng event listener đơn. Khi một thành phần dược đưa vào hay xóa khỏi DOM thì event của nó sẽ được thêm hoặc xóa tương ứng, hay nói cách khác thì các event và các sự kiện sẽ được map với nhau.

I.4. Các thành phần cũng giống như State Machines

React coi các UIs như các state machines, bạn dễ dàng cập nhật được các trạng thái của các thành phần và render một UI mới dựa trên những trạng thái đó. React sẽ đảm nhiệm việc cập nhật những sự thay đổi vào trong DOM.
Cách mà State trong React làm việc: Có một cách thông thường để thông báo Data của React thay đổi bằng cách gọi hàm setState(data, callback), phương thức này sẽ merge data vào this.state và re-render lại component, sau khi đã render lại component, callback sẽ được gọi. Trong hầu hết các trường hợp thì bạn không cần gọi callback bởi vì React sẽ đảm nhận việc đó, và luôn đảm bảo UI của bạn được luôn luôn được cập nhật.
Hầu hết các thành phần đều lấy dữ liệu từ props, thế nhưng trong một số trường hợp bạn cần phải dùng state như cần phải response lại những gì mà user vừa input, một request lên server, hay những dữ liệu liên quan đến thời gian. ví dụ state:

II. Multiple Components

Ví dụ

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'https://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

ReactDOM.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

II.1 Ownership

Trong ví dụ trên thì Avatar chứa hay nói chính xác hơn nó sở hữu 2 instance của ProfilePic và ProfileLink. Trong React thì thành phần sở hữu sẽ gán props cho các thành phần khác (các thành phần bị sở hữu). Một thành phần không thể tự biến đổi props của nó, mà nó luôn luôn được gán bởi các thành phần sở hữu của nó (owner), điều này đảm bảo tính nhất quán cho UIs. Chú ý: Mối quan hệ giữa sở hửu - bị sở hữ owner-ownee và mối quan cha con parent-child. Mối quan hệ owner-ownee là ở trong React, còn mối quan hệ cha con là ở trong DOM trong ví dụ trên thì Avatar có mối quan hệ owner-ownee với div. Nhưng div lại có mối quan hệ cha con với 2 instances ProfilePic và ProfileLink.

II.1 Children

Khi tạo ra một instance của React, bạn có thể thêm các thành phần khác của React học biểu thức Javascript trong thẻ đóng mở của React.

<Parent><Child /></Parent>

Thành phần cha có thể truy cập vào thành phần con bằng this.props.children

React sẽ cập nhật DOM dựa vào thứ tự của các thành phần con.

III. Cơ chế two-way binding

Trong React luồng dữ liệu theo kiểu one-way: từ thành phần owner đến thành phần con. Điều đó giải thích tại sao dữ liệu chỉ đi theo một chiều. Nhưng trong thực tế dữ liệu không phải lúc nào cũng là một chiều. Ví dụ: khi nhập dữ liệu vào một input và có phản hồi ngay khi người dùng nhập invalid data chẳng hạn.
Để làm được việc này React đưa ra một add-on gọi là ReactLink

III.1. ReactLink

Để sử dụng ReactLink bạn phải include eact-with-addons.js vào trong HTML của bạn
Thực ra nó giống như việc lắng nghe sự kiện như onChange hay setState, khi sử dụng ReactLink bạn không cần phải update bất cứ gì vào owner hay update vào các thành phần cha, mọi thứ sẽ được tự động update.

ví dụ

Xử lý two-way theo kiểu bắt các sự kiện

var NoLink = React.createClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({message: event.target.value});
  },
  render: function() {
    var message = this.state.message;
    return <input type="text" value={message} onChange={this.handleChange} />;
  }
});

Nhưng ta có thể dùng một cách khác mà React đã cung cấp

var LinkedStateMixin = require('react-addons-linked-state-mixin');

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

LinkedStateMixin sẽ thêm phương thức linkState vào trong React component. linkState() sẽ trả về một ReactLink object có chứa giá trị hiện tại của React state, và sẽ tự động gọi callback khi dữ liệu thay đổi.
ReactLink object có thể truyền các giá trị từ thành phần con lên thành phần cha, hay truyền từ thành phần cha xuống thành phần con giống như props làm việc.
valueLink nó giống như việc xử lý sự kiện onChange

III.2 valueLink và checkedLink

Tất cả các thành phần trong React đều có thể sử dụng valueLịnk ngoại trừ checkbox, Checkbox sẽ sử dụng checkedLink thay vì sử dụng valueLink. Về cơ bản thì 2 phương thức này hoạt đồng là như nhau chỉ có điều là áp dụng cho các component khác nhau.
valueLink là một object có chứa 2 properties là value và requestChange
Trong đó requestChange là một phương thức có một đối số, đối số này là dữ liệu mới được cho vào để thay thế dữ liệu cũ. Phương thức requestChange sẽ được gọi mỗi khi dữ liệu từ phía user thay đổi.

Một ví dụ đơn giản sau để có thể thấy được valueLink là hàm như thế nào

var valueLink = {
  value: this.state.key,
  requestChange: function(newValue) {
    this.setState({key: newValue})
  }.bind(this)
}

Nguồn tham khảo

https://facebook.github.io/react/

ReactJS