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ẽ mergedata
vàothis.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ọicallback
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ùngstate
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
haysetState
, 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ọicallback
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ệnonChange
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ụngcheckedLink
thay vì sử dụngvalueLink
. 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ứcrequestChange
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
All rights reserved