Props là đầu vào cho một React component.

Chúng là các giá trị đơn lẻ hoặc các đối tượng chứa một tập hợp các giá trị được chuyển cho React component khi khởi tạo bằng cách sử dụng quy ước đặt tên tương tự như các thuộc tính thẻ HTML. Tức là, Props là dữ liệu được truyền từ thành phần mẹ sang thành phần con.

Mục đích chính của Props trong React là cung cấp chức năng thành phần sau:

Chuyển dữ liệu tùy chỉnh đến React component của bạn.

• Kích hoạt trạng thái thay đổi.
• Sử dụng thông qua this.props.reactProp bên trong phương thức render() của component.
• Ví dụ: chúng ta hãy tạo một phần tử có thuộc tính reactProp

<Element reactProp="1" />

Tên reactProp này (hoặc bất cứ thứ gì bạn nghĩ ra) sẽ trở thành một thuộc tính gắn liền với đối tượng props gốc của React (this.props), là đối tượng đã tồn tại trên tất cả các component được tạo bằng thư viện React.

props.reactProp;

React là thư viện JavaScript được phát triển bởi Facebook vào năm 2011. Nó được dùng để xây dựng giao diện người dùng (User Interface – UI) dạng Single Page. Một số tính năng nổi bật của Reactjs:

• Sử dụng JSX: Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent. JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương.

• Single-way data flow (Luồng dữ liệu một chiều): ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau. Luồng truyền dữ liệu trong ReactJS là luồng dữ liệu một chiều từ cha xuống con. Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án. Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình.

• Virtual DOM: Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó. Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại. Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding. Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM.

Components giúp phân chia các UI (giao diện người dùng) thành các phân nhỏ để dễ dàng quản lý và tái sử dụng. Giả sử mình có một website gồm nhiều phần bố cục khác nhau và mình muốn chia nhỏ các phần ra để dễ quản lý.

Ở hình ảnh bên trên chúng ta có thể chia nó thành 2 components, đó là phần “khóa học nổi bật” và “xu hướng kiếm tiền”. Mỗi components sẽ đảm nhiệm phần hiển thị khác nhau. Khi bạn muốn làm một trang hoàn chỉnh chỉ ghép các components này lại với nhau.

Trong mỗi React App đều có thể chứa rất nhiều components, mỗi components trong đó thường nhận về các props và trả về React elements từ đó hiển thị ra cho UI. Components trong React thường được viết theo 2 loại chính đó là functional component và class components. Bên dưới là một functional components:

const App = () => <h1>Hello Freetuts.net</h1>;

Components bên trên được viết theo cú pháp ES6, không nhận bất cứ props nào và trả về một react element.

Context API được cung cấp bởi React để giải quyết vấn đề chia sẻ state giữa các component trong một ứng dụng. Trước khi context (bối cảnh) được giới thiệu, giải pháp duy nhất là sử dụng một thư viện quản lý state, VD như Redux. Tuy nhiên, nhiều nhà phát triển cảm thấy Redux cung cấp nhiều thứ phức tạp không cần thiết, đặc biệt là với ứng dụng nhỏ.

React Context tồn tại để bạn không cần truyền dữ liệu một cách thủ công bằng việc sử dụng props ở tất cả các cấp của component. Context chia sử dữ liệu cho nhiều các component khác nhau. Việc truyền dữ liệu từ component cha xuống component con thông qua props là tương đối dài dòng và khó kiểm sóat so với việc sử dụng Context API. Bằng việc sử dụng Context API, chúng ta không còn cần phải truyền các dữ liệu muốn chia sẻ với nhau thông qua việc dùng props.

Refs thường được dùng để trả về một tham chiếu tới 1 phần tử.

Hầu hết nên tránh sử dụng chúng trong các trường hợp, tuy nhiên chúng có thể hữu ích khi chúng ta cần truy cập trực tiếp vào phần tử DOM hoặc 1 component trong React.

Refs cho phép bạn truy cập trực tiếp vào phần tử DOM hoặc một phiên bản của thành phần.

Để sử dụng chúng, bạn thêm thuộc tính ref vào component có giá trị là một hàm callback sẽ nhận phần tử DOM bên dưới hoặc phiên bản được gắn kết của component làm đối số đầu tiên của nó.

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

Ở trên lưu ý rằng trường đầu vào của chúng ta có thuộc tính ref có giá trị là một hàm. Hàm đó nhận phần tử DOM thực tế của đầu vào mà sau đó chúng ta đặt trên component để có quyền truy cập vào nó bên trong hàm handleSubmit.

Người ta thường hiểu sai rằng bạn cần sử dụng một class component để sử dụng refs, nhưng refs cũng có thể được sử dụng với các functional component bằng cách tận dụng các bao đóng (leveraging closures) trong JavaScript.

function CustomForm({ handleSubmit }) {
  let inputElement;
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input type="text" ref={input => (inputElement = input)} />
      <button type="submit">Submit</button>
    </form>
  );
}

Dưới đây là những ưu điểm của ReactJS:

• Tăng hiệu suất của ứng dụng với Virtual DOM.

• JSX làm cho mã dễ đọc và viết.

• Nó kết xuất cả phía máy khách và máy chủ.

• Dễ dàng tích hợp với các frameworks khác (Angular, BackboneJS) vì nó chỉ là một thư viện giao diện.

• Dễ dàng viết các trường hợp kiểm thử UI và tích hợp với các công cụ như JEST.

Các tính năng chính của ReactJS như sau:

• Nó sử dụng VirtualDOM thay vì RealDOM vì các thao tác trên RealDOM rất tốn kém.

• Hỗ trợ kết xuất phía máy chủ.

• Tuân theo luồng dữ liệu một chiều hoặc ràng buộc dữ liệu.

• Sử dụng các component UI có thể tái sử dụng hoặc kết hợp để phát triển giao diện người dùng.

Nhìn vào hình ảnh trên thì có 3 phần chính chúng ta sẽ tìm hiểu đó chính là

• Mounting
• Updation
• Unmounting

Mounting

Chắc hẳn các bạn cũng biết khái niệm hook rồi đúng không - tức là cho phép người dùng can thiệp vào quá trình cập nhật UI với những thay đổi của state hoặc props. Các bạn nhìn cột Mounting có 3 phướng thức lifecycle đó là

• componentWillMount()
• render()
• componentDidMount()

Như các bạn thấy đấy khi chúng ta refresh lại trang web hoặc mới truy cập thì 3 method lifecycle này sẽ lần lượt chạy. Một khi mà component được render trong lần đầu tiên thì phương thức componentWillMount() sẽ được gọi trước khi render. Chúng mình có thể hiểu như này, trước khi compont vô DOM bằng hàm render() thì hàm componentWillMount() sẽ được gọi. Chú ý chúng ta không nên gọi hàm setStae() trong hàm componentWillMount() vì nó chưa có DOM nào để tương tác.

componentDidMount() sẽ được gọi sau khi render component, ở đây cũng là nơi thực hiện các hàm AJAX, axios request, DOM hay update state sẽ được thực thi tại đây. Phương thức này cũng được kết nối với các Framwork khác hay database. Chúng mình sẽ đặt hàm setState() ở đây để tương tác vì Component đã được vô DOM.

Ví dụ

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class Demo extends Component {
  constructor(props) {
    super(props);
    // Don't do this!
    this.state = { color: "green" };
  }
  componentWillMount() {
    console.log("componentWillMount da chay");
  }

  componentDidMount() {
    console.log("componentDidMount da chay");
  }

  render() {
    console.log("Ham render da duoc chay");
    return (
      <div>
        <button onClick={() => this.setState({ color: "aaaaa" })}>
          Submit
        </button>
        <p>{this.state.color}</p>
      </div>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Demo></Demo>
        <p className="App-intro"></p>
      </div>
    );
  }
}

export default App;

Chúng ta npm start và bật F12 lên và chúng ta được kết quả như sau

Vậy chúng mình có thể kết luận được khi mà Component được khởi tạo thì React sẽ follow theo trình tự như sau :

• Khởi tạo class đã kế thừa từ Component
• Khởi tạo giá trị mặc định cho Props
• Khởi tạo giá trị mặc định cho State
• Gọi hàm componentWillMount()
• Gọi hàm render()
• Gọi hàm componentDidMount()

Updation

Chúng mình sẽ đi tìm hiểu từng method một nhé

• componentWillReceiveProps(): Chạy khi component con nhận props từ component cha. Sau khi nhận được props mới từ component cha rồi có thì component con có thể set lại state.
• shouldComponentUpdate(): Hàm này có thể nói là nó tăng hiệu năng của React lên. Nếu như return false thì các phương thực componentWillUpdate, render, componentDidUpdate sẽ không được chạy nữa(vì mặc định nó return về true để chạy được 3 hàm tiếp theo, nhiều trường hợp mình không cần chạy 3 hàm tiếp theo).
• componentWillUpdate(): Hàm này cũng giống như hàm componentWillMount() trước khi re-render ra Component. Nhưng chúng mình hầu hết không tương tác gì nhiều lắm trong hàm này, hàm setState hầu hết chúng mình sẽ sủ dụng trong hàm componentWillReceiveProps
• componentDidUpdate(): hàm này được gọi đến sau khi đã re-render lại hay React đã cập nhật lại UI, nếu mà chúng ta muốn chạy animation thì đây chính là lúc chúng ta nên gọi trong hàm này.

Mình lấy một ví dụ nhé, ví dụ dưới đây sẽ thêm mới một phần tử vào trong danh sách Note để. Component cha là ListNote, component con là Note. Các bạn chỉ cần focus vào nhứng thứ sau:

• Trong component ListForm khi chúng ta ấn Submit để thêm một phần tử vào danh sách thì sau khi cập nhật lại Component thì chúng ta sẽ render 1 Note có truyền những props. Các bạn chú ý trong hàm getData().
• Trong component Note có component componentWillReceiveProps() để hiện ra thông báo là vừa nhận được props từ cha.

// file listNote.js
import React from "react";
import Note from "./Note.js";
import FormNote from "./FormNote.js";
import { firebaseConnect } from "../firebaseConnect.js";
import { connect } from "react-redux";
import store from "../store.js";

class listNote extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
    this.getData = this.getData.bind(this);
  }

  componentWillMount() {
    let current = this;
    firebaseConnect.on("value", function (notes) {
      const arrData = [];
      notes.forEach(element => {
        const id = element.key;
        const title = element.val().title;
        const content = element.val().content;
        arrData.push({
          id: id,
          title: title,
          content: content,
        });
      });
      //console.log(arrData);
      current.setState({
        data: arrData,
      });
      //console.log(current.state.data);
    });
  }

  getData() {
    console.log(this.state.data);
    return this.state.data.map(function (value, key) {
      return (
        <Note
          key={key}
          title={value.title}
          content={value.content}
          note={value}
        />
      );
    });
  }

  showForm() {
    if (this.props.isEdit) {
      return <FormNote />;
    }
  }

  showFormAddData() {
    if (this.props.isAdd) {
      return <FormNote />;
    }
  }
  render() {
    return (
      <div className="row">
        <div className="col-8">{this.getData()}</div>
        <div className="col-4">
          {this.showForm()}
          {this.showFormAddData()}
        </div>
      </div>
    );
  }
}

const mapPropsToState = (state, ownProps) => {
  return {
    isEdit: state.isEdit,
    isAdd: state.isAdd,
  };
};

const mapDispatchToState = (dispatch, ownProps) => {
  return {
    changeEditStatus: () => {
      dispatch({ type: "CHANGE_EDIT_STATUS" });
    },
  };
};
export default connect(mapPropsToState, mapDispatchToState)(listNote);

// file Note.js
import React from "react";
import { connect } from "react-redux";
import store from "../store.js";

class Note extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    console.log("Component con da nhan duoc props tu component cha");
  }
  twoAction() {
    this.props.changeEditStatus();
    this.props.changeEditItem(this.props.note);
  }

  deleteDataItem() {
    if (window.confirm("Are you sure delete item") == true) {
      this.props.deleteItemFunc(this.props.note);
    }
  }
  render() {
    return (
      <div className="row">
        <div className="col-8">
          Title: {this.props.title}
          <br />
          Noi dung: {this.props.content}
        </div>
        <div col-4>
          <button onClick={() => this.twoAction()}>Edit</button>
          <button onClick={() => this.deleteDataItem()}>Delete</button>
        </div>
      </div>
    );
  }
}

const mapPropsToState = (state, ownProps) => {
  return {};
};

const mapDispatchToState = (dispatch, ownProps) => {
  return {
    changeEditStatus: () => {
      dispatch({ type: "CHANGE_EDIT_STATUS" });
    },
    changeEditItem: editItem => {
      dispatch({ type: "EDIT_ITEM", editItem });
    },
    deleteItemFunc: deleteItem => {
      dispatch({ type: "DELETE_ITEM", deleteItem });
    },
  };
};
export default connect(mapPropsToState, mapDispatchToState)(Note);

Tương tự khi State thay đổi:

• Cập nhật giá trị cho state
• Gọi hàm shouldComponentUpdate()
• Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
• Gọi hàm render()
• Gọi hàm componentDidUpdate()

Unmount

Quá trình unmounting xảy ra khi component bị remove khỏi DOM, hay nói một cách khác là hàm componentWillUnmount() sẽ được gọi khi render ra không có component nào hoặc người dùng chuyển hướng trang web.

let tạo ra một biến chỉ có thể truy cập được trong block bao quanh nó, khác với var - tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó.

const dùng để khai báo một hằng số - là một giá trị không thay đổi được trong suốt quá trình chạy.

Lưu ý trường hợp này với let và const trong ES6:

function foo () {
  typeof bar;
  let bar = ‘baz’;
}
foo(); // ReferenceError: can't access lexical declaration
       // `bar' before initialization

Điều đầu tiên React sẽ làm khi bạn gọi setState() là merge tham số (là object bạn đã truyền vào setState()) vào state hiện tại của component. Điều này sẽ bắt đầu một quá trình được gọi là reconciliation. Mục tiêu cuối cùng của reconciliation là cập nhật UI dựa trên state mới này theo cách hiệu quả nhất có thể.

Để làm điều này, React sẽ xây dựng một tree mới gồm các React element (bạn có thể coi đây là một object đại diện cho UI của bạn). Khi nó có tree này, để tìm ra UI sẽ thay đổi như thế nào dựa theo state mới, React sẽ so sánh tree mới này với tree trước đó.

Bằng cách này, React sẽ biết chính xác những thay đổi đã xảy ra và bằng cách biết chính xác những gì đã thay đổi, nó sẽ chỉ cập nhật trên DOM những thay đổi đó.

Jest là một framework để unit test JavaScript do Facebook thực hiện dựa trên Jasmine và cung cấp mô hình giả tự động tạo và môi trường Jsdom. Nó thường được sử dụng để kiểm thử các component trong React.

Props là dữ liệu được truyền vào trong một component từ cha của nó. Chúng không nên bị thay đổi, và chỉ dùng để hiển thị hay tính toán các giá trị khác. State là dữ liệu bên trong của một component, nó có thể được thay đổi trong vòng đời của component và được duy trì giữa các lần re-render

Element là một đối tượng đơn giản mô tả những gì bạn muốn hiển thị trên màn hình dưới dạng các nút DOM hoặc các thành phần khác. Các element có thể chứa các element khác trong props của chúng. Tạo một React element rất đơn giản và ít tốn chi phí. Khi một element được tạo, nó không bao giờ bị thay đổi. Ví dụ:

const element = React.createElement("div", { id: "login-btn" }, "Login");

Hàm createElement() ở trên trả về dưới dạng object như bên dưới

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn',
  },
};

Và cuối cùng, nó hiển thị tới DOM bằng cách sử dụng ReactDOM.render như bên dưới,

<div id="login-btn">Login</div>

Trong khi một component có thể được khai báo theo nhiều cách khác nhau. Nó có thể là một class có phương thức render().

Ngoài ra, trong những trường hợp đơn giản, nó có thể được định nghĩa như một function. Trong cả hai trường hợp, nó lấy props làm đầu vào và trả ra một Element tree.

function Button({ onLogin }) {
  return React.createElement(
    "div",
    { id: "login-btn", onClick: onLogin },
    "Login",
  );
}

Class component:

Trước phiên bản React 16.8 (trước khi giới thiệu hooks), component dựa theo class thường được sử dụng để tạo component, với mục đích để lưu giữ trạng thái bên trong hay tận dụng các phương thức vòng đời (Ví dụ: componentDidMount hay shouldComponentUpdate ). Một component dựa theo class là một class ES6, nó mở rộng class React Component và với tối thiểu phải thực hiện phương thức render()

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Functional component:

Functional component là không có trạng thái (stateless) (được dùng ở phiên bản React trước 16.8) và trả về output mà cần được render. Chúng phù hợp với việc render UI chỉ phụ thuộc vào props, thông thường chúng đơn giản hơn và nhanh hơn so với component dựa theo class.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Các comment trong ReactJS / JSX tương tự như các nhận xét nhiều dòng trong javascript được bao bọc bởi các dấu ngoặc nhọn:

Khi bạn muốn comment một dòng:

<div>
  {/* Single-line comments */}
  Welcome {user}, Let's play React
</div>

Khi bạn muốn comment nhiều dòng:

<div>
  {/* Multi-line comments for more than
   one line */}
  Welcome {user}, Let's play React
  </div>

Có một vài lợi ích khi sử dụng React hook là:

• Khiến các component trở nên gọn nhẹ hơn

• Giảm đáng kể số lượng code, dễ tiếp cận

• Xoá bỏ sự không cần thiết của component dựa theo class, các vòng đời và keyword this

• Dễ dàng tái sử dụng logic, bằng cách trừu tượng hoá các chức năng phổ biến thành custom hook

• Code dễ đọc, dễ test bằng cách chia sẻ logic giữa các component với nhau

Người phỏng vấn muốn thấy: bạn sử dụng Hooks và hiểu cách nó hoạt động như thế nào. Mặc dù Hooks mới được giới thiệu từ React 16.8, nhưng đã có nhiều người sử dụng nó trong sản phẩm của họ và họ mong đợi bạn biết nó.

Chúng ta hãy tạo 1 hook “useWindowSize” – đây là một hook khá đơn giản và dễ hiểu.

import { useState, useEffect } from "react";
const useWindowSize = () => {
  const getSize = () => ({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const [size, setSize] = useState(getSize);
  useEffect(() => {
    const handleResize = () => setSize(getSize());
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return size;
};

Cách dùng:

const App = () => {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
};

Bạn có thể sẽ nhận được thêm vài câu hỏi như sau:

• Có cần thiết phải đặt tên hook của bạn là “useWindowSize” không, đặt tên khác ví dụ như “getWindowSize” thì sao? Nó là cần thiết, vì theo rules of Hooks, tên hook luôn phải bắt đầu với từ “use”.
• Nó có hoạt động không nếu chúng ta bỏ “[]” khỏi “useEffect”? Nó vẫn hoạt động, nhưng nó sẽ gọi hook “useEffect” mỗi lần render, điều này sẽ làm gây ra các vấn đề về performance.
• Làm sao React biết khi nào sẽ re-render component “App” nếu chúng ta xử lý window resizing trong “useWindowSize”? Khi chúng ta gọi “setSize” bên trong hook “useWindowSize”, React biết hook đó được dùng trong component “App” và sẽ re-render nó.
• Làm sao để hook này không bị lỗi khi dùng ở Server-Side render?

import { useState, useEffect } from "react";
const useWindowSize = () => {
  const isClient = typeof window === "object";
  const getSize = () => ({
    width: isClient ? window.innerWidth : undefined,
    height: isClient ? window.innerHeight : undefined,
  });
  const [size, setSize] = useState(getSize);
  useEffect(() => {
    const handleResize = () => setSize(getSize());
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return size;
};

Prop drilling (còn được gọi là “threading”) là thuật ngữ chỉ tiến trình mà bạn phải đi qua để có thể lấy dữ liệu cho các phần của React component tree. Cùng quan sát một ví dụ đơn giản với stateful component

function Toggle() {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(o => !o);
  return (
    <div>
      <div>The button is {on ? "on" : "off"}</div>,
      <button onClick={toggle}>Toggle</button>
      </div>
  );
}

Chúng ta hãy thử chia nó thành 2 components:

function Toggle() {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(o => !o);
  return <Switch on={on} onToggle={toggle} />;
}

function Switch({ on, onToggle }) {
  return (
    <div>
      <div>The button is {on ? "on" : "off"}</div>
      <button onClick={onToggle}>Toggle</button>
    </div>
  );
}

Nói một cách đơn giản Switch component cần có tham chiếu tới toggle và on state, vậy nên chúng ta cần truyền props ở đây. Cùng refactor lại một lần nữa để thêm một layer khác vào component tree của chúng ta.

function Toggle() {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(o => !o);
  return <Switch on={on} onToggle={toggle} />;
}

function Switch({ on, onToggle }) {
  return (
    <div>
      <SwitchMessage on={on} />
      <SwitchButton onToggle={onToggle} />
    </div>
  );
}

function SwitchMessage({ on }) {
  return <div>The button is {on ? "on" : "off"}</div>;
}

function SwitchButton({ onToggle }) {
  return <button onClick={onToggle}>Toggle</button>;
}

Đây chính là prop drilling. Để lấy được on state và toggle handler ở đúng chỗ ta cần chuyển (drill - thread) props thông qua Switch component. Bản thân Switch component không cần những giá trị này cho bản thân nó, nhưng ở đây ta vẫn phải chấp nhận và chuyển tiếp các props này xuống dưới các components con của nó.

DOM ảo (virtual DOM) là một đại diện được nằm trong bộ nhớ cho một thành phần HTML thật mà cấu thành nên giao diện cho chương trình. Khi một component được thông dịch lại (re-render), DOM ảo sẽ so sánh sự thay đổi với mô hình của DOM thật để tạo một danh sách cập nhật sẽ được thực hiện. Lợi ích chính của việc này là giúp tăng hiệu năng, chỉ tập trung vào các thay đổi nhỏ và thực sự cần thiết với DOM thật hơn là phải re-render lại một tập component lớn.

• React chỉ là một thư viện, không phải là 1 framework toàn diện.

• React là một thư viện lớn mất nhiều thời gian để học.

• Nó có thể hơi khó để làm quen đối với các lập trình mới.

• Việc code sẽ phức tạp hơn vì React dùng inline-templating và JSX.

JSX là một phần mở rộng của cú pháp JavaScript cho phép viết code trông giống như HTML. Nó sẽ biên dịch thành các lời gọi hàm Javascript thông thường, cung cấp một cách tiếp cận dễ hiểu hơn để tạo các markup cho component của bạn.

Ta có:

<div className="sidebar" />

Khi được dịch sang Javascript sẽ là:

React.createElement("div", { className: "sidebar" });

Câu hỏi này cũng thường được hỏi trong các buổi phỏng vấn về Reactjs, vậy nên bạn hãy tự suy nghĩ cho mình câu trả lời phù hợp nhất.

Hook là nỗ lực của React để mang sự thuận tiện của component dựa theo class sang component dựa theo function (bao gồm state nội tại và các phương thức vòng đời)

• Hooks là một bổ sung mới trong React 16.8.
• Hooks là những hàm cho phép bạn “kết nối” React state và lifecycle vào các components sử dụng hàm.
• Với Hooks bạn có thể sử dụng state và lifecycles mà không cần dùng ES6 Class.

• Hàm setState() trong Reactjs là bất đồng bộ.

• Nguyên nhân là do React cố tình chờ khi tất cả Component gọi tới hàm setState() trước khi bắt đầu re-render, điều này làm tăng hiệu suất, tránh việc re-render không cần thiết.

Key giúp React xác định những item nào đã thay đổi, được thêm vào hoặc bị xóa. Các key nên được cấp cho các phần tử bên trong mảng để cung cấp cho các phần tử một định danh ổn định.

Cách tốt nhất để chọn một key là sử dụng một chuỗi duy nhất để xác định một item giữa các item trong danh sách.

render () {
  return (
    <ul>
      {this.state.todoItems.map(({ task, uid }) => {
          return <li key={uid}>{task}</li>;
      })}
    </ul>
  );
}

Thông thường, bạn sẽ sử dụng ID từ dữ liệu của mình làm key. Khi bạn không có ID ổn định cho các item được hiển thị, bạn không nên sử dụng index làm key bởi vì nếu key là index thì khi ta thay đổi vị trí của các phần tử trong mảng (xóa, thêm…), index cũng sẽ thay đổi và lại xảy ra vấn đề sẽ render lại các phần không cần thiết.

Khi thực hiên render một tập hợp trong React, việc thêm một key cho mỗi thành phần được lặp lại là cần thiết để giúp React theo dấu mối liên kết giữa các thành phần và dữ liệu. Key nên là một ID duy nhất, lý tưởng nhất nên là một UUID hay một chuỗi duy nhất khác từ tập hợp phần tử, hoặc cũng có thể là index của array.

<ul>
  {todos.map(todo => (
    <li key={todo.id}>{todo.text}</li>
  ))}
  ;
</ul>

Không dùng key có thể dẫn đến một vài sự thay đổi lạ khi thêm và xoá các phần tử từ tập hợp.

componentDidMount là nơi yêu cầu AJAX nên được thực hiện. Phương thức này sẽ được thực thi khi component “mount” (được thêm vào DOM) lần đầu tiên. Phương thức này chỉ được thực thi một lần trong suốt vòng đời của component.

Quan trọng là, bạn không thể đảm bảo rằng yêu cầu AJAX sẽ được giải quyết trước khi component “mount”. Nếu không, điều đó có nghĩa là bạn đang cố gắng setState trên một component chưa được “mount”, sẽ không hoạt động.

Việc thực hiện yêu cầu AJAX của bạn trong componentDidMount sẽ đảm bảo rằng có một component cần cập nhật.

Redux là thư viện quản lý state bên thứ 3 cho React, được tạo trước context API. Nó dựa theo khái niệm của một kho chứa state, hay gọi là store, các component có thể nhận dữ liệu từ các props. Cách duy nhất để update store là dispatch một hành động đến store, và việc này được thực thi qua reducer. Reducer sẽ nhận action và state hiện tại, và trả về một state mới, đồng thời kích hoạt cho các component đăng ký trạng thái re-render lại.

• Rất dễ dàng để biết một thành phần được render như thế nào, bạn chỉ cần nhìn vào hàm render().

• JSX giúp bạn dễ dàng đọc mã các component của mình. Nó cũng thực sự dễ dàng để xem bố cục, hoặc cách các component được cắm / kết hợp với nhau.

• Bạn có thể hiển thị React ở phía máy chủ. Điều này cho phép cải thiện SEO và hiệu suất.

• Nó rất dễ dàng để kiểm tra.

• Bạn có thể sử dụng React với bất kỳ framework nào (Backbone.js, Angular.js) vì nó chỉ là một lớp view.

JSX (JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML.

Mã lệnh viết bằng JSX sẽ được chuyển sang JavaScript để trình duyệt có thể hiểu được.

Ví dụ:

const element = <h1>Hello, world!</h1>;
const name = "Mark";
const element = <h1>Hello, {name}</h1>;

Các trình duyệt không thể đọc được các thẻ JSX bởi vì JSX không phải một đối tượng Javascript thông thường. Về cơ bản, nó là một phương ngữ mới phổ biến mà chỉ đơn giản tích hợp các mẫu HTML vào mã JavaScript. Để đọc được cần có sự hỗ trợ của WebPack hoặc Babel.

Nếu bạn cố gắng thay đổi một state của component trực tiếp, React sẽ không thể biết được khi nào nó cần phải re-render component. Bằng cách sử dụng phương thức setState(), React có thể cập nhật component của UI.

Nếu bạn cần cập nhật một state của component dựa theo dữ liệu của state khác hay props khác, chỉ cần truyền một hàm vào setState(), khi đấy bạn truyền state và props như 2 tham số của hàm:

this.setState((state, props) => ({
  counter: state.counter + props.increment,
}));

Ta có thể viết như sau:

<div style={{ height: 10 }}>kungfutech.edu.vn</div>

Mỗi React component bắt buộc phải có hàm render(). Hàm render() trả về duy nhất React element. Nếu bạn cần trả về nhiều React element thì bạn phải nhóm chúng trong một thẻ khác ví dụ như <form></form>, <div></div>,…

Hàm render chính là phần hiển thị giao diện(UI) cho người dùng tại bất cứ thời điểm nào. Nếu dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại UI thực hiện việc update UI với dữ liệu tương ứng.

React tạo ra một DOM ảo.

Khi trạng thái thay đổi trong một component, trước tiên nó chạy một thuật toán “khác biệt (diffing)”, xác định những gì đã thay đổi trong DOM ảo.

Bước thứ hai là điều chỉnh (reconciliation), nơi nó cập nhật DOM với kết quả của khác biệt.

State là một cấu trúc dữ liệu bắt đầu với một giá trị mặc định khi một component mount. Nó có thể bị thay đổi theo thời gian, chủ yếu là do các sự kiện của người dùng.

Props (viết tắt của properties) là một cấu hình của component và chúng được nhận từ phía trên. Component không thể thay đổi các Props của nó, nhưng nó có trách nhiệm tập hợp các Props của các component con lại với nhau. Props không nhất thiết phải là dữ liệu - các hàm callback cũng có thể được chuyển vào làm Props.

Require và Import:

// ES5
var React = require("react");

// ES6
import React from "react";

Export và Exports

// ES5
module.exports = Component;

// ES6
export default Component;

Component và Function

// ES5
var MyComponent = React.createClass({
  render: function () {
    return <h2>Hello Edureka!</h2>;
  },
});

// ES6
class MyComponent extends React.Component {
  render() {
    return <h2>Hello Edureka!</h2>;
  }
}

Props

// ES5
var App = React.createClass({
  propTypes: { name: React.PropTypes.string },
  render: function () {
    return <h2>Hello, {this.props.name}!</h2>;
  },
});

// ES6
class App extends React.Component {
  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

State

// ES5
var App = React.createClass({
  getInitialState: function () {
    return { name: "world" };
  },
  render: function () {
    return <h2>Hello, {this.state.name}!</h2>;
  },
});

// ES6
class App extends React.Component {
  constructor() {
    super();
    this.state = { name: "world" };
  }
  render() {
    return <h2>Hello, {this.state.name}!</h2>;
  }
}

React Fiber là gì?

Context cung cấp một cách thức để truyền dữ liệu qua cây thành phần (component tree) mà không phải chuyển các Props xuống theo cách thủ công ở mọi cấp độ. Ví dụ thông tin user đã đăng nhập, tùy chọn ngôn ngữ, UI Theme cần được truy cập trong ứng dụng bởi nhiều component.

const { Provider, Consumer } = React.createContext(defaultValue);

Các Class component cho phép bạn sử dụng các tính năng bổ sung như local state và lifecycle hooks. Ngoài ra, để cho phép component của bạn có quyền truy cập trực tiếp vào cửa hàng của bạn và do đó giữ state.

Khi component của bạn chỉ nhận được các Props và hiển thị chúng lên trang, đây là stateless component, có thể sử dụng một chức năng thuần túy (pure function). Chúng còn được gọi là thành phần câm (dumb component) hoặc thành phần trình bày (presentational component).

• Các Presentational component quan tâm đến cách mọi thứ trông như thế nào. Chúng thường chỉ nhận dữ liệu và gọi lại thông qua Props. Những component này hiếm khi có state riêng của chúng, nhưng khi chúng có thì thường liên quan đến state về giao diện người dùng (ví dụ state để ẩn hiện button hay text gì đó), trái ngược với state về dữ liệu (như tên của user đăng nhập chẳng hạn).

• Các Container component quan tâm hơn đến cách mọi thứ hoạt động. Các component này cung cấp dữ liệu và hành vi cho các Presentational conponent hoặc các Container component khác. Chúng gọi các hành động Flux và cung cấp những hành động này dưới dạng callback cho các Presentational component. Chúng cũng thường đóng vai trò là nguồn dữ liệu.

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>

ReactDOM là một API React cấp cao để hiển thị một React element vào DOM, thông qua phương thức ReactDOM.render.

Về cơ bản, Hook nói chung cho phép trích xuất và sử dụng lại logic state phổ biến trên nhiều component mà không có gánh nặng của các components bậc cao hơn hoặc các render props. Hook cho phép dễ dàng thao tác state của các functional component của chúng ta mà không cần chuyển đổi chúng thành các class component.

Hooks không hoạt động bên trong các class (vì chúng cho phép bạn sử dụng React mà không có class). Bằng cách sử dụng chúng, chúng ta hoàn toàn có thể tránh sử dụng các phương thức vòng đời, chẳng hạn như componentDidMount, componentDidUpdate, componentWillUnmount. Thay vào đó, chúng ta sẽ sử dụng các hook tích hợp sẵn như useEffect`.

• Các smart component quản lý state của chúng hoặc trong môi trường Redux được kết nối với kho lưu trữ Redux.

• Các dumb component được điều khiển hoàn toàn bởi các props của chúng được truyền từ cha mẹ của chúng và không duy trì state của riêng chúng.

React cho phép các nhà phát triển render một user interface. Để tạo một ứng dụng front-end đầy đủ, các nhà phát triển cần các phần khác, chẳng hạn như các công cụ quản lý state như Redux.

Giống như React, Angular cho phép các nhà phát triển hiển thị user interface, nhưng nó là một framework “bao gồm pin” bao gồm các giải pháp theo quy định, được thiết kế cho các yêu cầu chung như quản lý state.

Mặc dù có nhiều cân nhắc khác khi so sánh cụ thể React và Angular, nhưng sự khác biệt chính về kiến trúc này là:

• Việc sử dụng một thư viện như React có thể mang lại cho dự án có một khả năng nhiều hơn để phát triển các phần của hệ thống — một lần nữa, ví dụ: quản lý state — theo thời gian, khi các giải pháp mới được tạo ra bởi cộng đồng nguồn mở.
• Sử dụng một framework như Angular có thể giúp các nhà phát triển bắt đầu dễ dàng hơn và cũng có thể đơn giản hóa việc bảo trì.

Thông thường, bạn sẽ sử dụng phương thức DefinePlugin của Webpack để đặt NODE_ENV thành phiên bản Production. Điều này sẽ loại bỏ mọi thứ như xác thực propType (propType validation) và các warning bổ sung.

Trên hết, nó cũng minify code của bạn vì React sử dụng loại bỏ code chết của Uglify để loại bỏ code chỉ dành cho development và các comment, điều này sẽ giảm đáng kể kích thước gói của bạn.

PureComponent hoàn toàn giống như Component ngoại trừ việc nó xử lý phương thức shouldComponentUpdate cho bạn.

Khi props hoặc state thay đổi, PureComponent sẽ thực hiện một phép so sánh (shallow comparison) trên cả props và state. Mặt khác, Component sẽ không so sánh các props và state hiện tại với state tiếp theo. Do đó, Component sẽ hiển thị lại theo mặc định bất cứ khi nào shouldComponentUpdate được gọi.

Giải thích việc sử dụng useState (0) ở đây:

const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...
const setCount = () => {
   setCounter(count + 1);
   setMoreStuff(...);
   ...
};

useState là một trong những React hook tích hợp sẵn. useState(0) trả về một bộ giá trị trong đó tham số đầu tiên là state hiện tại của counter và setCounter là phương thức cho phép chúng ta cập nhật state của counter.

Chúng ta có thể sử dụng phương thức setCounter để cập nhật state count ở bất kỳ đâu - Trong trường hợp này, chúng ta đang sử dụng nó bên trong hàm setCount nơi chúng ta có thể làm nhiều việc hơn; ý tưởng với hook là chúng ta có thể giữ cho mã của mình nhiều chức năng hơn và tránh các class component nếu không muốn / cần thiết.

Bạn cần phải làm điều này để this tham chiếu đến Object instance của React component class trong callback code của bạn, nếu không thì this sẽ là undefined. Một giải pháp thay thế là sử dụng các arrow function trong event handler của bạn và ‘this’ sẽ được khởi tạo như mong đợi.

SyntheticEvent là một trình bao bọc trình duyệt chéo xung quanh sự kiện gốc của trình duyệt. API của nó giống như sự kiện gốc của trình duyệt, bao gồm stopPropagation() và preventDefault(), ngoại trừ các sự kiện hoạt động giống nhau trên tất cả các trình duyệt.

• Redux Thunk

• Redux Promise

• Redux Saga

Mặc dù Flux là một mẫu chung để thực thi luồng dữ liệu thông qua một ứng dụng, nhưng vẫn tồn tại nhiều cách triển khai từ đó để chúng ta chọn, ví dụ:

• Redux: có lẽ là thư viện Flux phổ biến nhất hiện nay.

• Alt.js: một thư viện phổ biến khác để quản lý dữ liệu trong các ứng dụng React.

Nó được sử dụng vì lý do hiệu suất, ví dụ nếu người triển khai một Component biết chắc chắn rằng thay đổi thuộc tính cụ thể không cần re-render, chúng có thể trả về false từ shouldComponentUpdate() và không cần render.

Sử dụng arrow function trong các Event handler.

Dưới đây là lý do tại sao các fragment được đề xuất:

• Fragment nhanh hơn một chút và sử dụng ít bộ nhớ hơn mà không cần tạo thêm một nút DOM. Điều này chỉ có lợi thực sự đối với những tree rất lớn và sâu.

• Một số cơ chế CSS như Flexbox và CSS Grid có mối quan hệ cha-con đặc biệt, và việc thêm các div ở giữa khiến khó giữ được bố cục mong muốn.

• Trình kiểm tra DOM, debug ít lộn xộn hơn

• Đối với createRef thì mỗi lần component gọi nó được render thì nó sẽ tạo ra một ref mới.
• Còn đối với useRef thì trả về cùng một ref khi render, có nghĩa là giá trị nó không được tạo mới lại.

Dưới đây là ví dụ sử dụng

import { createRef } from "react";

const FocusInput = () => {
  const inputEl = createRef();

  const focusInput = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={focusInput}>Focus input</button>
    </>
  );
};

const FocusInput = () => {
  const inputEl = React.useRef();

  const focusInput = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={focusInput}>Focus input</button>
    </>
  );
};

Dưới đây là ví dụ sử dụng createElement

import React from "react";
import "./styles.css";
const title = React.createElement(
  "h1",
  { className: "title" },
  "GeeksforGeeks",
);
const App = () =>
  React.createElement("div", {}, [
    React.createElement("button", { className: "btn" }, title),
    React.createElement("button", { className: "btn" }, title),
  ]);

export default App;

Còn dưới đây là ví dụ sử dụng cloneElement

import React from "react";
import Button from "./Button";
import "./styles.css";
const App = () => {
  return (
    <Parent>
      <Button />
      <br />
      <br />
      <Button />
    </Parent>
  );
};

const Parent = props => {
  let btn = "GeeksforGeeks";
  return (
    <div>
      {React.Children.map(props.children, child => {
        return React.cloneElement(child, { btn }, null);
        // third parameter is null
        // Because we are not adding
        // any children
      })}
    </div>
  );
};

export default App;

// file Button.js
import React from "react";
const Button = props => {
  return <button>{props.btn}</button>;
};

export default Button;

• VirtualDOM là một khái niệm được thực hiện bởi các thư viện bằng JavaScript trên các API của trình duyệt.

• ShadowDOM là một công nghệ trình duyệt được thiết kế chủ yếu cho các biến phạm vi và CSS trong các components web.

Nếu bạn cố gắng cập nhật state trực tiếp thì nó sẽ không re-render Component.

//Wrong
this.state.message = "Hello kungfutech.edu.vn";

Thay vào đó hãy sử dụng phương thức setState(). Nó lên lịch cập nhật cho đối tượng state của một Component. Khi state thay đổi, Component phản hồi bằng cách render:

//Correct
this.setState({message: ‘Hello kungfutech.edu.vn’});

Lưu ý: Nơi duy nhất bạn có thể gán state là constructor.

Nếu bạn đang sử dụng ES6 hoặc trình chuyển đổi Babel để chuyển đổi mã JSX của mình thì bạn có thể thực hiện điều này với Computed property name:

handleInputChange : function (event) {
    this.setState({ [event.target.id]: event.target.value });
}

Có 3 cách khả thi để làm được việc này

1. Binding in Constructor:

Trong các lớp JavaScript, các phương thức mặc định không bị liên kết. Điều tương tự này áp dụng cho các event handler ReactJS được định nghĩa là các class method. Thông thường, chúng ta liên kết chúng trong constructor như sau,

constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Perform some logic
}

2. Public class fields syntax

Nếu bạn không thích sử dụng phương pháp liên kết trên thì cú pháp Public class fields có thể được sử dụng để liên kết chính xác các lệnh callback:

handleClick = () => {
  console.log("this is:", this);
};
<button onClick={this.handleClick}>Click me</button>;

3. Arrow functions:

<button onClick={e => this.handleClick(e)}>Click me</button>

StrictMode của React là một component trợ giúp sẽ giúp bạn viết các React component tốt hơn, bạn có thể bọc một tập hợp các component bằng <StrictMode /> và về cơ bản nó sẽ:

• Xác minh rằng các component bên trong đang tuân theo một số phương pháp được đề xuất và cảnh báo bạn nếu không có trong bảng điều khiển.

• Xác minh rằng các deprecated-method không được sử dụng và nếu chúng được sử dụng ở strict-mode, sẽ cảnh báo bạn trong bảng điều khiển.

• Giúp bạn ngăn ngừa một số tác dụng phụ bằng cách xác định các nguy cơ tiềm ẩn.

Forwarding Refs là một kỹ thuật để tự động chuyển một ref từ một component tới component con, cho phép component cha có thể tham chiếu tới các element của component con để đọc và chỉnh sửa nó.

React cung cấp cho chúng ta một cách thức để thực hiện việc chuyển tiếp một ref, chúng ta sẽ bao component con trong React.forwardRef(), ở đây mình có ví dụ:

//Component Con
const MyInput = React.forwardRef((props, ref) => {
  return <input name={props.name} ref={ref} />;
});
// Component Cha
const MyComponent = () => {
  let ref = React.createRef();
  return <MyInput name="email" ref={ref} />;
};

Ví dụ bên trên mình đã sử dụng React.forwardRef(), ở đây nó cung cấp cho chúng ta 2 tham số lần lượt là props và refs, cho chúng ta nhận về giá trị của props và refs từ component cha.

Chúng ta có thể sử dụng React.forwardRef() trong class component bằng cách này sử dụng HOC (higher order component)

// Lấy ref thông qua props
class WrappedComponent extends Component {
  render() {
    return (
      <input type="text" name={this.props.name} ref={this.props.innerRef} />
    );
  }
}
// Gói componentnt được bọc của chúng tôi với ForwardRef, truyền vào props giá trị của refs
const MyInput = React.forwardRef((props, ref) => {
  return <WrappedComponent innerRef={ref} {...props} />;
});
export default MyInput;

Và cuối cùng chúng ta sẽ làm ví dụ có chức năng giống ví dụ ban đầu nhưng chúng ta sẽ tham chiếu đến element input trong component con.

import React from "react";

//Component Con
const MyInput = React.forwardRef((props, ref) => {
  return <input name={props.name} ref={ref} />;
});
// Component Cha
const MyComponent = () => {
  let ref = React.createRef();
  const handleButton = () => {
    ref.current.focus();
  };
  return (
    <>
      <code>freetuts.net</code>
      <MyInput name="email" ref={ref} />
      <button onClick={handleButton}>Focus Input</button>
    </>
  );
};
export default MyComponent;

Bạn không thể sửa đổi state của Component (với setState), cũng như không tương tác với trình duyệt (làm điều đó trong componentDidMount). render phải là một pure function

Có hai bước của thứ mà chúng ta gọi là render:

• Virtual DOM render: khi phương thức render được gọi, nó sẽ trả về một cấu trúc Virtual DOM mới của component. Phương thức render này luôn được gọi khi bạn gọi setState(), vì shouldComponentUpdate luôn trả về true theo mặc định. Vì vậy, theo mặc định, không có tối ưu hóa ở đây trong React.
• Native DOM render: react chỉ thay đổi các RealDOM node trong trình duyệt của bạn ít nhất có thể nếu chúng được thay đổi trong Virtual DOM - đây là tính năng tuyệt vời của React giúp tối ưu hóa việc thay đổi RealDOM và làm cho React nhanh.

Uncontrolled component (Component không kiểm soát) là component lưu trữ trạng thái riêng của nó trong nội bộ và bạn truy vấn DOM bằng cách sử dụng tham chiếu để tìm giá trị hiện tại của nó khi bạn cần. Điều này giống HTML truyền thống hơn một chút.

Ví dụ: trong phần bên dưới component UserProfile, name input được truy cập bằng cách sử dụng ref như bên dưới,

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }
  handleSubmit(event) {
    alert("A name was submitted: " + this.input.current.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Trong hầu hết các trường hợp, bạn nên sử dụng các components được kiểm soát (Controlled component) để triển khai các form.

Các hàm thường thấy trong các ứng dụng Redux cung cấp các hàm cho Redux về cách ánh xạ state / dispatch function tới một bộ props.

React có những ưu điểm sau so với Vue:

• Mang lại sự linh hoạt hơn trong việc phát triển các ứng dụng lớn.
• Dễ dàng hơn để test.
• Thích hợp cho việc tạo ứng dụng di động.
• Đã có sẵn nhiều thông tin và giải pháp khi gặp vấn đề (cộng đồng sử dụng lớn).

Có một số cách tiếp cận phổ biến được sử dụng để tránh binding các phương thức trong React:

1. Định nghĩa Event handler của bạn dưới dạng một Arrow function

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false,
    };
  }
  render() {
    return (
      <button
        onClick={() => {
          this.setState({ isFormSubmitted: true });
        }}
      >
        Submit
      </button>
    );
  }
}

2. Định nghĩa Event handler của bạn dưới dạng một Arrow function được gán cho một Class field

class SubmitButton extends React.Component {
  state = {
    isFormSubmitted: false,
  };
  handleSubmit = () => {
    this.setState({
      isFormSubmitted: true,
    });
  };
  render() {
    return <button onClick={this.handleSubmit}>Submit</button>;
  }
}

3. Sử dụng một Function component với Hooks

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);
  return (
    <button
      onClick={() => {
        setIsFormSubmitted(true);
      }}
    >
      Submit
    </button>
  );
};

Children là prop (this.prop.children) cho phép bạn chuyển các components dưới dạng dữ liệu đến các components khác, giống như bất kỳ prop nào khác mà bạn sử dụng. Có một số phương pháp có sẵn trong API React để làm việc với prop này. Bao gồm:

• React.Children.map
• React.Children.forEach
• React.Children.count
• React.Children.only
• React.Children.toArray

Cách sử dụng đơn giản của children prop như dưới đây:

var MyDiv = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>;
  },
});
ReactDOM.render(
  <MyDiv>
    <span>Hello</span>
    <span>World</span>
  </MyDiv>,
  node,
);

Chúng giúp cho React biết các thuộc tính của một thành phần React thuộc loại dữ liệu nào và được chấp nhận.

Flux là một mẫu kiến trúc thực thi luồng dữ liệu một chiều - mục đích cốt lõi của nó là kiểm soát dữ liệu để nhiều component có thể tương tác với dữ liệu đó mà không có nguy cơ ô nhiễm (without risking pollution).

Mẫu Flux là khái niệm chung; nó không dành riêng cho các ứng dụng React, cũng như không bắt buộc phải xây dựng một ứng dụng React. Tuy nhiên, Flux thường được các nhà phát triển React sử dụng vì các React component có tính chất khai báo - UI được hiển thị (View) chỉ đơn giản là một function của state (Store data).

Trong mẫu Flux, Store là cơ quan trung tâm cho tất cả dữ liệu; bất kỳ thay đổi nào đối với dữ liệu phải xảy ra trong Store. Các thay đổi đối với Store data sẽ được truyền đến View qua các event. Sau đó, View sẽ tự cập nhật dựa trên state mới của dữ liệu đã nhận.

Để yêu cầu thay đổi bất kỳ Store data nào, Actions có thể được kích hoạt. Các Action này được kiểm soát bởi một Central Dispatcher;

Các Action sẽ không xảy ra đồng thời, đảm bảo rằng Store chỉ thay đổi dữ liệu một lần cho mỗi Action.

Luồng một chiều nghiêm ngặt của mẫu Flux này thực thi tính ổn định của dữ liệu, giảm các lỗi runtime liên quan đến dữ liệu trong một ứng dụng.

Bạn cần làm theo các bước dưới đây:

Bước 1: tạo một Polymer element.

<link rel="import" href="../../bower_components/polymer/polymer.html">
Polymer({
   is: 'calender-element',
   ready: function(){
      this.textContent = "I am a calender";
   }
});

Bước 2: Import nó vào trang html, ví dụ: import nó vào index.html của ứng dụng React của bạn.

<link rel="import" href="./src/polymer-components/calender-element.html">

Bước 3: Sử dụng element đó trong tệp jsx.

"use strict";
import React from "react";
class MyComponent extends React.Component {
  render() {
    return <calender-element></calender-element>;
  }
}
export default MyComponent;

Hooks là một bổ sung mới chỉ có từ React 16.8. Chúng cho phép bạn sử dụng state và các tính năng khác của React mà không cần viết một class.

Với Hooks, bạn có thể trích xuất logic state từ một component để nó có thể được kiểm tra độc lập và sử dụng lại.

Hooks cho phép bạn sử dụng lại logic state mà không thay đổi cấu trúc phân cấp các component của bạn. Điều này giúp bạn dễ dàng chia sẻ Hooks giữa nhiều components hoặc với cộng đồng.

class là một từ khóa trong javascript và tuy nhiên react sử dụng JSX - là một phần mở rộng của javascript. Và JSX sử dụng className thay vì class.

render() {
   return <span className="menu navigation-menu">Menu</span>
}

ví dụ

<Modal {...this.props} title='Modal heading' animation={false}>

Đó là Spread notation, nó đã được thêm vào ES2018 (spread cho array / iterable trước đó, ES2015). Ví dụ nếu this.props chứa a: 1 và b: 2, thì

<Modal {...this.props} title='Modal heading' animation={false}>

sẽ tương tự với:

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Ký hiệu Spread không chỉ hữu ích cho trường hợp sử dụng trên mà còn để tạo một đối tượng mới với hầu hết (hoặc tất cả) thuộc tính của một object:

this.setState(prevState => {
  return { foo: { ...prevState.foo, a: "updated" } };
});

Trong JavaScript, giá trị của this thay đổi tùy thuộc vào current-context. Trong các component method của class, các developer thường mong đợi this tham chiếu đến current-instance của một component, vì vậy cần phải liên kết các method này với instance. Thông thường, điều này được thực hiện trong constructor — ví dụ:

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit() {
    this.setState({
      isFormSubmitted: true,
    });
  }
  render() {
    return <button onClick={this.handleSubmit}>Submit</button>;
  }
}

Dưới đây là một số khác biệt giữa event handling của HTML và React:

1. Trong HTML, tên event phải ở dạng chữ thường

<button onclick="activateLasers()"></button>

Trong khi trong ReactJS, nó tuân theo quy ước camelCase.

<button onClick={activateLasers}>

2. Trong HTML, bạn có thể trả về false để ngăn hành vi mặc định.

<a href="#" onclick="console.log('The link was clicked.'); return false" />

Trong khi trong ReactJS, bạn phải gọi preventDefault rõ ràng.

function handleClick(e) {
  e.preventDefault();
  console.log("The link was clicked.");
}

shouldComponentUpdate() là một lifecycle method cho phép chúng ta chọn không tham gia vào quy trình reconciliation cho các component nhất định (và các component con của chúng).

Nếu chúng ta biết rằng một phần nhất định trong UI của chúng ta thì sẽ không thay đổi, thì không có lý do gì để React gặp khó khăn khi cố gắng tìm hiểu xem nó có thay đổi hay không.

Bằng cách trả về false từ shouldComponentUpdate, React sẽ giả định rằng component hiện tại và tất cả component con của nó sẽ giữ nguyên như hiện tại.

ReactDOM cung cấp cho bạn phương thức ReactDOM.findDOMNode(param) để tìm đối tượng Node tương ứng với tham số của phương thức.

Bên trong Class Component nếu bạn gọi phương thức ReactDOM.findDOMNode(this), nó sẽ trả về cho bạn nút gốc (Root Node) của mô hình DOM. Ví dụ:

// File: findDOMNode-example.jsx

class Fruits extends React.Component {
  doFind() {
    // Find root Node of this Component
    var node = ReactDOM.findDOMNode(this);
    node.style.border = "1px solid red";
  }
  render() {
    return (
      <ul>
        <li>Apple</li>
        <li>Apricot</li>
        <li>Banana</li>
        <li>
          <button onClick={() => this.doFind()}>Find Root Node</button>
        </li>
      </ul>
    );
  }
}

// Render
ReactDOM.render(<Fruits />, document.getElementById("fruits1"));

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>ReactJS findDOMNode()</title>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <style>
      #fruits1 {
        border: 1px solid blue;
        padding: 5px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Example: findDOMNode(this)</h3>
    <a href="">Reset</a>

    <div id="fruits1"></div>

    <script src="findDOMNode-example.jsx" type="text/babel"></script>
  </body>
</html>

Kết quả:

• Flow là một công cụ phân tích tĩnh (trình kiểm tra tĩnh – static checker) sử dụng một tập hợp siêu ngôn ngữ, cho phép bạn thêm chú thích kiểu vào tất cả code của mình và bắt toàn bộ bug của class tại thời điểm biên dịch.
• PropTypes là một trình kiểm tra kiểu cơ bản (trình kiểm tra thời gian chạy – runtime checker) có trên React. Nó không thể kiểm tra bất cứ điều gì khác ngoài các loại dữ liệu của props được truyền vào một component nhất định. Nếu bạn muốn có trình kiểm tra kiểu dữ liệu linh hoạt hơn cho toàn bộ dự án của mình thì Flow / TypeScript là những lựa chọn thích hợp.

Người phỏng vấn muốn nghe một vài thông tin về cách React hoạt động bên trong nó. Các thuật toán Diffing cổ điển với độ phức tạp thời gian O(n³) có thể được dùng để tạo 1 cây các phần tử React, có nghĩa là để hiển thị 1000 phần tử sẽ cần 1 tỷ phép so sánh. Thay vào đó, React thực hiện 1 thuật toán heuristic O(n) với giả định rằng các nhà phát triển có thể gợi ý tại các phần tử con có thể được stable qua các hiển thị khác nhau với thuộc tính key.

Vấn đề:

Có cách nào để chỉ thêm các attributes vào một React component nếu một điều kiện nhất định được đáp ứng không?

Giải pháp:

Đối với một số attributes nhất định, React đủ thông minh để bỏ qua attribute đó nếu giá trị bạn truyền cho nó không là true. Ví dụ:

var InputComponent = React.createClass({
  render: function () {
    var required = true;
    var disabled = false;
    return <input type="text" disabled={disabled} required={required} />;
  },
});

sẽ cho kết quả:

<input type="text" required>

Một cách tiếp cận khả thi khác là:

var condition = true;
var component = <div value="foo" {...(condition && { disabled: true })} />;

Chúng ta sẽ thảo luận về cốt lõi của kiến trúc React Fiber. Fiber khá trừu tượng so với những thứ mà những nhà phát triển ứng dụng thường nghĩ đến. Nếu bạn cảm thấy thất vọng về những nỗ lực của mình để hiểu Fiber, đừng cảm thấy chán nản. Hãy tiếp tục cố gắng và cuối cùng cũng sẽ thu lại được gì đó có ý nghĩa. Chúng tôi đã xác định mục tiêu chính của Fiber là cho phép React tận dụng lợi ích từ việc lập kế hoạch (scheduling). Cụ thể chúng ta cần: - Tạm dừng công việc và quay lại thực hiện sau. - Gán ưu tiên cho những loại công việc khác nhau. - tái sử dụng lại những công việc đã hoàn thành. - bỏ qua những công việc mà không cần thiết nữa.

Để làm được những điều trên, trước tiên ta cần một cách để chia nhỏ 1 vông việc thành các đơn vị nhỏ hơn. Theo một cách nghĩa nào đó, một Fiber thể hiện một đơn vị công việc. Quay trở lại với ý tưởng trong React Components as functions of data, thường được biểu diễn như sau v = f(d)

Render ra một ứng dụng React như một lời gọi hàm mà bên trong chứa những lời gọi đến những hàm khác, và tiếp tục như thế. Điểm tương đồng này là hữu dụng khi ta nghĩ về Fibers. Cách mà các máy tính điển hình truy vết lại một thực thi của chương trình là sử dụng Call Stack. Khi một hàm được thực thi, một Stack Frame được thêm vào hàng đợi, Stack Frame đó đại diện cho công việc được thực thi bởi hàm đó.

Khi làm việc với các giao diện người dùng, vấn đề ở đây là có quá nhiều công việc được thực thi trong cùng một lần, nó có thể khiến cho Animation bị giảm FPS và trông rất tệ. thêm vào đó, một vài công việc có thể trở nên không cần thiết nếu nó bị thay thế bởi các cập nhật gần hơn. Đây là nơi việc so sánh các thành phần UI và hàm bị phá vỡ, bởi vì thông thường các thành phần có nhiều mối liên hệ cụ thể hơn là functions.

Những browsers mới hơn (và React Native) cài đạt các API nhằm giúp chỉ ra chính xác vấn đề: requestIdleCallback lập lịch một function có độ ưu tiên thấp được gọi trong giai đoạn nhàn rỗi, và requestAnimationFrame lập lịch cho những function có độ ưu tiên cao có thể gọi trong khung hình kế tiếp. Vấn đề là, để sử dụng những API đó, bạn cần một cách để chia công việc render thành các đơn vị nhỏ. Nếu bạn chỉ phụ thuộc vào Call Stack, nó sẽ làm việc cho đến khi stack trống. Sẽ tốt hơn nếu chúng ta có thể chỉnh sửa hành vi của Call Stack để tối ưu cho việc Render ra các UI? Sễ tốt hơn nếu chúng ta có thể ngắt quãng Call Stack theo ý mình và điều khiển các Stack Frame bằng tay. Đó chính là mục tiêu của React Fiber. Fiber là một tái cấu trúc của Stack, chuyên biệt cho các components của React. Bạn có thể hiểu một Fiber như là một Stack Frame ảo. Lợi ích của việc tái cấu trúc Stack là bạn có thể lưu các Stack Frame trong bộ nhowsvaf triển khai chúng cho dù bạn không muốn. Điều này là cần thiết cho việc đạt được mục tiêu cho việc lập lịch.

Bên cạnh việc lập lịch, xử lý các Stack Frame bằng tay mở ra tiềm năng cho các tính năng như Concurrency và Error Boundaries. Chúng ta sẽ bàn những vấn đề đó ở tương lai khi React Fiber chính thức được đưa vào sử dụng.

Một trong những nguyên nhân phổ biến nhất gây ra việc render chậm trong các ứng dụng React là khi các component được re-render không cần thiết. Có hai công cụ được cung cấp bởi React có ích trong những trường hợp sau:

• React.memo(): Điều này ngăn việc re-render không cần thiết của function component.
• PureComponent: Điều này ngăn việc re-render không cần thiết của class component.

Cả hai công cụ này đều dựa trên sự so sánh nông (shallow comparison) của các props được truyền vào component — nếu props không thay đổi, thì component sẽ không re-render. Mặc dù cả hai công cụ đều rất hữu ích, nhưng so sánh nông sẽ ảnh hưởng về hiệu suất, vì vậy cả hai đều có thể có tác động tiêu cực đến hiệu suất nếu sử dụng không đúng cách.

Một cách tối ưu hơn đó là chúng ta sử dụng React Profiler, hiệu suất có thể được đo lường trước và sau khi sử dụng các công cụ này để đảm bảo rằng hiệu suất thực sự được cải thiện bằng cách thực hiện một thay đổi nhất định.

Ưu tiên sử dụng các refs hơn findDOMNode() vì findDOMNode() ngăn cản một số cải tiến nhất định trong React trong tương lai.

Cách tiếp cận kế thừa của việc sử dụng findDOMNode()

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }
  render() {
    return <div />;
  }
}

Cách tiếp cận được đề xuất là:

class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }
  render() {
    return <div ref={node => (this.node = node)} />;
  }
}

Một lý do duy nhất khi người ta cần truyền props cho super() là khi bạn muốn truy cập this.props trong constructor:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
    // -> { icon: 'home', … }
  }
}

Trường hợp nếu bạn không truyền:

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props);
    // -> undefined
    // Props parameter is still available
    console.log(props);
    // -> { icon: 'home', … }
  }
  render() {
    // No difference outside constructor
    console.log(this.props);
    // -> { icon: 'home', … }
  }
}

Lưu ý rằng việc truyền hay không truyền các props cho super không ảnh hưởng đến việc sử dụng this.props bên ngoài constructor sau này.

Thỉnh thoảng bạn muốn cập nhập lại Component một cách thủ công, điều này có thể đạt được bằng cách sử dụng phương thức forceUpdate(). Đây là một phương thức của lớp React.Component, vì vậy các lớp con của React.Component sẽ được thừa kế phương thức này.

Ví dụ:

// file forceUpdate-example.jsx
class Random extends React.Component {
  constructor(props) {
    super(props);
  }

  newRandomValue(event) {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <button onClick={event => this.newRandomValue(event)}>Random</button>
        <div>Random Value: {Math.random()}</div>
      </div>
    );
  }
}

// Render
ReactDOM.render(<Random />, document.getElementById("random1"));

<!-- File: forceUpdate-example.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>ReactJS forceUpdate()</title>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <style>
      .search-box {
        border: 1px solid #cbbfab;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>forceUpdate() example:</h1>

    <div id="random1"></div>

    <script src="forceUpdate-example.jsx" type="text/babel"></script>
  </body>
</html>

Kết quả:

Mặc định là có. Có một phương thức boolean shouldComponentUpdate (object nextProps, object nextState), mỗi component có phương thức này và nó có trách nhiệm xác định “nên cập nhật component (chạy hàm render)?” mỗi khi bạn thay đổi state hoặc truyền các props mới từ component cha.

Bạn có thể viết triển khai phương thức shouldComponentUpdate của riêng mình cho component của bạn, nhưng mặc định luôn trả về true - nghĩa là luôn chạy lại hàm render.

Các mẫu MVC truyền thống đã hoạt động tốt trong việc tách các mối quan tâm về dữ liệu (Model), UI (View) và logic (Controller) - nhưng kiến trúc MVC thường gặp phải hai vấn đề chính:

• Luồng dữ liệu được xác định kém: các cập nhật xếp tầng xảy ra trên các chế độ View thường dẫn đến một mạng lưới sự kiện rối rắm rất khó để debug.
• Thiếu tính toàn vẹn của dữ liệu: model data có thể bị thay đổi từ bất kỳ đâu, mang lại kết quả không thể đoán trước trên UI.

Với mô hình Flux, UI phức tạp không còn bị cập nhật theo tầng; bất kỳ React component nào đã có sẽ có thể xây dựng lại state của nó dựa trên dữ liệu do Store cung cấp. Mẫu Flux cũng thực thi tính toàn vẹn của dữ liệu bằng cách hạn chế quyền truy cập trực tiếp vào dữ liệu được chia sẻ.

Sự khác biệt giữa constructor và getInitialState là sự khác biệt giữa chính ES6 và ES5. Bạn nên khởi tạo state trong constructor khi sử dụng các lớp ES6 và phương thức getInitialState khi sử dụng React.createClass.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      /* initial state */
    };
  }
}

tương đương với

var MyComponent = React.createClass({
  getInitialState() {
    return {
      /* initial state */
    };
  },
});

Người phỏng vấn muốn thấy ở đây là một sự hiểu biết vững chắc về khái niệm React cơ bản. Một controlled input nhận 1 prop làm giá trị hiện tại của nó, và 1 prop là 1 callback để thay đổi giá trị đó, nó là một React way

<input type="text" value={value} onChange={this.handleChange} />

Một uncontrolled input lưu giá trị của nó bên trong, sử dụng DOM API. Ví dụ dưới đây chúng ta không dùng value và onChange, mà dùng ref():

<input type="text" ref={this.textInput} />

Và chúng ta có thể truy xuất giá trị của nó như sau:

this.textInput.current.value;

Người phỏng vấn muốn được nghe nhiều thứ hơn có bất kì props nào để sử dụng các uncontrolled component không, có sự khác biệt nào về hiệu suất không? Với cách dùng controlled input thì dữ liệu của bạn (state) và UI (inputs) luôn đồng bộ với nhau, nghĩa là bạn phải cập nhật state của component, điều đó sẽ kích hoạt tiến trình React reconciliation. Còn với cách dùng uncontrolled input thì không cần điều đó, bạn chỉ giữ giá trị input bên trong phần tử DOM của input đó.

Bạn có thể thêm/chỉnh sửa props được truyền vào component dưới dạng Props proxy như bên dưới:

function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: "New Header",
        footer: false,
        showFeatureX: false,
        showFeatureY: true,
      };
      return <WrappedComponent {...this.props} {...newProps} />;
    }
  };
}

Khi ứng dụng đang chạy ở development mode, React sẽ tự động kiểm tra tất cả các props mà chúng ta thiết lập trên component để đảm bảo chúng phải đúng và đúng kiểu dữ liệu. Đối với trường hợp loại dữ liệu không chính xác, nó sẽ tạo ra các thông báo cảnh báo trong console dành cho development mode và nó bị tắt ở production mode để không bị ảnh hưởng hiệu suất. Các prop bắt buộc được xác định bằng isRequired.

Dưới đây là tập hợp các loại props được xác định trước:

• React.PropTypes.string
• React.PropTypes.number
• React.PropTypes.func
• React.PropTypes.node
• React.PropTypes.bool

Ví dụ chúng ta định nghĩa propTypes cho User component như bên dưới:

import PropTypes from 'prop-types';
class User extends React.Component {
  render() {
    return (
    <h1>Welcome, {this.props.name}</h1>
    <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

Người phỏng vấn muốn thấy nhiều kiến thức hơn về Reactjs và cách bạn quan tâm về hiệu suất. Đây là một trong các câu hỏi thường gặp nhất. Đáng để nhắc đến là:

• shouldComponentUpdate() - Mặc định return về true ( return true là re-render và ngược lại), bạn có thể thay đổi giá trị return nếu bạn biết props nào sẽ kích hoạt update.
• PureComponents - Sự khác biệt giữa React.Component và React.PureComponent là React.Component không tự thực hiện shouldComponentUpdate nhưng React.PureComponent sẽ tự thực hiện nó với 1 phép so sánh giữa prop với state.
• React.memo - Tương tự như PureComponent nhưng nó được ứng dụng cho functional component.