Học ReactJS trong 15 phút (Phần cuối)
programming
62
reactjs
21
Javascript
199
White

Hoàng Nguyễn viết ngày 10/04/2016

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.

var Form = React.createClass({
    render: function(){
        return (
            <div>
                <input type="submit" onClick={this.props.onUserClick} />
                <h3>You have pressed the button {this.props.counter} times!</h3>
            </div>
        );
    }
});

var App = React.createClass({
    getInitialState: function(){
        return {
            counter: 0
        }
    },
    onUserClick: function(){
        var newCount = this.state.counter += 1;
        this.setState({
            counter: newCount
        });
    },
    render: function(){
        return (
            <div>
                <h1> Welcome to the counter app!</h1>
                <Form counter={this.state.counter} onUserClick={this.onUserClick} />
            </div>
        );
    }
});

React.render(<App />,  document.getElementById("app"));

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.

<input ref="textField" ... />

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

var Form = React.createClass({
  focusOnField: function(){
      React.findDOMNode(this.refs.textField).focus();
  },
  render: function(){
      return (
          <div>
              <input 
                  type="text"
                  ref="textField" />
              <input 
                  type="submit"
                  value="Focus on the input!" 
                  onClick={this.focusOnField} />
          </div>
      );
  }
});
var App = React.createClass({
  render: function(){
      return (
          <div>
              <h1> Welcome to the focus app!</h1>
              <Form />
          </div>
      );
  }
});
React.render(<App />,  document.getElementById("app"));

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.

var App = React.createClass({
    getInitialState: function(){
        return {
            todos: ["eat","code","sleep"] 
        }
    },
    render: function(){
        var todos = this.state.todos.map(function(todo,index){
            return <li key={index}>{todo}</li>
        });             
        return (
            <div>
                <h1> Welcome to the ToDo list!</h1>
                <ul>
                    {todos}     
                </ul>
            </div>
        );
    }
});

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!

Nguồn: Codeaholicguy

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Nguyễn

35 bài viết.
364 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
76 34
Nhu cầu về Javascript developer hiện nay trong thị trường IT là rất lớn. Nếu bạn có kiến thức ở mảng này thì cơ hội nghề nghiệp cũng như thu nhập c...
Hoàng Nguyễn viết hơn 1 năm trước
76 34
White
49 19
Microservices hiện đang nhận được rất nhiều sự chú ý: các bài viết, các blog, các cuộc thảo luận trên phương tiện truyền thông, trên mạng xã hội, v...
Hoàng Nguyễn viết hơn 2 năm trước
49 19
White
29 2
Chuyện tối ưu code, (Link) là công việc hàng ngày của mỗi lập trình viên, điều đó ai cũng biết. Nhưng liệu code tối ưu có phải là code đẹp, và ngượ...
Hoàng Nguyễn viết 3 tháng trước
29 2
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
1 4
Mục đích của cái log này là gì? ReactJS và React Native đang là những cái tên khá hot hiện nay, với phương châm "Learn once, write anywhere" , bộ ...
Trung Trần viết gần 2 năm trước
1 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
35 bài viết.
364 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!