Trả về null từ hàm render().

render () {
  return null
}

Reselect là một selector library (dành cho Redux) sử dụng khái niệm ghi nhớ. Ban đầu nó được viết để tính toán dữ liệu từ state của ứng dụng giống redux, nhưng nó không thể bị ràng buộc với bất kỳ kiến trúc hoặc thư viện nào.

Reselect giữ một bản sao của các inputs / outputs cuối cùng của lần gọi cuối cùng và chỉ tính toán lại kết quả nếu một trong các inputs thay đổi. Nếu các inputs giống nhau được cung cấp hai lần liên tiếp, Reselect trả về output đã lưu trong bộ nhớ cache. Đó là khả năng ghi nhớ và bộ nhớ cache hoàn toàn có thể tùy chỉnh.

Refs được tạo bằng phương thức React.createRef() và được gắn vào các React element qua thuộc tính ref. Để sử dụng các ref trong toàn bộ component, chỉ cần gán ref này tới 1 property trong constructor.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

và:

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={input => (this.input = input)} /> // Access DOM
        input in handle submit
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Chúng ta cũng có thể sử dụng nó trong các functional component với sự trợ giúp của closure.

Một phương thức constructor class con không thể sử dụng tham chiếu this cho đến khi phương thức super() được gọi. Lý do chính của việc truyền tham số props vào lệnh gọi super() là để truy cập this.props trong các hàm constructor con của bạn.

Truyền vào props:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // ví dụ sẽ in ra { name: 'sudheer',age: 30 }
  }
}

Không truyền vào props:

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // in ra undefined
    // Nhưng props vẫn tồn tại

    console.log(props); // in ra { name: 'sudheer',age: 30 }
  }
  render() {
    // không có sự khác nhau bên ngoài contructor
    console.log(this.props); // in ra { name: 'sudheer',age: 30 }
  }
}

Các đoạn mã trên cho thấy rằng hành vi this.props chỉ khác với trong hàm contructor. Nó sẽ giống nhau bên ngoài hàm contructor.

Bạn có thể gọi e.preventDefault(); với e là tham số được truyền vào callback.

Một ReactJS component kiểm soát các phần tử đầu vào trong các biểu mẫu của người dùng được gọi là controlled component. Tức là mọi thay đổi state sẽ có một hàm xử lý liên quan.

Ví dụ, để viết tất cả các tên bằng chữ hoa, chúng ta sử dụng hàm handleChange như bên dưới,

handleChange(event) {
  this.setState({
    value: event.target.value.toUpperCase(),
  });
};

Chúng ta có hoàn toàn có thể build một project hoàn chỉnh với chỉ React. Nhưng khi project của bạn ngày càng lớn, với ngày càng nhiều component, việc chỉ sử dụng duy nhất React để quản lý state sẽ trở nên rất phức tạp.

Đây chính là lúc Redux toả sáng; nó làm giảm bớt sự phức tạp trong các ứng dụng lớn như vậy. Nếu bạn đã hiểu qua về React thị bạn sẽ biết rằng luồng dữ liệu của React bắt đầu từ các component cha truyền các props cho các component con. Trong một ứng dụng khổng lồ với cả tấn dữ liệu phải chạy qua rất nhiều component thông qua state và props, thì tin mình đi, code của bạn sẽ trở nên cực kì khó đọc và khó cải thiện, chưa kể là tiềm ẩn nhiều bug ko đáng có.

Trong React (và các framework khác nữa), việc giao tiếp giữa 2 component không có quan hệ cha-con thường không được khuyến khích sử dụng. React có lời khuyên rằng nếu bắt buộc phải làm việc này, chúng ta có thể build một hệ thống tuân theo pattern Flux - đây chính là lúc Redux thể hiện.

Với Redux, chúng ta có một store nơi chứa tất cả các state. Nếu một state thay đổi ở component A, nó sẽ được phản ánh lên store, và những component cần biết đến sự thay đổi state này ở component A có thể subcribe lên store.

Component A gửi thay đổi state lên store, nếu component B và C cần state này thì chúng có thể lấy trực tiếp từ store.

Ngoài ra còn 3 lợi ích khác mà chúng ta nên dùng redux:

• Output đồng nhất, dễ đoán: với chỉ một “Source of Truth” (store), chúng ta sẽ gặp ít vấn đề trong việc sync state giữa các component với nhau hơn.

• Khả năng maintain: Redux có bộ guideline hết sức chặt chẽ về cách tổ chức code, action làm gì, reducer làm việc gì,… Mọi thứ đều cụ thể và rõ ràng nên việc maintain sẽ dễ dàng hơn nhiều.

• Khả năng scale: Như đã nói ở trên, với việc tổ chức code nghiêm ngặt và rõ ràng, việc scale project sẽ trở nên dễ dàng hơn nhiều.

• Flow là một trình kiểm tra kiểu tĩnh (static type), được thiết kế để tìm ra lỗi về type trong các chương trình JavaScript, do Facebook tạo ra.
• Các Flow có thể thể hiện sự khác biệt rõ ràng hơn nhiều so với các hệ thống kiểu truyền thống. Ví dụ: Flow giúp bạn bắt lỗi liên quan đến null, không giống như hầu hết các hệ thống loại.

Portal là một cách được đề xuất để hiển thị phần tử con thành một nút DOM tồn tại bên ngoài phân cấp DOM của parent component.

ReactDOM.createPortal(child, container);

Đối số đầu tiên (child) là bất kỳ React con nào có thể render được, chẳng hạn như một element, string hoặc fragment. Đối số thứ hai (container) là một phần tử DOM.

Ví dụ thông thường khi chúng ta có component cha là A, bên trong đó render component con là B, thì thằng B này sẽ luôn bị bọc lại bên trong A

<div class="component-c"></div>
<div class="component-a">
  <div class="component-b"></div>
</div>

Giờ nếu ta muốn khi viết thì vẫn viết component B bên trong component A, nhưng kết quả html ta có được thì component B lại nằm trong component C. Đó là lúc chúng ta cần đến Portal, ta sẽ bọc component B bằng hàm createPortal, để khi render B thì nó lại render ở C.

import ReactDOM from "react-dom";
ReactDOM.createPortal(child, container);

Trong đó:

• ReactDOM.createPortal là hàm của react-dom
• child là thằng B, thằng con đi lông nhông không thèm ở nhà với cha nó
• container là nhà thằng hàng xóm, nơi thằng con B hoang đàng sẽ ở ké.

Để sử dụng Portal, chúng ta tạo ra một component mới, độc lập với B, rồi đẩy thằng B hay bất kỳ đứa nào muốn có cuộc sống du mục thành child component của component mới tạo này, đặt tên là MyPortal.

import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";

class MyPortal extends Component {
  render() {
    // tìm coi có đứa nào chịu chứa chấp nó không
    const haveTarget = document.getElementById(this.props.target);
    // không nơi chứa chấp thì ta ko render luôn
    return haveTarget
      ? ReactDOM.createPortal(this.props.children, haveTarget)
      : null;
  }
}
MyPortal.propTypes = {
  // là id của html element ta sẽ append cái đứa con hoang đàng vô
  target: PropTypes.string.isRequired,
};

export default MyPortal;

Component A sẽ viết như thế này

return (
  <div className="component-a">
    Hello An.Luu
    <MyPortal target='targetForB'>
      <div className="component-b">
        Em là B!
      </div>
    </MyPortal>
  </div>
)
...

// trong đó, id có thể nằm ở bất kỳ component nào đó khác, thậm chí window khác luôn mới ghê

// ví dụ component C
...
return (
  <div className="component-c">
    Em là C!
    <div id="targetForB" />
  <div>
)

Higher-Order component (HOC) là một hàm nhận một component và trả về một component mới. Về cơ bản, đó là một pattern có nguồn gốc từ bản chất component của React.

Có thể gọi chúng là các “pure component” vì chúng có thể chấp nhận bất kỳ component con nào được cung cấp động nhưng chúng sẽ không sửa đổi hoặc sao chép bất kỳ hành vi nào từ các component đầu vào của chúng.

HOC được sử dụng cho nhiều trường hợp bên dưới:

• Tái sử dụng mã, logic và trừu tượng.

• Tính trừu tượng và thao tác trên state.

• Các thao tác trên props.

Đó là mẫu phổ biến (common pattern) trong React được sử dụng cho một component để trả về nhiều element. Các fragment cho phép chúng ta nhóm một danh sách con mà không cần thêm các nút phụ vào DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Ngoài ra còn có một cú pháp ngắn hơn thường được sử dụng:

render() {
  return (
   <>
    <ChildA />
    <ChildB />
    <ChildC />
   </>
 );
}

State của một component là một object chứa một số thông tin có thể thay đổi trong suốt thời gian tồn tại của component. Chúng ta nên cố gắng làm cho state của mình càng đơn giản càng tốt và giảm thiểu số lượng các stateful component.

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Welcome to React world",
    };
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}

Nếu hành vi của một component phụ thuộc vào state của component thì nó có thể được gọi là Stateful component.

Các stateful component này luôn là các Class component và có state được khởi tạo trong constructor.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    // omitted for brevity
  }
}

Store là 1 object để giữ state của ứng dụng, nó có trách nhiệm sau:

• Cho phép truy cập vào state thông qua getState().
• Cho phép cập nhật state thông qua dispatch(action).
• Đăng ký việc lắng nghe qua subscribe(listener).
• Xử lý việc hủy đăng ký lắng nghe thông qua function do subscribe(listener) trả về.

Để giải quyết các vấn đề về khả năng tương thích giữa các trình duyệt, Event handler của bạn trong React sẽ được chuyển qua các SyntheticEvent, là trình bao bọc cross-browser của React xung quanh sự kiện gốc (native event) của trình duyệt. Các synthetic event này có interface giống với các sự kiện gốc mà bạn đã từng sử dụng, ngoại trừ chúng hoạt động giống nhau trên tất cả các trình duyệt.

Có chút thú vị là React không thực sự đính kèm các sự kiện vào chính các nút con. React sẽ lắng nghe tất cả các sự kiện ở cấp cao nhất bằng cách sử dụng một event listener duy nhất. Điều này tốt cho hiệu suất và nó cũng có nghĩa là React không cần phải lo lắng về việc theo dõi các event listener khi cập nhật DOM.

Chúng ta có thể sử dụng câu lệnh if hoặc toán tử 3 ngôi của Javascript để render các biểu thức có điều kiện. Ngoài những cách tiếp cận này, chúng ta cũng có thể nhúng bất kỳ biểu thức nào vào JSX bằng cách bọc chúng trong dấu ngoặc nhọn và sau đó là toán tử logic Javascript &&

render() {
  return <div>
    <h1>Hello!</h1> {messages.length > 0 &&
      <h2>You have {messages.length} unread messages.</h2>
      </div>
}

Nên viết hoa các component bởi vì các component không phải là phần tử DOM mà chúng là các hàm tạo. Nếu chúng không được viết hoa, chúng có thể gây ra nhiều vấn đề khác nhau và có thể khiến các developers nhầm lẫn với một số yếu tố.

Bạn có thể sử dụng arrow function để bao quanh một event handler và truyền các tham số:

<button onClick={() => this.handleClick(id)} />

hoặc sử dụng .bind:

<button onClick={this.handleClick.bind(this, id)} />

AngularJS (1.x) tiếp cận việc xây dựng một ứng dụng bằng cách mở rộng HTML markup và đưa vào các cấu trúc khác nhau (ví dụ: Directives, Controllers, Services) trong thời gian chạy (runtime). Do đó, AngularJS rất kiên định về kiến trúc trong ứng dụng của bạn (khó thay đổi kiến trúc) - những điều trừu tượng này chắc chắn hữu ích trong một số trường hợp, nhưng chúng sẽ phải tốn nhiều chi phí hơn.

Ngược lại, React tập trung hoàn toàn vào việc tạo ra các component và có rất ít ý kiến (nếu có) về kiến trúc của ứng dụng. Điều này cho phép nhà phát triển có thể linh hoạt một cách đáng kinh ngạc trong việc lựa chọn kiến trúc mà họ cho là “tốt nhất” - mặc dù nó cũng đặt trách nhiệm chọn (hoặc xây dựng) các phần đó cho nhà phát triển.

Flux là một kiến thức quen thuộc được thêm bởi Facebook để sử dụng và làm việc với React. Flux không được xem là một Framework hay thư viện mà nó chỉ đơn giản là một kiểu kiến trúc hỗ trợ thêm cho React. Đồng thời, nó xây dựng các ý tưởng về luồng dữ liệu một chiều (tên tiếng anh là Unidirectional Data Flow).

Một kiến trúc Flux điển hình nhất là sự kết hợp giữa thư viện Dispatcher (được viết từ Facebook) cùng với Module Nodejs EventEmitter để có thể tạo nên một hệ thống sự kiện giúp quản lý các trạng thái hoạt động của ứng dụng.

React 15 cung cấp sự hỗ trợ rất cơ bản cho các Error boundary bằng cách sử dụng phương thức stable_handleError.

Sau đó, từ React16 beta, nó đã được đổi tên thành componentDidCatch.

Ví dụ:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>