ReactPropTypes trong ReactJS

Ngày 20 tháng 9 năm 2018 | 47 views

1. ReactJS là gì?

Về lịch sử của ReactJS thì theo giang hồ tương truyền rằng ngày xưa khi cảm thấy việc làm web với JQuery còn nhiều hạn chế các cao thủ Google đã tụ họp với nhau và cho ra đời AngularJS sau này thì phát triển lên Angular 2, 4, 6. Một thời gian dùng Angular thì anh Mark mới thấy nó còn chậm chạp quá nên tập hợp các môn sĩ ở Phê tê bóc lại và biên soạn ra môn ReactJS, Từ đó ReactJS ra đời và phát triển cho tới ngày nay thì độ phổ biến của ReactJS không kém gì Angular dù hai thằng này không thế đem ra so sánh được vì 1 thằng là framework, 1 thằng là thư viện.

Để luyện công ReactJS thì anh em có thể lên trang chủ của React https://reactjs.org/docs/getting-started.html 
Bài viết này chỉ nói về cách sử dụng ReactPropTypes trong ReactJS mà thôi.

2. ReactPropTypes trong ReactJS

Nếu ai đã từng làm việc với file .xsd để định nghĩa cấu trúc file .xml thì sẽ dễ dàng hiểu được về ReactPropTypes.
React PropTypes hiểu một cách đơn giản là một cách tốt giúp bạn bắt lỗi thông qua việc kiểm tra loại dữ liệu được truyền vào component thông qua props. PropTypes mang lại lợi ích tuyệt vời trong khi lại bỏ ra rất ít công sức để cài đặt (đơn giản là cài thêm 1 cái thư viện rồi sử dụng nó ở bất kỳ component nào mà bạn muốn - easy @@)

Sử dụng PropTypes sẽ mang lại cho chúng ta một số lợi ích như sau:

  • Dễ dàng kiểm tra được các kiểu dữ liệu của props mà component nhận được.
  • Khi sử dụng lại các component có PropTypes các cuder không cần đọc code component mà có thể biết các props nào bắt buộc và kiểu nó là gì
  • Có thể đăt giá trị mặc định cho props thông qua defaultProps.

3. Cách sử dụng PropTypes

Để sử dụng PropTypes đầu tiên chúng ta phải cài đặt thông qua npm bằng cú pháp như sau:

npm install --save prop-types

Sau đó, tại component nào muốn sử dụng propstype chúng ta thêm:

import PropTypes from 'prop-types';

Ví dụ đoạn code sau:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import autoBind from 'react-autobind';

export default class TodoTextInput extends Component{
    static propTypes = {
        onSave: PropTypes.func.isRequired,
        text: PropTypes.string,
        placeholder: PropTypes.string,
        editing: PropTypes.bool,
        newTodo: PropTypes.bool
    };
    
    constructor(props, context) {
        super(props, context);
        this.state = {
            text: this.props.text || ''
        };

    }

    render() {
        return (
          <input className={classnames({
                  edit: this.props.editing,
                  'new-todo': this.props.newTodo
                 })}
                 type='text'
                 placeholder={this.props.placeholder}
                 autoFocus='true'
                 value={this.state.text} />
        );
    }
}

Vậy nó hoạt động thế nào? PropTypes dùng để định nghĩa kiểu dữ liệu được truyền vào cho component. Vậy mỗi lần, một giá trị được truyền vào thông qua props, nó phải được kiểm tra loại dữ liệu có đúng không. Nếu bạn truyền vào kiểu dữ liệu không đúng với kiểu được khai báo một đoạn message lỗi sẽ hiển thị ở phần console trên trình duyệt của bạn.

Ở đây mình sử dụng tool Visual Studio Code Insider (có thể tải ở đây: https://code.visualstudio.com/insiders/ )

Các bạn cài đặt thêm các extendsion để sử dụng được proptypes:  React PropTypes Intellisense

Và giờ để sử dụng thì rất đơn giản. Ví dụ mình muốn import cái component ở trên vào App.js. Nó sẽ tự động hiện ra luôn cần truyền vào các biến nào, kiểu là gì...

Ngoài ra thì còn có một vài kỹ thuật khác với proptypes:
Nó có thể xác thực chính xác các thuộc tính của một đối tượng (plain JavaScript object) thông qua shape

static propTypes = {
  car: PropTypes.shape({
    registrationNumber: PropTypes.string,
    year: PropTypes.number
  })
}

Trong ví dụ trên bạn có thể thấy, bạn cần truyền vào cho prop car là một đối tượng có thuộc tính registrationNumber là string và year là number. Nếu đối tượng truyền vào có thuộc tính với kiểu dữ liệu ko đúng bạn sẽ nhận được thông báo lỗi ngay.

Ví dụ bạn muốn giá trị của prop truyền vào chính xác chỉ được là một trong các giá trị được định nghĩa từ trước có thể làm như sau:

static propTypes = {
  sex: PropTypes.oneOf([
    'female', 'male', 'gay'
  ])
}

Bên cạnh việc chỉ rõ các giá trị có thể cho một prop bạn cũng có thể khai báo một tập hợp các kiểu dữ liệu có thể của prop như sau

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
])

Các bạn có thể khởi tạo giá trị props mặc định cho component. Bạn có thể khởi tạo thông qua defaultProps của component

static defaultProps = {
  country: 'Austria'
}

3. Kết luận

React PropTypes là một cách tốt để xác thực đầu vào của component. Hơn nữa nếu một ai đó muốn sử dụng component của bạn, nó cung cấp một cái nhìn tổng quan cho tất cả các props và loại dữ liệu của nó. Tôi nghĩ việc sử dụng PropTypes là rất hữu dụng nó tránh được những lỗi khó chịu và cải thiện được tính tái sử dụng component của bạn!