Tìm hiểu ReactJs cơ bản và cách sử dụng

React.render(
    <div>Hello, world!</div>,
    document.body
);

React.render(
    React.createElement('div', {}, 'Hello, world!'),
    document.body
);

<div id="greeting-container" className="container">
    <Greeting name="World"/>
</div>

React.createElement("div",
    {
        id: "greeting-container",
        className: "container"
    },
    React.createElement(Greeting, {name: "World"})
)

var names = ['Moe', 'Larry', 'Curly'];

React.render(
    <div>
        {
            names.map(function (name) {
                return <div>Hello, {name}!</div>
            })
        }
    </div>,
    document.body
);

var R = React.DOM;
Greeting = React.createFactory(GreetingClass);

React.render(
  R.div({id: "greeting-container", className: "container"},
    Greeting({name: "World"})
  ),
  document.body
);

<p>
  The live example is the same. The only difference is that we render to <code>mountNode</code>, which is just the DOM node for the example.
</p>

R.p({},
  'The live example is the same. The only difference is that we render to ',
  R.code({},
    'mountNode'
  ),
  ', ' +
  'which is just the DOM node for the example.'
)

var notepad = {
  notes: [
    {
      id: 1,
      content: "Hello, world!\nBoring.\nBoring.\nBoring."
    },
    {
      id: 2,
      content: "React is awesome.\nSeriously, it's the greatest."
    },
    {
      id: 3,
      content: "Robots are pretty cool.\nRobots are awesome, until they take over."
    },
    {
      id: 4,
      content: "Monkeys.\nWho doesn't love monkeys?"
    }
  ]
}

var NotesList = React.createClass({
  render: function () {
    var notes = this.props.notepad.notes;

    return (
      <div className="note-list">
      {
        notes.map(function (note) {
          var title = note.content.substring(0,
            note.content.indexOf('\n')
          );
          title = title || note.content;

          return (
            <div key={note.id} className="note-summary">
              {title}
            </div>
          );
        })
      }
      </div>
    );
  }
});

và các thẻ tương tự thì có vẻ không hữu dụng lắm. Nhưng bạn lại có thể tạo các components của riêng mình. Thậm chí là tốt hơn, giao diện và tính năng của các components đó hoàn toàn được điều khiển bởi các thuộc tính được truyền vào nó. Component NotesList trên hoạt động như một hàm thuần. Tất cả các trạng thái của nó được truyền vào như các thuộc tính. Nếu sau đó chúng ta quyết định ứng dụng sẽ hỗ trợ nhiều notepads thì component này thực sự hữu ích. Chúng ta chỉ truyền vào notepad những gì chúng ta muốn render, và component sẽ làm việc của nó. Sau này việc hủy bỏ component cũng sẽ dễ dàng hơn.

var NoteSummary = React.createClass({
  render: function () {
    var note = this.props.note;
    var title = note.content.substring(0,
      note.content.indexOf('\n')
    );
    title = title || note.content;

    return (
      <div className="note-summary">{title}</div>
    );
  }
});

var NotesList = React.createClass({
  render: function () {
    var notes = this.props.notepad.notes;

    return (
      <div className="note-list">
      {
        notes.map(function (note) {
          return (
            <NoteSummary key={note.id} note={note}/>
          );
        })
      }
      </div>
    );
  }
});

Khá dễ dàng phải không? Giống như tái cấu trúc một function lớn thành các functions nhỏ hơn, bạn có thể chia nhỏ một đoạn dữ liệu và đặt nó vào bên trong một component khác. Sau đó chỉ cần gọi component mới của bạn, truyền nó vào các mệnh đề thích hợp. Bây giờ chúng ta có thể sử dụng component NoteSummary bất cứ đâu chúng ta muốn. Nếu một note nào đó sai, chúng ta sẽ tìm được vị trí lỗi đó. Lỗi này hoặc nằm trong component hoặc trong các mệnh đề được truyền vào để tạo nó.

Reactive components

Các ví dụ trên đủ dùng để tạo một trang tĩnh, nhưng nếu phải tạo app làm công việc gì đó, như react-ive thì sao? Yên tâm đi, React đảm bảo những điều đó cho bạn.

Nếu trạng thái của app thay đổi, chỉ cần re-render nó

Cho phép tôi nhắc lại: Nếu bất cứ điều gì, bất cứ ở đâu trong app của bạn có sự thay đổi, hãy ném hết tất cả đi và re-render chúng.

Làm việc với React bạn cần phải quên đi những thói quen cũ khi sử dụng jQuery, nơi bạn phản hồi một sự kiện nào đó và sau đó thì tinh chỉnh DOM. Hãy quên các ràng buộc hai chiều (two-way binding) phức tạp hay các theo dõi về scopes trong Angular. Bất cứ khi bạn có app state mới, chỉ cần re-render app state đó.

Giờ chúng ta sẽ thực hiện việc thêm các notes. Với ví dụ đơn giản này, chúng ta sẽ thêm một số functions ở top-level để xử lý các events tương tác từ người dùng. Chúng ta sẽ giữ các components được tách biệt bằng cách truyền các handlers của chúng vào đó. Khi dev một app thực sự, bạn có thể muốn sử dụng một cái gì đó giống như Flux, đó là một pattern cho việc sử dụng các events được kiểm soát một cách chặt chẽ.

Hãy đặt phương thức React.render vào trong phương thức onChange để ta có thể gọi nó mỗi khi có sự thay đổi. Chúng ta cũng đặt vào đó một handler onAddNote để thêm notes mới và một handler onChangeNote để thay đổi notes. Tôi sẽ định nghĩa chúng như sau:

var onChange = function () {
  React.render(
    <Notepad notepad={notepad} onAddNote={onAddNote}
      onChangeNote={onChangeNote}/>,
    document.body
  );
};

onChange();

Bất cứ khi nào có sự thay đổi, chúng ta sẽ gọi onChange và nó sẽ re-render app state. Đừng lo lắng về cách hiển thị của nó. Tất cả được thực hiện với sự kỳ diệu của virtual DOM. React sẽ quyết định giữ DOM elements nào ở lại hay bỏ elements nào đi một cách rất thông minh. Nếu đó chính xác là DOM elements cần để re-render, nó sẽ giữ chúng và tinh chỉnh các thuộc tính và nội dung khi cần thiết.

Ngoài ra, chỉ cần bạn sử dụng các key phù hợp khi cần thiết, bạn sẽ không phải lo lắng về việc một input bị mất focus. Nếu đã từng sử dụng Backbone theo cách này, bằng việc xóa sạch DOM và bắt đầu lại từ đầu, bạn sẽ biết rằng khi một input được xóa bỏ và add lại vào document, nó sẽ mất focus, như thế thực sự là sẽ gây khó chịu cho user. Với React, nếu bạn re-render cùng một element, DOM element tương ứng sẽ vẫn còn, vì vậy user vẫn có thể tiếp tục nhập dữ liệu thoải mái ngay cả khi DOM bị thay đổi.

Bây giờ, hãy viết các handlers để add notes. Chúng ta sẽ loại bỏ các notes tĩnh lúc trước đi, thêm một cơ chế sinh ID, và tiếp tục theo dõi các notes đã chọn:

var notepad = {
  notes: [],
  selectedId: null
};

var nextNodeId = 1;

var onAddNote = function () {
  var note = {id: nextNodeId, content: ''};
  nextNodeId++;
  notepad.notes.push(note);
  notepad.selectedId = note.id;
  onChange();
};

Ta cũng thêm một handler để edit các notes mới này

var onChangeNote = function (id, value) {
  var note = _.find(notepad.notes, function (note) {
    return note.id === id;
  });
  if (note) {
    note.content = value;
  }
  onChange();
};

Một lần nữa, chúng ta chỉ cần làm mọi thứ thật đơn giản. Trong một app lớn hơn, chúng ta có thể sẽ muốn làm gì đó phức tạp hơn. Nguyên tắc sẽ vẫn như cũ. Các components của chúng ta sẽ có một số cơ chế để thông báo rằng user đã thay đổi điều gì đó. Khi có thay đổi, chúng ta sẽ có một số cơ chế để re-render app. Component của chúng ta sẽ không bao giờ trở thành nguồn tin tưởng để thể hiện sự tồn tại của dữ liệu. Dữ liệu đó luôn luôn nằm bên ngoài component.

Hãy tạo một component để chỉnh sửa notes

var NoteEditor = React.createClass({
  onChange: function (event) {
    this.props.onChange(this.props.note.id, event.target.value);
  },

  render: function () {
    return (
      <textarea rows={5} cols={40}
                value={this.props.note.content}
                onChange={this.onChange}/>
    );
  }
});

Component này nhận handler onChange, nó sẽ được sử dụng để cập nhật những thay đổi của note.

Chúng ta tạo một component Notepad mới để render danh sách notes, một button để tạo một note mới, và một editor để chỉnh sửa note.

var Notepad = React.createClass({
  render: function () {
    var notepad = this.props.notepad;

    var editor = null;

    var selectedNote = _.find(notepad.notes, function (note) {
      return note.id === notepad.selectedId;
    });

    if (selectedNote) {
      editor = <NoteEditor note={selectedNote}
        onChange={this.props.onChangeNote}/>
    }

    return (
      <div id="notepad">
        <NotesList notepad={notepad}/>
        <div>
          <button onClick={this.props.onAddNote}>Add note</button>
        </div>
        {editor}
      </div>
    );
  }
});

Thử kiểm tra xem nào

Bạn thêm một note mới và nhận thấy rằng tiêu đề thay đổi mỗi khi bạn nhập thêm note vào. Điều này quá tuyệt vời vì:

• Các components của chúng ta không liên quan đến app state của chúng. Tất cả tồn tại tách biệt với view.
• Các components của chúng ta không phải lo lắng về trạng thái của DOM. Nó chỉ cung cấp các fresh elements để render, và React thao tác DOM một cách kỳ diệu. Chúng ta chỉ render, ném chúng đi, sau đó lặp lại.
• Các components của chúng ta cũng giống như các hàm thuần. Chúng ta cung cấp nó trong trạng thái hiện tại, sau đó chỉ chỉ cần ánh xạ lại trạng thái đó.

Trong một app lớn hơn, quan điểm thứ ba có thể nằm ngoài tầm kiểm soát của chúng ta. Truyền vào callbacks thông qua một hệ phân cấp lồng nhau có thể sẽ khó sử dụng và quản lý. Tuy nó nằm ngoài phạm vi của bài viết này, nhưng Flux là giải pháp thường được trích dẫn cho vấn đề này. Nếu có thể, hãy làm theo các model đơn giản của việc truyền vào callbacks, code của bạn sẽ trở nên linh động hơn rất nhiều.

Hãy thêm một handler để chọn một note

var onSelectNote = function (id) {
  notepad.selectedId = id;
  onChange();
};

Ta sẽ truyền handler này vào component Notepad

var onChange = function () {
  React.render(
    <Notepad notepad={notepad} onAddNote={onAddNote}
      onSelectNote={onSelectNote}
      onChangeNote={onChangeNote}/>,
    document.body
  );
};

Sau đó ta có thể đưa code này vào component Notepad

var Notepad = React.createClass({
  render: function () {
    var notepad = this.props.notepad;

    var editor = null;

    var selectedNote = _.find(notepad.notes, function (note) {
      return note.id === notepad.selectedId;
    });

    if (selectedNote) {
      editor = <NoteEditor note={selectedNote}
        onChange={this.props.onChangeNote}/>
    }

    return (
      <div id="notepad">
        <NotesList notepad={notepad}
          onSelectNote={this.props.onSelectNote}/>
        <div>
          <button onClick={this.props.onAddNote}>Add note</button>
        </div>
        {editor}
      </div>
    );
  }
});

Trong component NotesList, chúng ta phản hồi một click bằng một summary và gọi callback. Ta cũng có thể style cho item được chọn

var NotesList = React.createClass({
  render: function () {
    var notepad = this.props.notepad;
    var notes = notepad.notes;

    return (
      <div className="note-list">
      {
        notes.map(function (note) {
          return (
            <div key={note.id} className={
              notepad.selectedId === note.id ? 'note-selected' : ''
            }>
              <a href="#" onClick={
                this.props.onSelectNote.bind(null, note.id)
              }>
                <NoteSummary note={note}/>
              </a>
            </div>
          );
        }.bind(this))
      }
      </div>
    );
  }
});

Bây giờ thì thử xem

Click vào tiêu đề trong list sẽ cho phép bạn chỉnh sửa note. App của chúng ta sẽ trở nên phức tạp hơn, nhưng từng components vẫn duy trì được sự đơn giản. Bất cứ khi nào bạn cảm thấy không kiểm soát được một component, hãy chia nhỏ nó ra.

Trạng thái tạm thời

Đôi khi một component cũng cần giữ một số trạng thái, đó không hẳn là application state. Giả sử chúng ta muốn thêm chức năng xóa một note. Và chúng ta muốn xác nhận trước khi xóa. Chúng ta không thực sự cần thiết phải giữ trạng thái có muốn tiếp tục xóa hay không, mà đơn giản chỉ cần throw state (giống throw exception) đó ra. Vì thế chúng ta muốn component của mình giữ state đó hơn là duy trì nó ở bên ngoài. React có một cơ chế mạnh mẽ để thiết lập và sử dụng state nội tại này.

Trước tiên hãy thêm một delete handler và kết nối với nó mà không cần xác thực. Các bước tương tự như trên. Chúng ta thêm một handler delete, truyền nó vào, hook onClick vào một button cho handler đó. Bây giờ bạn có thể thực hiện việc xóa note!

Trong trường hợp này, button delete là một phần của note editor. Các nguyên tắc tương tự được áp dụng nếu bạn muốn thêm nó vào summary list.

Đây là note editor của chúng ta khi không có sự xác thực

var NoteEditor = React.createClass({
  onChange: function (event) {
    this.props.onChange(this.props.note.id, event.target.value);
  },

  render: function () {
    return (
      <div>
        <div>
          <textarea rows={5} cols={40}
            value={this.props.note.content} onChange={this.onChange}/>
        </div>
        <button onClick={
          this.props.onDelete.bind(null, this.props.note.id)
        }>Delete note</button>
      </div>
    );
  }
});

Để làm nó có trạng thái (stateful), ta cần sử dụng hai thứ. Method getInitialState cho phép chúng ta cung cấp một trạng thái ban đầu cho component, và method setState cho phép chúng ta thay đổi trạng thái của component. Bất cứ khi nào chúng ta gọi setState, re-render sẽ tự động diễn ra. Lưu ý rằng setState là không đồng bộ. Re-render sẽ diễn ra khi React sẵn sàng. Trong các trình duyệt hiện đại, nó thường diễn ra trong không dưới 1/60 giây . (Các trình duyệt hiện đại render 60 lần một giây, và React hook vào nó thông qua requestAnimationFrame)

Đây là component tương tự khí có sự xác thực

var NoteEditor = React.createClass({
  getInitialState: function () {
    return {
      isConfirming: false
    };
  },

  onChange: function (event) {
    this.props.onChange(this.props.note.id, event.target.value);
  },

  onDelete: function () {
    if (this.state.isConfirming) {
      this.props.onDelete(this.props.note.id);
      this.setState({isConfirming: false});
    } else {
      this.setState({isConfirming: true});
    }
  },

  onCancelDelete: function () {
    this.setState({isConfirming: false});
  },

  render: function () {
    return (
      <div>
        <div>
          <textarea rows={5} cols={40}
            value={this.props.note.content}
            onChange={this.onChange}/>
        </div>
        <button onClick={this.onDelete}>
        {
          this.state.isConfirming ? 'Confirm' : 'Delete note'
        }
        </button>
        {
          this.state.isConfirming ? <button onClick={this.onCancelDelete}>Cancel</button> : null
        }
      </div>
    );
  }
});

Chúng ta sử dụng getInitialState để thiết lập một biến cờ là isConfirming thành false. Sau đó chúng ta sử dụng nó để chặn việc thực thi handler delete thay vì để nó thông qua. Nếu xác nhận thì ta xóa nó, nếu không chúng ta set flag isConfirming thành true. Trong method render, chúng ta cũng render button Cancel để có thể set flag isConfirming về false.

Đây cũng là một ý tưởng tốt để cung cấp một key cho editor của chúng ta

editor = <NoteEditor key={selectedNote.id} note={selectedNote} onChange={this.props.onChangeNote} onDelete={this.props.onDeleteNote}/>

Bằng cách này, khi chúng ta chuyển sang chỉnh sửa một note khác, React loại bỏ component, và ta sẽ không kết thúc với trạng thái từ note đó.

Lifecycle methods

Đôi khi bạn muốn làm một điều gì đó khi một component được thêm vào hoặc bị gỡ bỏ khỏi DOM. Để giải quyết vấn đề này, React cung cấp các methods lifecycle. Có rất nhiều các methods lifecycle khác nhau, ví dụ như, phản hồi khi các thuộc tính thay đổi cho một component.

Ta sẽ thực hiện component Pulse. Nó giống như thẻ blink cũ nhưng ít khó chịu hơn. Chúng ta sẽ dùng nó để wrap confirm button để nó trông rõ ràng hơn.

var Pulse = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.5) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  componentWillUnmount: function () {
    clearInterval(this.timer);
  },

  render: function () {
    return (
      <span style={{opacity: this.state.opacity}}>
      {this.props.children}
      </span>
    );
  }
});

Có một vài điều cần lưu ý ở đây.

Một lần nữa chúng ta lại sử dụng getInitialState để khởi tạo trạng thái thuộc tính opacity. Chúng ta hook componentDidMount để làm điều gì đó khi component được thêm vào DOM. Ở đây, chúng ta thiết lập this.timer là khoảng thời gian sẽ giảm opacity xuống 50% và sau đó xóc cho nó lên 100%. Chúng ta hook componentWillUnmount để làm clear timer Chúng ta render bằng cách sử dụng opacity trong state. Sau đó chúng ta sẽ sử dụng component Pulse cho button confirm như sau:

this.state.isConfirming ?
  <div>
    <Pulse>
      <button style={{color: 'red'}}
        onClick={this.onDelete}>Confirm</button>
    </Pulse>
    <button onClick={this.onCancelDelete}>Cancel</button>
  </div> :
  <button onClick={this.onDelete}>Delete note</button>

Đây là bản full HD của em nó!

Pattern này thường hữu ích khi lắng nghe các sự kiện. (Trên thực tế, đó là cách Flux hoạt động). Chỉ cần lắng nghe sự kiện khi component được mount. Set state khi sự kiện xảy ra, và component được re-render. Làm sạch trước khi component được unmount.

Các nguyên tắc cần tuân theo

Đến giờ chắc bạn đã trở thành một chuyên gia về React rồi chứ? Cứ bình tĩnh. Những điều tốt đẹp trên về React thực sự chỉ là một vài khái niệm cốt lõi. Một khi đã biết cách để xây dựng các components của riêng mình, bạn sẽ không ngạc nhiên lắm khi gặp một vấn đề nào đó, ở đâu đó. Tuy nhiên, có một số điều bạn cần phải biết để tránh nhầm lẫn.

Am hiểu thuật ngữ về virtual DOM

Hầu hết các virtual DOM đều rất ảo diệu, và bạn có thể bỏ qua việc thực thi. Nhưng ít nhất thì bạn muốn cũng muốn hiểu rõ về các thuật ngữ. Tôi khuyên bạn nên xem Những vấn đề chính về thuật ngữ DOM trong React của Sebastian Markbåge trong đó mô tả mọi thứ một cách chi tiết. Tôi đã sử dụng hầu hết các thuật ngữ đó trong bài viết này, nhưng Wiki sẽ làm sáng tỏ thêm cho bạn.

Ngoài ra, các thuật ngữ đã thay đổi một chút kể từ các phiên bản trước của React. Vì vậy, các bài viết cũ có thể sẽ gọi chúng bằng một cái tên khác.

Đừng thay đổi bất cứ điều gì trong phương thức render

Method render của bạn đại diện cho view tại một thời điểm cụ thể. Để React thực hiện công việc của mình một cách chính xác, bạn cần đưa nó một ít dữ liệu và cho nó render toàn bộ trước khi thay đổi bất cứ điều gì. Trước đây bạn sẽ re-render mỗi khi có sự thay đổi, bạn không thể thay đổi trong khi bạn đang render. Nó giống như việc bạn nhờ họa sĩ vẽ chân dung mình nhưng nửa chừng lại thay đổi ý định thành vẽ một ai khác. Hẳn là người họa sĩ đó sẽ nhìn bạn một cách rất vui vẻ cho xem. Tương tự như thế, React sẽ phàn nàn về bất kỳ công việc nào như vậy. Thậm chí là tệ hơn, nếu bạn quản lý những thứ dễ dàng thay đổi như thế, bạn có thể sẽ gặp phải những bug rất kỳ lạ.

Đừng trông chờ children luôn là một mảng

Bạn nhớ this.props.children ở trên chứ? Chúng ta đã sử dụng nó trong component Pulse.

render: function () { return ( <span style={{opacity: this.state.opacity}}> {this.props.children} </span> ); }enter code here Ta truyền nó vào component span. Tuy nhiên, hãy tưởng tượng khi chúng ta muốn làm điều gì đó với mỗi child, ta sẽ làm như sau

render: function () {
  return (
    <span style={{opacity: this.state.opacity}}>
      <ul>
      {
        this.props.children.map(function (child) {
          return <li>{child}</li>;
        });
      }
      </ul>
    </span>
  );
}

Sau đó chúng ta có thể dùng nó như sau

<Pulse>
  <div>Moe</div>
  <div>Larry</div>
  <div>Curly</div>
</Pulse>

Vậy là ok rồi đấy. Nhưng nếu bạn dùng nó thế này thì sao

<Pulse>
  <div>Joe</div>
</Pulse>

Có vẻ như cũng ổn phải không? Nhưng thật đáng tiếc là không. Trong trường hợp đó, React sẽ gửi bạn một element duy nhất cho this.props.children. Sau đó bạn sẽ nhận được một thông báo lỗi vì element đó không có method map. Nếu luôn muốn coi nó như một mảng, trước tiên bạn sẽ phải ép nó vào một mảng. Hơi khó khăn một chút, nhưng nó sẽ giúp React tránh khỏi việc tạo các mảng rác không cần thiết.

Ngoài ra, nếu bạn làm như sau:

this.props.children sẽ trở thành không xác định, kể cả khi không có gì được truyền vào

Nhận biết được sự khác biệt giữa controlled và uncontrolled components

Cần phải thật tinh tế để biết được sự khác nhau giữa các components trên. Bạn có thể xem tài liệu về React, nhưng tôi đã hơi bối rối sau khi đọc nó. Để có thể chỉnh sửa các form elements (như <input>, <textarea> hay <select>), bạn có thể truyền giá trị vào theo hai cách khác nhau.

Nếu truyền vào value, form element sẽ nhận giá trị đó bất kể người dùng có nhập gì vào. Trong trường hợp đó, nó là một "controlled" component, có nghĩa là bạn đang quản lý value. Nên nếu bạn truyền "cun" vào value sau đó user thêm "t" để tạo thành "cunt", bạn phải set value thành "cunt". Còn nếu không, value sẽ vẫn là "cun". Nhìn chung đó là điều tốt, vì bạn sẽ nhìn thấy app state đang giữ cùng một value như các DOM elements.

Nếu bạn truyền vào defaultValue, form element sẽ hiển thị value ban đầu đó, nhưng sau này, cho dù có truyền vào value nào thì value được hiển thị sẽ là value cuối cùng user nhập vào.

Nói chung, có thể bạn sẽ muốn sử dụng đến các controlled components. Nhưng nếu bạn đang tạo một form hoài cổ nơi user chỉ cần submit nó, thì uncontrolled components là giải pháp. Ngoài ra nếu bạn có một số trạng thái tạm thời không hợp lệ, bạn sẽ muốn sử dụng uncontrolled components. Đối với cá nhân tôi, trong trường hợp đó, tôi thích sử dụng trạng thái tạm thời để giữ value và vẫn sử dụng các controlled components.

Hãy để ý tới công việc không đông bộ

Trong các ví dụ trên, chúng tôi không bao giờ làm bất cứ việc load không đồng bộ (load async - ajax) nào, nhưng tất nhiên trong thực tế, bạn sẽ làm điều đó. Nếu đang làm một ứng dụng nhỏ, component của bạn sẽ làm tốt một số công việc không đồng bộ. Trong trường hợp đó, hãy thực hiện công việc bên trong method componentDidMount giống như cách chúng ta đã làm với setTimeout. Khi function async được trả về, chỉ cần re-render setState. Có nghĩa là bạn sẽ cần một số "zero state" view thông minh trước khi bạn có bất kỳ dữ liệu nào. Nó sẽ trở thành một spinner đơn giản hay bất kế thứ gì.

Sau này khi user thực hiện một số action, bạn sẽ chỉ cần phân chia các sự kiện và làm một số công việc không đồng bộ. Tuy nhiên, phải rất cẩn thận nếu bạn không muốn nhận được các kết quả không phù hợp. Ví dụ, nếu một async request được khởi tạo sau mỗi lần ấn một phím, một vài request trong đó sẽ trả về sai thứ tự và cho bạn các kết quả không phù hợp. May mắn thay React có thể roll-back một giá trị cũ nếu bạn nói cho nó cách biết thực hiện công việc đó bằng setState.

Trong các ứng dụng lớn hơn, tôi khuyên bạn nên đưa các công việc không đồng bộ ra khỏi component của mình và gạt nó sang một bên. Càng nhiều components của bạn vận hành đồng bộ thì càng dễ dàng có từng đấy lý do để chỉnh sửa và debug chúng. Thực hiện công việc không đồng bộ có thể làm cho những người làm công việc này cảm thấy không liên quan gì lắm so với mục đích của họ.

Nếu bạn sử dụng React cho các công việc không đồng bộ, thì ít nhất đó là một ý tưởng tốt để đẩy công việc đó cho các top-level components, để các child component của bạn có thể được tái sử dụng một cách dễ dàng.

Virtual DOM không phải là shadow DOM

Đã có lần tôi nghe vài người nói rằng họ hiểu virtual DOM vì họ nghĩ nó tương tự như shadow DOM. Thực ra là nó chẳng liên quan gì đến nhau cả.

Một số thuộc tính ở HTML khác so với ở JSX

Khi sử dụng <div>, <span>, và các HTML elements khác, hầu hết bạn có thể coi các elements đó giống như HTML tương đương của chúng. Nhưng vẫn có một số thuộc tính sẽ khác nhau. Một số điểm khác biệt đáng chú ý như:

• Tất cả đều là camel-cased
• Ngoại trưc các thuộc tính về dữ liệu
• class là className
• style là một đối tượng JSON
• Các thuộc tính value và defaultValue đã đề cập ở trên.

Nếu bạn có một block HTML muốn dịch sang JSX, bạn có thể sử dụng compiler service này

Keys được định nghĩa trong parent components, không phải child components

Hãy chú ý ví dụ sau:

var StoogeList = React.createClass({
  render: function () {
    return (
      <ul>
      {
        this.props.stooges.map(function (stooge) {
          return <Stooge key={stooge.id}/>;
        });
      }
      </ul>
    );
  }
});

var Stooge = React.createClass({
  render: function () {
    return <li>{this.props.stooge.name}</li>;
  }
});

StoogeList phải xác định keys cho mỗi children của chúng. Component Stooge không cần quá lo lắng về keys, vì nó chỉ render một element duy nhất.

Key phải ở trên cùng của child

Chúng ta sẽ tái cấu trúc ví dụ trên thành

var StoogeList = React.createClass({
  render: function () {
    return (
      <ul>
      {
        this.props.stooges.map(function (stooge) {
          return <li key={stooge.id}><Stooge/></li>;
        });
      }
      </ul>
    );
  }
});

var Stooge = React.createClass({
  render: function () {
    return <div>{this.props.stooge.name}</div>;
  }
});

Lưu ý rằng chúng ta phải chuyển key từ <Stooge> sang <li>. Đây thường là nguồn gốc của những sai lầm, khi cấu trúc đã được thay đổi nhưng key bị bỏ lại trong một nested element.

Các thuộc tính JSX không phải là JSON

Đây là lỗi ta thường mắc phải

render: function () {
  return <div style={fontWeight: 'bold'}></div>
}

Bạn thấy vấn đề rồi chứ. Đáng lẽ ra phải là

render: function () {
  return <div style={{fontWeight: 'bold'}}></div>
}

Bạn cần dấu ngoặc {} để đưa nó lại thành JavaScript và một {} khác để tạo đối tượng của mình

Tối ưu hóa? để sau nhé!!!

Xây dựng ứng dụng của bạn với giả định rằng nó sẽ chạy một cách mượt mà mà không cần tối ưu hóa. Còn rất lâu nữa giả định đó sẽ chính xác. Trong các trình duyệt hiện đại, JavaScript hoạt động rất nhanh, còn DOM thì rất chậm. React đang quan tâm đến vấn đề thứ hai nên bạn đừng lo lắng quá nhiều về code JavaScript còn sót lại của mình. React cung cấp cho bạn sự linh hoạt để refactor một cách dễ dàng, nhưng một khi bạn bắt đầu viết code theo cách tối ưu hóa, nó sẽ khó khăn hơn. Và caching sẽ xảy ra các lỗi ngoài dự kiến.

Nếu bạn thực sự khó chịu về vấn đề trình diễn code, hãy quay vòng suy nghĩ và bảo đảm các giải pháp sẽ có ý nghĩa đối với user. Đôi khi nếu React có vấn đề, user có lẽ cũng sẽ gặp khó khăn khi làm việc trong một UI không tốt.

Nếu thực sự cần phải trình diễn code, bạn có thể xem shouldComponentUpdate. Nó hoàn toàn nằm ngoài phạm vi của bài viết này, nhưng bạn cũng có thể dựa vào đó và nói rằng "Này React, chả có cái gì thay đổi đâu, hãy re-render đi."

Cuối cùng là, hãy bắt tay vào xây dựng một ứng dụng sử dụng React của bạn nhé!

Tài liệu tham khảo:

• Nguồn tham khảo tại: https://zapier.com/engineering/react-js-tutorial-guide-gotchas/
• http://facebook.github.io/react/docs/getting-started.html
• http://jsfiddle.net/reactjs/69z2wepo/