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

3281

PHẦN 1

Fundamental #6: Tất cả các React component đều có câu truyện riêng của chúng

Những điều tiếp theo sẽ chỉ áp dụng cho class component (dùng cho mở rộng React.Component). Function component thì lại có một câu truyện hoàn toàn khác.

  1. Đầu tiên, ta define một template cho React để tạo ra các elements từ component.
  2. Sau đó ta chỉ cho React để sử dụng nó. Ví dụ, dùng trong một  rendercall của một component khác, hoặc với  ReactDOM.render.
  3. Rồi React instantiates một element và cho nó một set các props mà ta có thể truy cập với  this.props.
  4. Bởi nó hoàn toàn là JavaScript, constructor sẽ được call (nếu đã được defined). Đây chính là phần đầu của quá trình: component lifecycle.
  5. React sau đó tính toán output của render (virtual DOM node)
  6. Do đây là lần đầu tiên React render element, React sẽ giao tiếp với browser để hiện thị element tại đó. Quá trình này còn được biết là mounting.
  7. Khi đó, React sẽ tiếp tục dùng một lifecycle khác, gọi là componentDidMount. Chúng ta có thể dùng cách này, ví dụ như, để làm gì đó trên DOM trong trình duyệt web ( hồi trước thì chỉ có thể làm với virtual DOM).
  8. Tới đây thì có một số components đã hoàn thành sứ mệnh của mình. Trong khi các components khác được unmounted khỏi browser DOM bởi nhiều lí do khác nhau. Để năng chặn điều đó, React sẽ chạy một lifecycle khác là componentWillUnmount.
  9. Do vậy, state của bất cứ mounted element nào cũng có thể thay đổi. Do đó mà component của element đó có thể sẽ bị re-render. Như vậy, mounted element sẽ có thể nhận một set các props khác. Đó là lúc React thật sự tỏa sáng với khác năng của nó. Đây cũng chính là lúc chúng ta cần tới React nhất.
  10. Câu truyện vẫn chưa kết thúc nhưng trước khi có thể tiến lên, chúng ta cần hiểu về cái state có ý nghĩa gì?

Fundamental #7: React components có thể có một private state

Những nội dung tiếp theo cũng sẽ chỉ áp dụng cho class components.

State class field khá là đặc biệt trong bất kì React class component nào. React luôn theo dõi mọi thay đổi trong component state. Nhưng để React có thể làm công việc trên thật hoàn hảo, chúng ta sẽ phải thay đổi state field qua một React API,  this.setState:

// Example 13 -  the setState API
// https://jscomplete.com/repl?j=H1fek2KH-
class CounterButton extends React.Component {
  state = {
    clickCounter: 0,
    currentTimestamp: new Date(),
  };
  
  handleClick = () => {
    this.setState((prevState) => {
     return { clickCounter: prevState.clickCounter + 1 };
    });
  };
  
  componentDidMount() {
   setInterval(() => {
     this.setState({ currentTimestamp: new Date() })
    }, 1000);
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click</button>
        <p>Clicked: {this.state.clickCounter}</p>
        <p>Time: {this.state.currentTimestamp.toLocaleString()}</p>
      </div>
    );
  }
}
// Use it
ReactDOM.render(<CounterButton />, mountNode);

Đây là ví dụ quan trọng nhất mà bạn cần phải hiểu. Nó sẽ giúp bạn hoàn chỉnh kiến thức cơ bản về React. Sau ví dụ này, vẫn có một vài điều nhỏ khác bạn cần phải biết nhưng chúng tùy thuộc vào bản thân cũng như kĩ năng JavaScript của bạn.

Hãy cùng xem qua ví dụ 13 trên, bắt đầu với class fields. Bao gồm 2 phần,  state field được initialized với object chứa một  clickCounter bắt đầu tại  0, và một  currentTimestamp bắt đầu với  new Date().

Class field thứ hai là  handleClick function, vốn chúng ta sẽ pass đến onClick event cho button element trong render. handleClick sẽ chỉnh sửa component instance state nhờ vào  setState.

Một nơi khác mà chúng ta sẽ chỉnh sửa là state bên trong timer của  componentDidMount  lifecycle. Mỗi giây trôi qua, nó sẽ thực hiện một call đến this.setState.

Trong render, chúng ta dùng hai properties mà ta có trong state với một syntax đọc bình thường. Không hề có sử dụng bất cứ API đặc biệt nào.

Bạn có thể thấy chúng ta update state sử dụng 2 cách khác nhau:

  • Bằng cách pass một function với khả năng return một object. Chúng ta đã làm cách này trong handleClick function.
  • Bằng cách pass một object.Chúng ta thực hiện cách này trong phần callback.

Cả hai cách đều hiệu quả, nhưng cách đầu tiên được ưa chuộng hơn bởi bạn có thể vừa đọc và viết vào state cũng một lúc. Bên trong callback nội bộ, chúng ta chỉ viết đến state mà không đọc nó. Mỗi khi bạn thấy không ổn, hãy dùng tới function-as-argument syntax.

Ta update state bằng cách này? Chúng ta return một object với value mới mà ta muốn update. Bạn có thể thấy rằng cả hai calls đến setState, chúng ta chỉ pass một property từ state field chứ không phải cả hai. Điều này là hoàn toàn bình thường bởi  setState sẽ merge (hợp nhất) những thứ pass qua nó với state. Do đó nếu bạn không chỉ định một property khi call setState sẽ có nghĩa rằng bạn không muốn thay đổi property đó.

Fundamental #8: React sẽ luôn React (Phản ứng)

Tên của React bắt nguồn từ việc nó luôn phản ứng lại (React) những thay đổi trong state.

Tuy vậy, sự thật là khi những state trong component được update, React sẽ tự động phản ánh lại những update trong browser DOM (nếu cần).

Hãy nghĩ rằng render function’s input đều là:

  • Những props được pass bởi nhóm parent
  • Internal private state có thể update được bất cứ khi nào

Khi input của render function thay đổi thì output của nó cũng có thể thay đổi theo.

React có lưu trữ history của renders và khi nó xác định được một render khác so với render trước, nó sẽ tính toán sự khác biệt, chuyển dịch vào DOM operations và được executed  trong DOM đó luôn.

Fundamental #9: React chính là agent của bạn

Bạn có thể nghĩ React giống như là một đặc vụ agent được bạn thuê để giao tiếp với browser. Lấy ví dụ về timestamp hiển thị ở trên, thay vì phải thủ công vào browser và invoke DOM API operation để tìm và update  p#timestamp element mỗi giây, chúng ta vừa thay đổi một property trên một state của component và React thực hiện nghĩa vụ giao tiếp với browser cho chúng ta. Tôi tin rằng đấy chính là lí do vì sao mà React lại trở nên nổi tiếng.

Fundamental #10: Mọi thứ của React đều là về components (Phần 2)

Giờ thì chúng đã hiểu về state của một component cũng như điều gì xảy ra khi state thay đổi, hãy cùng nhau tìm hiểu thêm về quá trình này:

  1. Một component có thể cần re-render khi state của nó được update hoặc component ba mẹ thay prop và ảnh hưởng tới component con.
  2. Nếu đều thứ 2 xảy ra, React sẽ lập tức thực hiện componentWillReceiveProps.
  3. Nếu state object hoặc quá trình passed-in prop bị thay đổi, React sẽ cần phải đưa ra một quyết định quan trọng đó là có nên update component trong ROM hay không? Đó là vì sao mà React sẽ sử dụng shouldComponentUpdate. Tùy thuộc vào việc bạn cần chỉnh sửa hay tinh chỉnh quá trình render mà bạn có thể set là true hoặc false.
  4. Nếu không có custom  shouldComponentUpdate rõ ràng, React sẽ tự defaut điều chỉnh sao cho phù hợp nhất.
  5. Đầu tiên, React sẽ thực hiện componentWillUpdate. Sau đó React sẽ tính toán rendered output mới và so sánh nó với kết quả cũ.
  6. Khi rendered output giống nhau thì React sẽ không làm gì cả.
  7. Còn nếu có khác nhau thì React sẽ thông bao lại cho Browser và quá trình sẽ diễn ra như những chúng ta đã biết ở trên.
  8. Trong mọi trường hợp, quá trình update cũng sẽ xảy ra nên React sẽ thực hiện componentDidUpdate.

Những phương pháp trên chính là Lifecycle. Tuy vậy bạn vẫn có thể tạo ra một app hoàn chỉnh mà không cần tới chúng. Tuy vậy, phương pháp Lifecycle rất tiện lợi cho việc phân tích mọi thứ đang diễn ra trong app cũng như tinh chỉnh để cải thiện hiệu năng của React sau mỗi lần update.

Và thế là bạn đã hoàn toàn biết được mọi nền tảng của React rồi đấy. Nếu bạn cảm thấy hứng thú và vẫn muốn biết thêm thì có thể đọc bài viết tiếp theo của tôi tại: Getting Started with React.js course at Pluralsight.

Nguồn: topdev.vn via Medium

Tham khảo thêm vị trí tuyển dụng React lương cao up to 2000USD

RELATED ARTICLESMORE FROM AUTHOR