addthis-react-flux-javascript-scaling

Học ReactJS trong 15 phút (Phần cuối)

Chúng ta đã được tìm hiểu về props và state trong React ở bài trước, ở bài cuối cùng này chúng ta sẽ cùng tìm hiểu về cách dữ liệu di chuyển trong React. Nào cùng bắt đầu bấm đồng hồ đếm ngược năm phút nhé.

Inverse data flow

Chúng ta đã nói rất nhiều về việc làm thế nào luồng dữ liệu chỉ có một chiều trong React, từ cha đến con. Điều này thật ra không hoàn toàn đúng, vẫn có cách để thêm một dòng dữ liệu theo hướng ngược lại (Inverse data flow).

Bạn sẽ cần điều này khi mà một component nằm sâu bên trong cây phân cấp cần phải thay đổi trạng thái của cha nó.

Dưới đây là một ví dụ về việc làm thế nào để khi click vào button trong Form component mà nó sẽ trigger việc thay đổi trạng thái (state change) trong App component, cái nằm bên trên nó, cũng như việc có thể truy xuất vào phương thức onUserClick.

Như bạn có thể thấy, chúng ta chỉ đơn giản truyền xuống phương thức onUserClick như là một props, đã có thể kích hoạt việc tương tác ngược từ Form component lên App component, và trigger một trong số những method của nó.

refs và findDOMNode

Thỉnh thoảng, bạn có thể sẽ muốn tiếp cận cây DOM, và làm một số thay đổi, nhưng không cần thiết phải sử dụng state hay là props. Trong những tình huống như thế này, bạn sẽ cần lấy các node như mong muốn.

Thật may mắn, React cung cấp cho bạn một cách thủ công để có thể lấy DOM node. Đơn giản bạn gọi phương thức React.findDOMCode(component), và truyền vào component mà bạn mong muốn.

Để lấy được tham chiếu của component đã chọn bạn có thể sử dụng thuộc tính refs. Đơn giản thêm một ref vào trong phần tử như thế này.

Từ đó bạn có thể tham chiếu thành phần input khai báo như trên thông qua this.refs.textField.

Ví dụ.

Kết quả của đoạn code trên là thành phần input sẽ được focus khi bạn click button.

Thuộc tính key

Khi bạn tạo các component một cách dynamically, mỗi thành phần đều cần thuộc tính key, và thuộc tính này là duy nhất (unique). Trong suốt quá trình rendering, các component sẽ bị xáo trộn, chúng cũng có thể bị destroy hay recreate tùy vào sự khác nhau của mỗi giải thuật, việc gán cho nó một key để định danh và đảm bảo rằng các component đều ở đúng vị trí của nó, tối ưu hóa việc rendering.

Như thế này.

Tóm lại

Thật ra nói về React thì có khá nhiều thứ đề học, tuy nhiên nếu hiểu được hết các khai niệm tôi đã đưa ra thì bạn đã biết đủ để có thể viết được một ứng dụng từ React.

Hãy nhớ việc luyện tập mỗi ngày để cũng như tìm hiểu thêm các tài liệu khác để nâng cao kiến thức cũng như kỹ năng của mình, nếu bạn chưa biết bắt đầu từ đâu thì hãy bắt đầu từ việc tìm hiểu những chiêu trò giúp bạn học nhanh hơn nhé. Cuối cùng nếu bạn có bất cứ câu hỏi gì, đừng ngần ngại hãy comment ngay hoặc liên lạc với tôi qua email, facebook…

Chúc may mắn!

Advertisements

3 thoughts on “Học ReactJS trong 15 phút (Phần cuối)

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s