ReactJS và các khái niệm cơ bản

Published in

VelaCorp

8 min readOct 31, 2018

ReactJS là một thư viện của Javascript gần đây đang nổi lên với xu hướng Single Page Application. React nổi lên với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. Bây giờ chúng ta sẽ tìm hiểu những yếu tố liên quan đến React.

DOM ảo (Virtual DOM) là gì?

DOM(Document Object Model) là một thư viện giao diện người dùng giống như các phần tử, thuộc tính.
DOM sẽ được tạo ra khi trang web vừa tải xong DOM và tồn tại dưới dạng tree nodes được dùng để quản lí, truy xuất, chỉnh sửa tới bất kì phần tử nào thông qua đối tượng gốc là document. Ví dụ một phần tử thẻ HTML <p></p>có id là “house” ta sẽ truy xuất đến phần tử đó như sau:

document.getElementById("house");

Bất cứ khi nào phương thức setState () được gọi, ReactJS reset DOM ảo từ đầu. Việc tạo lại rất nhanh nên nó không ảnh hưởng đến hiệu suất. Tại bất kỳ thời điểm nào, ReactJS duy trì hai DOM ảo, một với DOM được cập nhật trạng thái ảo và một với DOM DOM trạng thái trước đó gần đây nhấ để so sánh và cập nhật phần tử thay đổi.
Vì sao lại dùng DOM ảo mà không dùng DOM thực? Vì khi ở DOM thực mỗi khi có sự thay đổi, vì cấu trúc của DOM là tree nodes, khi muốn thay đổi các element và các thẻ con của nó, nó phải thông qua các bước sau theo như ví dụ ở trên:

Trình duyệt phân tích ra cú pháp HTML
Loại bỏ phần tử con của elementId
Cập nhật giá trị mới cho phần tử DOM
Cập nhật lại CSS cho các phần tử liên quan
Cập nhật lại layout và hiển thị lại ra màn hình

Nên rất mất thời gian nếu việc cập nhật một phần nhỏ trong DOM khiến cho tất cả các phần tử DOM khác phải cập nhật lại mặc dù không thay đổi

Câu lệnh ReactDOM.render() bạn thấy trong file index.js khi khởi tạo project ReactJS có ý nghĩa cập nhận những phần tử DOM thay đổi.
ReactDOM là một thư viện Javascript để hỗ trợ cho việc cập nhật đó, được triển khai như sau:

ReactDOM.render(..., document.getElementById(‘app’));

JSX là gì?

JSX là một phần quan trọng trong ReactJS. JSX giúp code trở lên dễ đọc hơn. JSX là sự kết hợp giữa Javascript và XML. Nó chuyển đổi cú pháp dạng gần như XML về thành Javascript. Giúp người lập trình có thể code ReactJS bằng cú pháp của XML thay vì sử dụng Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.
Phần tử JSX có thể được lưu dưới dạng biến, được chuyển đến hàm hoặc lưu trữ trong một mảng hay là đối tượng.
Mỗi một biểu thức JSX cần được bao bọc bởi một phần tử ngoài cùng, thông thường chúng ta thường dùng thẻ <div></div> để bao bọc.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
ReactDOM.render(<h1>Hello</h1>, document.getElementById(‘app’));

Chúng ta có thể thêm mã Javascript bằng cách bao bọc nó trong cặp dấu ngoặc nhọn “{}”

ReactDOM.render(<h1>{2 + 3}</h1>, document.getElementById(‘app’));

Việc sử dụng JSX trong ReactJS là không bắt buộc. Bạn có thể sử dụng chỉ JS thuần. Nhưng tôi không khuyến khích vì thứ nhất: JSX cú pháp giống XML theo cấu trúc cây, điều đó giúp ta dễ dàng định nghĩa, quản lý được các component phức tạp, JSX không làm thay đổi ngữ nghĩa của Javascript
Trong JSX có một số cú pháp đặc trưng cần lưu ý như hàm map(), arrow function, .v..v..

ES6 là gì?

ES6 là chữ viết tắt của ECMAScript 6, đây được coi là một tập hợp các kỹ thuật nâng cao của Javascript và là phiên bản mới nhất của chuẩn ECMAScript. ECMAScript do hiệp hội các nhà sản xuất máy tính Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ Javascript. Bạn cứ nghĩ xem hiện nay có khá nhiều trình duyệt Browser ra đời và nếu mỗi Browser lại có cách chạy Javascript khác nhau thì các trang web không thể hoạt động trên tất cả các trình duyệt đó được, vì vậy cần có một chuẩn chung để bắt buộc các browser phải phát triển dựa theo chuẩn đó.
Các bạn có thể tham khảo ở nguồn http://es6-features.org/#Constants để biết thêm các tính năng mới

Component là gì?

Là một đoạn mã ngắn có ý nghĩa thể hiện một chức năng hay đối tượng nhất định, có thể tái sử dụng
Chúng ta có thể sử dụng nhiều mã JSX trong một component
Một ứng dụng React có thể có hàng chục, hoặc hàng trăm các component liên kết, tương tác với nhau
Để hiểu đơn giản hơn về component tôi sẽ đề cập cụ thể: Ví dụ bạn xây một ứng dụng “Nhà” bạn có thể chia ra thành các component nhỏ hơn như “Tầng 1”, “Tầng 2”, sau đó có thể chia nhỏ tiếp thành “Phòng Ngủ”, “Phòng Ăn”….. Cứ như vậy ứng dụng của chúng ta sẽ được chia ra một cách cụ thể rõ ràng, mạch lạc thuận lợi cho việc phát triển. Ví dụ:

import React from ‘react’; // Component tầng 1
export class tang_1 extends React.Component {
render() {
return (
<h1>Tầng 1</h1>
);
}}

Sau đó ta sẽ import file trên vào Component mẹ :

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { tang_1 } from ‘./tang_1.js’;
class Nha extends React.Component {
   render() {
      return (
         <div><tang_1/></div>
      );
   }
}
ReactDOM.render(<Nha/>,document.getElementById(‘app’));

Props là gì?

Thông tin được truyền từ component này sang component khác được gọi là props
Props của một component là một object. Nó chứa thông tin về thành phần đó. Để xem props của component đó chứa gì ta sẽ sử dụng đoạn câu lệnh this.props
Như tôi đã được giới thiệu component ở phía trên có component con là tầng 1. Vậy bây giờ chúng ta cần biết số phòng của component đó (tạm gọi là x). Mà biến “x” lại đang ở trên component mẹ, Bài toán được đặt ra và chúng ra giải quyết như sau:

Đây là component tang_1 đang trạng chờ nhận được props từ component mẹ:

import React from ‘react’;
export class tang_1 extends React.Component {
   render() {
      return <h1>My name is {this.props.name}!</h1>;
   }
}

Triển khai truyền props từ component mẹ:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {tang_1} from ‘./tang_1.js’;
class Nha extends React.Component {
   render() {
      return (
         <div><tang_1 number=3 /></div>
      );
   }
}
ReactDOM.render(Nha />, document.getElementById(‘app’));

Ngoài ra ta có thể truyền props là một hàm hoặc phương thức nhứ sau

import React from ‘react’;
export class Button extends React.Component {
   render() {
      return (
         <button onClick={this.props.talk}> Click me! </button>
      );
   }
}

Sau đó import component Button:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {Button} from ‘./Button’;
talk() {
   alert("Clicked");
}
class App extends React.Component {
   render() {
      return <Button talk={this.talk}/>;
   }
}
ReactDOM.render(Talker />, document.getElementById(‘app’));

Trong props của mỗi component có một thuộc tính là children, this.props.children sẽ trả về mọi thứ nằm giữa các thẻ JSX mở và đóng của component.

State là gì?

Một coponent có thể truy cập thông tin theo hai cách là : props và state.
Không giống như props, state của component không thể truyền được ra ngoài. Component sẽ quản lí state của chính nó.
Để tạo ra một Component có state, chúng ta sẽ thêm một thuộc tính state, thuộc tính phải được khai báo bên trong phương thức khởi tạo như sau:

class tang_1 extends React.Component {
   constructor(props) {
      super(props);
      this.state = { number: 1 };
   }
   render() {
      return <div>Số tầng là : {this.state.number}</div>;
   }
}

this.state phải là một đối tượng.
Để truy cập đến state ta sử dụng cú pháp this.state.name-of-property
Cách phổ biến để thay đổi state trong một component ta sử sụng hàm this.setState() như sau:

class tang_1 extends React.Component {
   constructor(props) {
      super(props);
      this.changeNumber= this.changeNumber.bind(this);
      this.state = { number: 1 };
   }
   changeNumber() {
      this.setState({number: 100});
   }
   render() {
      return (
         <div>Số tầng là : {this.state.number}</div>
         <Button onclick={thís.state.changeNumber}/>
      );
   }
}

Một component con có thể thay đổi được state của component mẹ bằng cách từ mẹ truyền xuống cho con một hàm callback để nhận dữ liệu cập nhật từ component con

Style trong React như thế nào?

Tương tự như HTML , biến CSS ở react tuy khác biệt nhưng không quá lớn. Thay vì được viết bằng chữ thường và được nối bởi dấu “-” thì bây giờ đã thay thế được viết bằng kiểu camelCase. Đây là một số cách triển khai CSS trong React:

Inline Styles

<h1 style={{ color: ‘red’ }}>Hello world</h1>

Style as object variable:

const styles = {
   color: ‘red’,
   fontSize: "17px"
};
<h1 style={styles}>Hello world</h1>

Lifecycle Methods là gì?

Một thành phần đặc trưng không kém Props, State của của React là Lifecycle
Lifecycle là những phương thức được viết sẵn truy cập đến từng thời điểm trong một vòng đời của component, từ đó chúng ta có thể triển khai ý tưởng một cách dễ dàng linh hoạt, thuận lời cho quá trình fix bug sau này
Chi tiết về vòng đời như sau:

componentWillMount: đây là method sẽ được thực thi trước khi 1 component được render trên cả server side và client side.
render: Hàm hiển thị
componentDidMount: method này được thực thi khi 1 component được render trên client side. Đây là nơi các hàm AJAX requests, DOM or update state được thực thi. Method này cũng đucợ sử dụng để kết nối với các JS Framework khác. Đây là nơi thích hợp để gọi đến API.

Có 5 phương thức được định nghĩa để thực hiện khi một phần tử được cập nhật:

componentWillReceiveProps: sẽ được thực thi ngay khi thuộc tính props được update và trước khi component được render lại.
shouldComponentUpdate sẽ trả về kết quả true or false. Phương thức này sẽ xác định 1 component có được update hay không. Mặc định giá trị này là true. Nếu bạn không muốn component render lại sau khi update state hay props thì return giá trị thành false.
componentWillUpdate được gọi khi chúng ta update state của component trước khi nó render lại.
render
componentDidUpdate sau khi componentWillUpdate ở trên được gọi xong thì đến lượt thằng này được goi.

Cuối cùng là:

componentWillUnmount: được gọi trước khi một component được xóa khỏi DOM

Lời kết: Vậy là tôi đã giới thiệu sơ qua cho các bạn về những điều cơ bản cốt lõi khi bắt đầu làm quen với React. Chúc các bạn học tập tốt ^^