Năm ngoái tôi có viết một cuốn sách ngắn vọn vẻn 100 trang về React.js. Còn năm nay, tôi sẽ tự thử thách mình bằng cách tóm gọn lại vọn vẻn trong bài viết này mọi thứ bạn cần biết về React.js.

Bài viết sẽ không giải thích React.js là gì hay vì sao bạn phải học nó. Thay vào đó, tôi sẽ tập trung viết về những thông tin thực tiễn về phần nền tảng của React.js dành cho những bạn đã biết về JavaScript cũng như hiểu tương đối với DOM API.

Tất cả những ví dụ dưới đây đều mang tính tham khảo. Mục đích là giúp bạn hiểu rõ hơn về những khái niệm trong bài viết.

Nền tảng #1: Mọi thứ của React đều là về components

React được tạo ra xoay quanh khái niệm components tái sử dụng được. Bạn define các component nhỏ và gộp chúng lại để tạo ra những component to hơn.

Tất cả các component đều có thể tái sử dụng, thậm chí là qua nhiều project khác nhau.

Một React component – ở dạng đơn giản nhất – chính là JavaScript function:

// Example 1
// https://jscomplete.com/repl?j=Sy3QAdKHW
function Button (props) {
  // Returns a DOM element here. For example:
  return <button type="submit">{props.label}</button>;
}
// To render the Button component to the browser
ReactDOM.render(<Button label="Save" />, mountNode)

Các bạn đừng lo nếu chưa hiểu rõ những code trên bởi nó sẽ được giải thích trong những phần tiếp theo trong bài viết, kể cả ReactDOM. Bạn chỉ cần hiểu đơn giản nó là một  render function.

Ở đoạn cuối, ReactDOM.render ám chỉ địa điểm của các yếu tố của DOM mà React sẽ lấy và điều khiển. Trong jsComplete REPL, thì bạn có thể làm mọi thứ trên với một variable đặc biệt là mountNode.

Những điều tiếp theo sẽ dựa trên ví dụ #1:

• Component name bắt đầu với một kí tự in hoa. Đây là yêu cầu bắt buộc bởi chúng ta phải làm việc với cả HTML và React. Nếu bạn đặt tên thường như “button” cho React component thì ReactDOM sẽ bỏ qua function và render một HTML button trống.
• Mọi component đều nhận một list của các attributes, giống như HTML. Trong React, list này được gọi là props. Với một function component, bạn có thể đặt tên nó tùy ý thích.
• Trong ví dụ trên, cách viết có vẻ giống HTML trong returned output của Button function component. Tuy vậy, nó không phải là JavaScript hay HTML, cũng chả phải là React.js. Thế nhưng lại trở nên khá nổi tiếng tới mức được xem là chuẩn trong các React applications. Nó có tên gọi là JSX và là một JavaScript extension. Hơn nữa, JSX là một compromise! Dù bạn có thử call và return bất cứ HTML element trong function trên thì chúng đề support cho nhau cả.

Nền tảng #2: JSX là cái quái gì vậy?

Ví dụ 1 ở trên có thể được viết hoàn toàn bằng React.js mà không cần tới JSX như sau:

// Example 2 -  React component without JSX
// https://jscomplete.com/repl?j=HyiEwoYB-
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// To use Button, you would do something like
ReactDOM.render(
  React.createElement(Button, { label: "Save" }),
  mountNode
);

createElementfunction là function chính trong React top-level API. Nó vốn chỉ là 1 trong 7 phần của level đó mà bạn cần phải học. React API nhỏ tới mức như vậy đấy.

Như DOM, bản thân nó cũng có document.createElement function để tạo ra một yếu tố được xác định bởi một tag name, React’s createElement là một function cao cấp với khả năng làm được mọi thứ mà document.createElement có thể làm được. Đồng thời, nó còn có thể tạo ra một yếu tố đại diện cho React component. Chúng ta thực hiện điều đó trong ví dụ trên với  Button component.

Không như  document.createElement, React’s  createElement chấp nhận cả những yếu tố đại diện như là con của yếu tố khác. Nói cách khác  createElement thật sự tạo ra cả một cây dòng dõi các yếu tố.

Sau đây là một ví điển hình:

// Example 3 -  React’s createElement API
// https://jscomplete.com/repl?j=r1GNoiFBb
const InputForm = React.createElement(
  "form",
  { target: "_blank", action: "https://google.com/search" },
  React.createElement("div", null, "Enter input and click Search"),
  React.createElement("input", { name: "q", className: "input" }),
  React.createElement(Button, { label: "Search" })
);
// InputForm uses the Button component, so we need that too:
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// Then we can use InputForm directly with .render
ReactDOM.render(InputForm, mountNode);

Hẳn bạn cũng có thể thấy rằng:

• InputFormkhông phải là một React component; mà chỉ là một React element. Đó là nguyên nhân ta dùng nó trực tiếp trong  ReactDOM.render call chứ không phải với  <InputForm />.
• React.createElement  function chấp nhận nhiều arguments.
• Chúng ta có thể nest React.createElement call là bởi vì nó toàn là JavaScript.
• Điểm đáng tranh cãi thứ 2 trong  React.createElement  có thể là null hoặc một object trống khi không cần có attributes hay props cho element.
• Chúng ta có thể trộn HTML element với React components. Cứ nghĩ đơn giản là HTML elements như built-in React components.
• React’s API cố gắng trở nên giống DOM API nhất có thể, đó là nguyên nhân vì sao chúng ta dùng  className thay vì class cho input element. Và mọi người cũng đều mong React’s API sẽ thành một phần của DOM API bởi nó sẽ cực kì tiện lợi.

Những đoạn code trong ví dụ trên là điều mà browser sẽ hiểu khi bạn thêm React library. Browser không hề đụng tới bất cứ JSX nào. Tuy vậy, chúng ta thường thích làm việc với HTML thay vì các  createElement calls này. Do đó mà mới có những JSX compromise. Chúng ta có thể viết lại những code trên với một cú pháp tương tự như HTML:

// Example 4 - JSX (compare with Example 3)
// https://jscomplete.com/repl?j=SJWy3otHW
const InputForm =
  <form target="_blank" action="https://google.com/search">
    <div>Enter input and click Search</div>
    <input name="q" className="input" />
    <Button label="Search" />
  </form>;
// InputForm "still" uses the Button component, so we need that too.
// Either JSX or normal form would do
function Button (props) {
  // Returns a DOM element here. For example:
  return <button type="submit">{props.label}</button>;
}
// Then we can use InputForm directly with .render
ReactDOM.render(InputForm, mountNode);

Một số điều nổi bật trong ví dụ trên:

• Nó không phải là HTML. Chúng ta vẫn dùng className  thay vì  class.
• Chúng ta vẫn xem những thứ trông giống HTML ở trên như JavaScript.

Ví dụ 4 này chính là JSX. Và ví dụ 3 chính là phiên bản được compiled của nó dành cho browser. Để thực hiện được điều đó ta cần dùng tới một quá trình tiền xử lý để convert JSX version thành  React.createElement version.

Và đó chính là JSX. nó là một compromise cho phép chúng ta viết các React components trong một cú pháp tương tự như HTML.

Mặt khác, JSX cũng có thể được dùng lên chính nó.

Nền tảng #3: Bạn có thể dùng JavaScript expressions bất cứ nơi đâu trong JSX.

Trong một JSX section, bạn có thể dùng bất cứ JavaScript expression nào miễn nằm trong dấu ngoặc nhọn:

// Example 5 -  Using JavaScript expressions in JSX
// https://jscomplete.com/repl?j=SkNN3oYSW
const RandomValue = () => 
  <div>
    { Math.floor(Math.random() * 100) }
  </div>;
// To use it:
ReactDOM.render(<RandomValue />, mountNode);

Có thể thấy rằng không hề có giới hạn cho bất kì JavaScript expression trong dấu ngoặc nhọn. Nó tương tự như interpolation syntax  ${}  trong JavaScript template literals.

Chỉ có một hạn chế duy nhất trong JSX: phải là expression. Thế nên, ví dụ như, bạn sẽ không thể dùng một if statement nhưng một expression thứ ba thì mọi thứ lại bình thường.

JavaScript variables cũng được xem là các expressions, thế nên khi component nhận một list của prop (RandomValue component thì không, props là optional), ban có thể dùng những props này trong dấu ngoặc nhọn. Chúng ta cũng đã thực hiện điều này với Button  component (trong ví dụ 1)

Các objects JavaScript cũng là những expressions. Đôi khi chúng ta dùng JavaScript object trong dấu ngoặc nhọn, nhìn thì giống như xài cả hai lần dấu ngoặc nhọn nhưng thực chất nó là object trong dấu ngoặc nhọn.

// Example 6 - An object passed to the special React style prop
// https://jscomplete.com/repl?j=S1Kw2sFHb
const ErrorDisplay = ({message}) =>
  <div style={ { color: 'red', backgroundColor: 'yellow' } }>
    {message}
  </div>;
// Use it:
ReactDOM.render(
  <ErrorDisplay 
    message="These aren't the droids you're looking for" 
  />,
  mountNode
);

Lưu ý rằng tôi chỉ destructure message ra khỏi props argument. Đó là Javascript. ngoài ra, style attribute ở trên cũng là 1 trường hợp đặc biệt (không phải HTML, mà gần giống như DOM API). Chúng ta sử dụng 1 object với vai trò như giá trị của style attribute. Object đó sẽ định vị styles tương tự những gì chúng ta làm với Javascript.

Bạn còn có thể sử dụng element React trong JSX, vì đó cũng là 1 expression. Nên nhớ là element React là 1 hàm call:

// Example 7 - Using a React element within {}
// https://jscomplete.com/repl?j=SkTLpjYr-
const MaybeError = ({errorMessage}) =>
  <div>
    {errorMessage && <ErrorDisplay message={errorMessage} />}
  </div>;
  
// The MaybeError component uses the ErrorDisplay component:
const ErrorDisplay = ({message}) =>
  <div style={ { color: 'red', backgroundColor: 'yellow' } }>
    {message}
  </div>;
// Now we can use the MaybeError component:
ReactDOM.render(
  <MaybeError
    errorMessage={Math.random() > 0.5 ? 'Not good' : ''}
  />,
  mountNode
);

 MaybeError component ở trên sẽ chỉ hiển thị  ErrorDisplay component nếu có một  errorMessage string pass qua nó và một  div trống. React xem xét  {true}, {false}, {undefined}, và {null}  để thành valid element children, vốn không render bất cứ thứ gì.

Bạn cũng có thể dùng tất cả các phương pháp JavaScript functional trên collections (map, reduce, filter, concat …) bên trong JSX. Đó là vì chúng là return expressions:

// Example 8 - Using an array map inside {}
// https://jscomplete.com/repl?j=SJ29aiYH-
const Doubler = ({value=[1, 2, 3]}) =>
  <div>
    {value.map(e => e * 2)}
  </div>;
// Use it
ReactDOM.render(<Doubler />, mountNode);

Bạn có thể thấy cách Tôi đã cho value prop một default value như trên, bởi vì nó hoàn toàn là Javascript. Cũng như việc tôi output một array expression trong  div. React hoàn toàn ok với điều đó.

Nền tảng #4: bạn có thể viết React components với JavaScript classes

Các function components đơn giản vô cùng thích hợp cho những nhu cầu đơn giản, nhưng đôi khi chúng ta cần hơn cả thế. React hỗ trợ tạo components bằng JavaScript class syntax. Sau đây là  Button component (trong ví dụ 1) được viết với class syntax:

// Example 9 - Creating components using JavaScript classes
// https://jscomplete.com/repl?j=ryjk0iKHb
class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}
// Use it (same syntax)
ReactDOM.render(<Button label="Save" />, mountNode);

Class syntax này rất đơn giản. Define một class với việc mở rộng React.Component. Việc class định dạng một instance function đơn  render(), và render function returns lại virtual DOM object. Mỗi lần chúng ta dùng Button class-based component ở trên, React sẽ lập tức dùng một object trong class-based component cho DOM tree.

Đó là nguyên nhân vì sao ta dùng this.props.label trong JSX trong rendered output ở trên. Bởi các component đều có một instance property đặc biệt gọi là  props , vốn giữ tất cả các value được pass tới component đó.

Bởi chúng ta có instance liên quan tới một component một lần dùng, chúng ta có thể tinh chỉnh tùy ý instance đó. Chúng tôi có thể tinh chỉnh nó sau khi nó được tạo ra bởi JavaScript  constructor function:

// Example 10 -  Customizing a component instance
// https://jscomplete.com/repl?j=rko7RsKS-
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.id = Date.now();
  }
  render() {
    return <button id={this.id}>{this.props.label}</button>;
  }
}
// Use it
ReactDOM.render(<Button label="Save" />, mountNode);

Chúng ta cũng có thể định dạng hàm class prototype  và dùng nó ở bất cứ nơi nào, bao gồm cả ở trong JSX output:

// Example 11 — Using class properties
// https://jscomplete.com/repl?j=H1YDCoFSb
class Button extends React.Component {
  clickCounter = 0;
handleClick = () => {
    console.log(`Clicked: ${++this.clickCounter}`);
  };
  
  render() {
    return (
      <button id={this.id} onClick={this.handleClick}>
        {this.props.label}
      </button>
    );
  }
}
// Use it
ReactDOM.render(<Button label="Save" />, mountNode);

Bạn có thể thấy trong ví dụ 11 này:

Hàm handleClick được viết nhờ vào class-field syntax mới trong JavaScript. Dù chỉ mới ở stage-2 nhưng nó lại được xem như là phương pháp tốt nhất để truy cập vào component mounted instance. Nhưng bạn sẽ phải dùng tới compiler như Babel configured để hiểu stage-2 để truy cập vào code ở trên. jsComplete REPL thì đã được pre-configured sẵn như vậy.

Chúng tôi cũng define clickCounter  instance variables sử dụng class-field syntax. Nhờ đó mà không cần phải dùng tới class constructor call.

Khi ta chỉ định handleClick  function là giá trị cho onClick  React attribute, ta đã không call nó. Thay vào đó, ta pass trong reference tới  handleClickfunction. Call function với level như vậy là một lỗi thường gặp khi dùng React.

// Wrong:
onClick={this.handleClick()}
// Right:
onClick={this.handleClick}

Nền tảng #5: Events trong React: 2 điểm khác biệt quan trọng.

Khi nói tới events trong các yếu tố của React, có 2 điểm khác biệt quan trọng so với cách chúng ta thường làm với DOM API:

• Mọi React elements attributes đều được đặt tên sử dụng camelCase, thay vì lowercase. Nói cách khác  onClick mới đúng, chứ không phải là  onclick
• Chúng ta pass một JavaScript function thật sự như là một event handler thay vì là một string. Nó là  onClick={handleClick}, chứ không phải là onClick="handleClick".

React bao DOM event object với một object của chính nó để tối ưu hóa hiệu năng của events handling. Nhưng trong một event handler, chúng ta vẫn có thể truy cập mọi phương pháp có trong DOM event object. React sẽ pass event object đó tới từng handle call.

// Example 12 - Working with wrapped events
// https://jscomplete.com/repl?j=HkIhRoKBb
class Form extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  };
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button type="submit">Submit</button>
      </form>
    );
  }
}
// Use it
ReactDOM.render(<Form />, mountNode);

(Hết phần 1)

Bí kíp toàn thư về React mà bạn cần phải biết (phần 2)

Phỏng dịch theo bài viết tại freecodecamp.org

React 16 đã có mặt!!

Có rất nhiều thứ để nói (nhất là việc viết lại hoàn toàn Fiber), nhưng với tôi, nhưng cải thiện trong server-side render là nổi bật nhất.

Hãy cùng tôi điểm qua những cái mới và khác biệt với SSR trong React 16, hi vọng là bạn cũng phấn khích như tôi.

Tham khảo vị trí tuyển lập trình viên React lương cao

Cách SSR hoạt động trong React 15

Đầu tiên, chúng ta hãy cũng nhìn lại cách thức hoạt đông của SSR trong React 15. Để dùng SSR, bạn sẽ phải chạy một Node-based web server như xpress, Hapi, hoặc Koa, và bạn call renderToString để render cho root component cho một string, mà sau đó bạn sẽ ghi cho một response:

// using Express
import { renderToString } from "react-dom/server"
import MyPage from "./MyPage"
app.get("/", (req, res) => {
  res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");
  res.write("<div id='content'>");  
  res.write(renderToString(<MyPage/>));
  res.write("</div></body></html>");
  res.end();
});

Sau đó, trong client bootstrap code, bạn sẽ yêu cầu client-side renderer “rehydrate” lại server-generated HTML nhờ vào  render(), giống như phương thức với client-side rendered app:

import { render } from "react-dom"
import MyPage from "./MyPage"
render(<MyPage/>, document.getElementById("content"));

Nếu bạn làm đúng theo trên thì client-side renderer sẽ chỉ cần dùng các server-generated HTML có sẵn mà không cần phải update DOM.

Vậy còn SSR trong React 16 thì sao?

React 16 có tính tương thích ngược (Backwards Compatible)

Nói cách khác nếu code của bạn chạy ngon lành trên React 15 thì nó cũng sẽ “trơn tuột” trên cả React 16. Đoạn code ở mục trên cũng chạy được trên cả 2 phiên bản 15 và 16.

render() trở thành hydrate()

Khi bạn upgrade SSR code từ React 15 lên React 16, bạn có thể sẽ bắt gặp bảng warning như sau trong browser của mình:

Hóa ra trong React 16, giờ có tới 2 phương pháp khác nhau để render client side:  render() dành cho các nội dung nằm hoàn toàn về phía client, và  hydrate() cho khi bạn muốn reder server-side. Bởi vì React là backwards compatible,render() vẫn sẽ hoạt động bình thường khi render trên server-generated markup trong React 16, nhưng bạn nên thay những calls đến hydrate() để không bị warning cũng như chuẩn bị code cho phiên bản React 17 trong tương lai. Đoạn trích code bên dưới cũng sẽ thay đổi theo:

import { hydrate } from "react-dom"
import MyPage from "./MyPage"
hydrate(<MyPage/>, document.getElementById("content"));

React 16 có thể xử lí Arrays, Strings, và Numbers

Trong React 15, một component của render sẽ luôn phải trả về (return) một React element đơn. Tuy vậy, với React 16, client-side renderer cho phép components trả về một string, một number, hay một array từ render. Tính năng cũng được hỗ trợ bởi React 16’s server-side render.

Như vậy, giờ bạn đã có thể server-render components như sau:

class MyArrayComponent extends React.Component {
  render() {
    return [
      <div key="1">first element</div>, 
      <div key="2">second element</div>
    ];
  }
}
class MyStringComponent extends React.Component {
  render() {
    return "hey there";
  }
}
class MyNumberComponent extends React.Component {
  render() {
    return 2;
  }
}

Thậm chí còn có cả khả năng pass trong một string, number hoặc một array component tới level cao của  renderToString:

res.write(renderToString([
      <div key="1">first element</div>, 
      <div key="2">second element</div>
    ]));
// it’s not entirely clear why you would do this, but it works!
res.write(renderToString("hey there"));
res.write(renderToString(2));

Điều này cho phép bạn loại bỏ bất cứ  divs and span vừa được thêm vào trong cây React component của bạn, nhờ đó mà kích thước của HTML document sẽ được thu nhỏ lại.

React 16 cho ra những HTML hiệu quả cao

Khi nhắc tới kích thước của HTML document, React 16 cũng cắt gọt bớt SSR trong HTML. Với React 15, từng yếu tố của HTML trong một SSR document có  data-reactid attribute, luôn có giá trị tăng dần theo ID, và text node đôi khi bị bao quanh bởi các comment với  react-text và một ID. Đoạn trích code dưới đây chính là một ví dụ điển hình cho trường hợp trên:

renderToString(
  <div>
    This is some <span>server-generated</span> <span>HTML.</span>
  </div>
);

Trong React 15, đoạn code đấy sẽ cho ra HTML như sau:

<div data-reactroot="" data-reactid="1" 
    data-react-checksum="122239856">
  <!-- react-text: 2 -->This is some <!-- /react-text -->
  <span data-reactid="3">server-generated</span>
  <!-- react-text: 4--> <!-- /react-text -->
  <span data-reactid="5">HTML.</span>
</div>

Còn với React 16, Mọi IDs đã được loại bỏ khỏi markup, nên HTML sẽ trở nên vô cùng đơn giản:

<div data-reactroot="">
  This is some <span>server-generated</span> <span>HTML.</span>
</div>

Không chỉ nó dễ nhìn dễ đọc hơn mà còn giúp giảm kích thước của HTML document  một cách đáng kể!

React 16 cho phép Non-Standard DOM Attributes

DOM renderer trong React 15 khá là khắt khe trong attribute trên các yếu tố thuộc HTML, và nó sẽ tự động loại bỏ ra các non-standard HTML attributes. React 16 thì ngược lại, cả client và server renderer giờ sẽ cho qua cả các non-standard attributes mà bạn đã thêm vào HTML. Bạn có thể đọc thêm Dan Abramov’s React blog để hiểu rõ hơn.

React 16 SSR không hỗ trợ Error Boundaries hoặc Portals

Có hai tính năng mới trong React 16 client-side renderer nhưng lại không được hỗ trợ trong server-side renderer:Error Boundaries và Portals. Nếu bạn muốn biết thêm về error boundaries, hãy đọc Abramov’s React blog, nhưng hãy lưu ý rằng error boundaries sẽ không có bắt được lỗi trên server. Còn Portals thì tới giờ vẫn chưa có bài viết nào hay giải thích về nó nhưng tóm gọn thì Portal API cần một DOM node, nên nó cũng sẽ không dùng được server.

React 16 thực hiện Client-Side Checking nhẹ nhàng hơn

Khi bạn rehydrate markup trên client-side trong React 15, ReactDOM.render() sẽ thực hiện một so sách từng kí tự một với server-generated markup. Nếu có bất kì sai sót gì thì React sẽ phát warning trong development mode và thay toàn bộ cây server-generated markup với HTML được tạo ra bên phía client.

Trong React 16, client-side renderer sử dụng một thuật toán khác để kiểm tra xem server-generated markup có đúng hay không. Nó thật sự khoan hồng hơn so với React 15. Ví dụ như nó không cần server-generated markup phải có các attributes theo đúng thứ tự như phía client. Và nếu có sai sót thì thay vì thay toàn bộ thì nó chỉ nhắm vào sub tree ví trị sai đó thôi.

Nói chung, thay đổi này sẽ không ảnh hưởng đến end-user ngoài trừ một điều: React 16 không fix SSR-generated HTML attributes bị sai/lệch khi bạn call  ReactDOM.render()/hydrate(). Do đó mà bạn sẽ phải cẩn thận và chắc chắn rằng đã sửa hết mọi markup mismatch warning bạn thấy trong app trong  development mode.

React 16 không cần được Compiled thì mới có hiệu suất tốt nhất

Trong React 15, nếu bạn dùng SSR thẳng luôn thì hiệu suất của nó sẽ không được tốt như kì vọng, thậm chí là kể cả trong production mode. Đó là bởi vì có rất nhiều developer warnings và gợi ý trong React, chúng sẽ giống như thế này:

if (process.env.NODE_ENV !== "production") {
  // check some stuff and output great developer
  // warnings here.
}

Thật không may, process.env  lại không phải là một JavaScript object bình thường, và nó khá là tốn công để có thể lấy được một value từ nó. Do đó nên dù ta có set giá trị của NODE_ENV thành  production, chỉ việc checking môi trường của variable thường xuyên cũng đã thêm rất nhiều thời gian cho server rendering.

Để giải quyết vấn đề này trong React 15, bạn sẽ compile SSR code để lại bỏ references của  process.env, nhờ vào Environment Plugin của Webpack hoặc transform-inline-environment-variables plugin của Babel. Tuy vậy, theo kinh nghiệm của tôi, rất nhiều người không hề compile server-side code, đó đó hiệu năng SSR cho ra rất là tệ.

Trong React 16, vấn đề này đã được giải quyết. Chỉ cần một call để check process.env.NODE_ENV ngay từ khi mới bắt đầu, do đó mà không cần phải compile SSR code của bạn để có hiệu năng tốt nhất bởi bạn đã có nó ngay từ đầu rùi.

React 16 cũng chạy nhanh hơn

Nhắc đến tốc độ, các người dùng React server-side render trong production thường than phiền rằng document có kích thước lớn render khá chậm.

Nên tôi rất vui khi thông báo rằng, sau một vài bài test đã cho thấy tốc độ khá cao trong server-side render của React 16, trải dài qua các phiên bản Node hác nhau:

Khi so sánh với React 15 với  process.env được compiled, khác biệt là khoảng 2.4 lần trong Node 4, khoảng 3 lần trong Node 6 và gấp 3.8 trong Node 8.4. Còn nếu so sánh khi không compile thì React 15 vẫn bị React 16 cho hửi khói trong mọi phiên bản Node khác nhau.

Vì sao React 16 SSR lại nhanh tới vậy? Bởi vì với React 15, server và client rendering có code tương tự nhau. Điều đó có nghĩa toàn bộ data structures cần phải duy trì một virtual DOM khi server rendering, cho dù rằng vDOM sẽ bị bỏ đi ngay khi giá trị được return sau khi đã call đến renderToString. Kết quả là có quá nhiều thứ bị phung phí trong server render.

Trong React 16 thì mọi chuyện hoàn toàn khác, nhờ vào core team đã viết lại hoàn toàn server renderer, và không còn dính dáng tới vDOM nữa. Nhờ đó mà nó sẽ trở nên nhanh hơn rất nhiều.

Một điều cần lưu ý rằng, mặc dù kết quả so sánh phía trên đã chứng tỏ rằng React 16 hoàn toàn là kẻ thống trị mọi mặc nhưng do những bài test đều nhắm tới từng tính năng một. Mặt khác, một app khi được sử dụng sẽ bao gồm những tính năng chạy cùng một lúc vì thế nên các bạn đừng trông mong rằng nó sẽ chạy nhanh tới gấp 3 lần như theo kết quả của bài test.

React 16 hỗ trợ streaming

React 16 giờ đã hỗ trợ render trực tiếp cho một Node stream.

Việc Render một stream có thể giúp giảm thiểu thời gian xử lí first byte (TTFB) cho nội dung của bạn, đồng thời gửi một phần của document vào cho browser ngay cả trước khi phần tiếp theo được tạo ra. Các browser sẽ parsing và rendering nội dung sớm hơn khi stream từ server theo cách này.

Ngoài ra còn có một tính năng tuyệt vời khác là backpressure. Nói cách khác, khi network bị backed up và không thể nhận thêm bytes, renderer sẽ nhận được tín hiệu và dừng rendering cho đến khi hết bị tắc nghẽn. Điều đó có nghĩa là server của bạn dùng ít memory và đáp ứng nhanh hơn tới I/O conditions.

Để sử dụng React 16’s render cho stream, bạn sẽ cần call 1 trong 2 phương pháp mới trên react-dom/server: renderToNodeStream or renderToStaticNodeStream, nhằm tương xứng với  renderToString và renderToStaticMarkup. Thay vì trả về một string, chúng sẽ return Readable, là một Node Stream class cho objects phát ra một stream của byte.

Khi bạn nhận lại  Readable stream từ renderTo(Static)NodeStream, nó sẽ ở trong paused mode, và chưa hề được render. Render sẽ chỉ bắt đầu khi bạn call  read, hoặc pipe  Readable đến một  Writable stream. Phần lớn các Node web frameworks có một object kế thừa từ  Writable, để bạn có thể pipe Readable dễ dàng hơn.

// using Express
import { renderToNodeStream } from "react-dom/server"
import MyPage from "./MyPage"
app.get("/", (req, res) => {
  res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");
  res.write("<div id='content'>"); 
  const stream = renderToNodeStream(<MyPage/>);
  stream.pipe(res, { end: false });
  stream.on('end', () => {
    res.write("</div></body></html>");
    res.end();
  });
});

Streaming giờ đã có một vài Gotchas

Trong khi rendering một stream kể thể nói là một bước tiến cải thiện đáng kể, vẫn có một vài SSR pattern không tương thích tốt với streaming.

Thông thường thì bất cứ pattern nào sử dụng server render pass để tạo ra markup (cần phải add vào document trước khi SSR-ed thực hiện) thì đều không tương thích với streaming. Một số ví dụ bao gồm frameworks có chức năng xác định CSS nào nên cho vào page trong một  <style> tag, hoặc frameworks add các yếu tố vào document <head>  trong khi render. Nếu bạn dùng những framework này thì bạn sẽ phải dùng string rendering để stream.

Một pattern khác không tương thích tốt với React 16 là embedding calls đến renderToNodeStream vào cây component. Trong React 15, chúng ta thường dùng renderToStaticMarkup để tạo ra page template và embed calls đến renderToString để tạo ra những nội dung mạnh mẽ:

res.write("<!DOCTYPE html>");
res.write(renderToStaticMarkup(
  <html>
    <head>
      <title>My Page</title>
    </head>
    <body>
      <div id="content">
        { renderToString(<MyPage/>) }
      </div>
    </body>
  </html>);

Tuy nhiên nếu bạn thay những render call này thì streaming sẽ không thể chạy được bởi nó vẫn còn chưa thể cho một  Readable stream (được return từ  renderToNodeStream) được embedded như là một yếu tố thuộc component.

Nguồn: topdev.vn via Hackernoon

Tham khảo thêm vị trí tuyển dụng ngành cntt tại đây