ReactJS: 7 sự ảo tưởng sức mạnh

ReactJS: 7 sự ảo tưởng sức mạnh

Mặc dù React đang phát triển rộng khắp trong thế giới front-end, nhưng có một số điều chúng ta hay lầm tưởng về nó. React là một thư viện để xây dựng giao diện web(user interface) dựa trên nguyên lý phân chia các components, được phát triển bởi ông lớn Facebook và được hàng ngàn công ty sử dụng như Twitter, Dropbox, Paypal, Airbnb …

Bạn có thể thấy được sự phổ biến của React thông qua lượt download trên npm với hơn 7 triệu chỉ trong tháng 10, 2017 và hơn 100 000 sao trên trang Github.

Mặc dù nó phổ biến như thế, nhưng tôi thấy rằng chúng ta vẫn đang có nhiều hiểu sai về sức mạnh của React. Sau đây, tôi sẽ chỉ ra 7 điểm lầm tưởng về React mà nhiều người gặp phải.

Xem thêm những thủ thuật xịn cho Javascript tại Youtube của tôi.

1. React là một framework

Có một sự lầm tưởng nhẹ là React như một framework, hỗ trợ đầy đủ các tính năng cho một web app như là những tính năng của Angular, Ember, …

Mặc dù React thường được dùng để mô ta toàn bộ các thành phần để phát triển web trong hệ sinh thái của nó, nhưng phần cốt lõi của nó chỉ qua tâm tới phần View. Điều này giúp cho các View Layer được xử lý một cách nhẹ nhàng, dễ dàng trong một web app.

Hầu hết framework đều đề xuất những structure cho một dự án, nhưng với React thì không. Nó rất mềm dẻo và dễ chia module, điều này giúp nó dễ đáp ứng nhiều nhu cầu của một dự án hơn.

Một developer cũng rất dề dàng tiếp cận và học React trong một ngày để có thể hiểu cách viết các components của React. Điều này không đúng cho một framework như Angular, Ember, …

2. JSX sẽ bị bắt buộc dùng trong React

Lần đầu tiên, JSX được công bố bởi Facebook như là một cách để định nghĩa UI cho ứng dụng. Cú pháp của nó trông giống như HTML nhưng được tận dụng sức mạnh của javascript trong đó, để dễ dàng khai báo một component hơn.

Một số người không hài lòng với cách React nhúng những thứ như HTML vào javascript code. Điều đó dường như đang vi phạm quy tắc về phân chia trong code. Nhưng thực chất JSX không phải là HTML, nó là javascript code bởi vì nó có thể được chuyển qua code javascript bằng các transpilers như Babel.

Trong mọi trường hợp thì JSX không phải là lựa chọn duy nhất trong React. Bạn có thể chọn một ngôn ngữ template bất kỳ như React Templates hoặc đơn giản là dùng API React.createElement() trực tiếp. Bởi vì JSX thực chất là cách viết khác của React.createElement().

Ví dụ, đoạn code sau đây được viết bằng JSX:

class HelloWorld extends React.Component {
      render() {
        return <h1>Hello world</h1>
      }
}

Nó sẽ được chuyển sang Javascript khi sử dụng Babel

 class HelloWorld extends React.Component {
      render() {
        return React.createElement(
          "h1",
          null,
          "Hello world"
        );
      }
  }

Nhưng thực sự, nếu bạn dùng React thì nên sử dụng JSX bởi vì các nhà sáng lập React rất khuyến khích điều đó. Và hầu hết các tài liệu và khoá học đều dùng JSX.

Nhưng nếu bạn không thích thì bạn có thể không dùng JSX cho ứng dụng của bạn. Cũng như có nhiều người thích Vanilla Javascript hơn là Jquery.

3. React nhanh hơn DOM

Bên dưới bộ máy của React, chúng ta thường nghe tới “Virtual DOM”, nó là một cây Javascript Object để mô phỏng một cây DOM thực sự của trình duyệt.

Đó là lý do tại sao khi sử dụng React, chúng ta không thao tác trực tiếp với DOM, giống như Jquery từng làm. Thay vào đó, bạn sẽ nói cho React biết bạn muốn cập nhật DOM nào thông qua các State Object, React sẽ làm việc đó thay bạn. Cool 🙂

Điều đó tạo nên một mô hình rõ ràng cho các lập trình viên. Bởi vì bạn không cần phải theo dõi tất cả các DOM State. Thay vào đó, bạn chỉ cần thay đổi các State Object, sau đó React sẽ sử dụng một thuật toán phân tích sự khác nhau(diffing algorithms) thông minh để biết phần UI nào thay đổi so với DOM trước đó, sau đó mới tiến hành cập nhật DOM trên trình duyệt.

Lợi ích lớn lao của Virtual DOM là cung  cấp một API để tạo UI, làm hạn chế tối đa việc thay đổi DOM trên trình duyệt. Vì thế nó không thể nhanh hơn thao tác DOM thông thường được. Ví dụ một thao tác thay đổi như thêm một Class vào DOM khi sử dụng javascript thuần lúc nào cũng nhanh hơn sử dụng className trong React.

Đó là vì, theo như định nghĩa, React phải làm thêm nhiều việc hơn như là chạy một giải thuật tìm ra những phần nào cần được cập nhật. Cho nên, mặc dù Virtual giúp chúng ta nhiều thứ, nhưng về bản chất chúng vẫn làm nhiều việc hơn thao tác DOM thông thường.

Nếu bạn cập nhật DOM bằng chính Javascript thuần thì không có gì có thể đánh bại bạn, trừ phi bạn cập nhật quá nhiều DOM hơn bạn muốn.

Một ví von dễ hiểu là, như một trò chơi, tôi đưa các bạn một chiếc xe hơi như nhau, các bạn tự chọn đường đi dễ nhất và nhanh nhất để đi từ điểm khởi đầu cho tới điểm kết thúc. Chiếc xe hơi là vanilla DOM manipulation mà những người chơi là React, là Angular, là Vue. Việc ai vận dụng thông minh chiếc xe hơi sẽ là người chiến thắng. Và nếu bạn biết cách lái chiếc xe hơi này thì bạn cũng không cần React nữa.

4. ES6 bị bắt buộc trong React

Nếu như bạn chưa biết đến những lợi ích của những tính năng mới trong ES6(ES2015), điều đó có vẻ như bạn vẫn có thể phát triển một sản phẩm bằng React với chỉ ES5.

React cung cấp create-react-class module như một cách thay thế để tạo nên component thay vì sử dụng anh chàng ES6.

Đơn giản bạn có thể cài đặt nó như sau: npm install create-react-class –save. Option –save đơn giản là nó như một dependecy bắt buộc cho cả dev mode và prod mode.

Sau đó, bạn có thể dùng nó để tạo một component như sau:

 var createReactClass = require('create-react-class');
    var sayHello = createReactClass({
      render: function() {
        return <h1>Hello from out app</h1>;
      }
 });

Mặc dù, cộng đồng React vẫn thích dùng ES6 class để tạo component, nhưng cả hai cách tiếp cận đều có khả năng như nhau. Nhưng có một boilerplate khá phiền( tất cả chúng ta đều chán ghét những boilerplate?) là bạn phải bind this cho từng event handler trong ES6 class. Với create-react-class điều đó dường như là một magic 🙂

class Greeting extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
        // bind methods here
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.setState({
            count: this.state.count + 1
        });
      }

      render() {
        return (
              <button onClick={this.handleClick}>Click Me</button>
        );
      }
 }
class Greeting extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
      }

      handleClick() {
        this.setState({
            count: this.state.count + 1
        });
      }

      render() {
        return (
              <button onClick={this.handleClick.bind(this)}>Click Me</button>
        );
      }
 }

Khi sử dụng thằng create-react-class thì có vẻ bạn sẽ chẳng cần bận tâm việc bind các event của bạn nữa. Bạn có thể tìm hiểu sự khác nhau của hai cách tiếp cận này tại React docs.

5. React thì rất phức tạp để cài đặt.

React app đã từng là một ác mộng khi setup trong quá khứ. Bạn cần phải làm rất nhiều việc để init một app. Nó yêu cầu nhiều bước biên dich và cấu hình cho các tools như Webpack, Browserify, Gulp, Babel, … rất nhiều bước tẻ nhạt nữa.

Tuy nhiên, kể từ khi Create React App được công bố bởi Reat team, điều đó đã trở nên dễ dàng.

Bạn có thể cài đặt dễ dàng bằng lệnh: npm install -g create-react-appcreate-react-app HelloReactApp. Sau đó, bạn npm start sẽ mở được app với http://localhost:3000.

Nếu trong quá trình phát triển app, những cấu hình tự động của create-react-app không đáp ứng nhu cầu của bạn, bạn có thể dễ dàng tùy chỉnh bằng lệnh npm run eject, tất cả những file cấu hình và dependencies sẽ được show ra cho bạn cấu hình dễ dàng.

6. Bạn cần Redux cùng với React.

Hiển nhiên quản lí state trong app là nhiệm vụ tối quan trọng cho một một SPA. Nó như một cách để bạn quản lý state giữa các component và cho một app phức tạp.

Redux được thiết kế nhằm giải quyết vấn đề  của state bằng cách tập trung tất các variables vào một nơi duy nhất, để chúng ta có một “single source of truth”, thay vì mỗi component sẽ giữ và quản lý chính state của nó.

Công nghệ mới là con dao hai lưỡi, bạn nên cân nhắc thật kỹ khi sử dụng một cái gì đó mới cho dự án của bạn. Nếu bạn thấy chưa thật sự cần, thì bạn sẽ không cần? Thực sự có nhiều cách để sử dụng chỉ React bạn cũng có thể quản lí và scale local state của bạn. Redux sinh ra để giải quyết vấn đề gì?

7. Bạn phải sử dụng inline style với React

React khuyến khích mọi người tập trung html, logic, style cho một component ở cùng một file. Bởi vì bạn sẽ không có một component khép kín(self-contained) nếu bạn định nghĩa rời rạc các thành phần của nó.

Bởi vì lý do đó nên React đề nghị inline style trong component:

const divStyle = {
      color: 'blue',
      fontSize: '15px',
};

 const HelloWorldComponent = () => <div style={divStyle}>Hello World!</div>;

Bạn cũng có thể tạo một file styles.css riêng lẻ cho một component và sau đó import vào component của bạn.

import React, { Component } from 'react';
import './Clock.css';

class Clock extends React.Component {
    // ...
}

export default Clock;

Tổng kết

Tôi hi vong bài viết này có thể giúp bạn khám phá ra sự thật về React, những gì nó đem lại cho chúng ta, và tại sao bạn nên xem xét nó cho dự án tiếp theo của bạn.

Nguồn: Bài viết của  Ayo Isaiha từ 7 myth about React

Leave a Comment