Dự án Reactjs, những việc cần phải làm ngay!

"Không nên đụng vào cái nào đang chạy tốt !", tôi rất ghét câu này. "Chúng ta phải làm để tương lai những cái này tiếp tục chạy tốt !", với tôi câu này mới là chân ái 💌 . Hôm nay tôi sẽ làm rõ một số vấn đề cần refactor ngay hay chí ít là không nên làm trong các dự án Reactjs mới.

1. Loại bỏ một số methods trong Component Lifecycle

Component Lifecycle là khái niệm cơ bản nhưng nó rất khó để nắm rõ ngay cả với các lập trình viên nhiều kinh nghiệm. Tên các method thường dài và khá giống nhau. Facebook cũng nhận ra rất nhiều isues lặp đi lặp lại về lifecycle. Facebook chọn ra ba method "hư hỏng " nhất:

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

Chúng sẽ không dùng nữa( deprecated) trong các bản cập nhật sắp tới. Ở V16.3.0 trở đi sẽ bắt đầu warning, ở V17 sẽ bị thêm một frefix "UNSAFE_". Còn v18, tôi chưa nghe nói gì cả 😢. Facebook nói rằng họ đã phải chỉnh sửa 50.000 react components. Về phần mình, các bạn hãy refactor ngay nếu có thế nhé !

2. Loại bỏ các Legacy API

Thu đi để lại lá vàng, các phiên bản React cũ đi rồi thì để lại một mớ legacy api. Nếu dự án của bạn xây dựng lần đầu có sử dụng các di sản này thì nên refactor nó! Có 2 nhóm API cần bị loại bỏ :

  • Legacy Context API: contextTypes, getChildContext, childContextTypes. Các pattern liên quan như "Referencing Context in Lifecycle Methods"( constructor(props, context), componentWillUpdate(nextProps, nextState, nextContext), shouldComponentUpdate(nextProps, nextState, nextContext))
  • String Ref: Api này có rất nhiều isues nên cũng bị loại bỏ từ phiên bản 16.3 thay vào đó là một api ref mớiforwardRef . Cá nhân tôi cho rằng ngay cả ref Api mới cũng nên cân nhắc cần thận khi sử dụng. Việc sử dung ref mang lại nhiều hệ quả xấu về clean code, có lẽ tôi sẽ viết nhiều hơn về nó trong bài viết sắp tới.

3. Loại bỏ một số trong thư viện apollo-lient

Làm việc với grapql api thì các bạn chắc chắn biết đến apollo. Gần đây apolo có nhiều cập nhật đáng chú ý khiến ta nên loại bỏ nhiều thứ trong code của mình.

  1. High order function trong thư viện apollo đã bị deprecated, chúng sẽ tiếp tục nhận được các bản sửa lỗi cho đến tháng 3 năm 2020, sau đó sẽ không được Apollo duy trì nữa. Bao gồn tất cả method trong gói @apollo/react-hoc: graphql(query, [config])(component), withApollo(component).
  2. Apolo react component: toàn bộ trong gói @apollo/react-components bao gồm : Query,Mutation, Subscription. Cũng giống với HOC, apolo chỉ hỗ trợ đến tháng 3 năm 2020. Thay vào đó apolo chuyển hoàn toàn sang dung pattern hook: useQuery, useMutation, useSubscription.
  3. Redux, Tất nhiên bạn không dùng redux thì không loại bỏ được, nhưng nếu bạn đang sử dụng redux và grapql-apollo thì redux không cần thiết. Apollo đã cung cấp cả chức năng quản lý state. Nếu vẫn muốn dùng redux và hệ sinh thái của redux thì có thể bạn dùng fetch hay axios để request grapql api. Sau khi loại bỏ reddux, các hằng số ít thay đổi như language, user, token, ta dùng Context API để quản lý. Đi kèm với đó ta cũng không cần truyền data lấy từ apollo như là một props.
  4. Socketio-client, Apolo cũng cấp một hook useSubscriptions để tạo vào quản lý websocket, nếu ứng dụng của bạn không có quá nhiều request và logic phức tạp về ws thì sử dụng hook do apollo cung cấp là quá đủ.

4. Thêm prop-types

Javascript là ngôn ngữ khá lộn xộn, quan trọng nhất là về xác thực định dạng dữ liệu( type checking ). Tôi thích js nhưng điểm xấu này không thể che dấu được. Một số bạn chuyển sang dùng Typescript. Tôi cho rằng việc chuyển một dự án từ JS đã hoàn thiện sang TS chỉ vì vấn đề type checking là khá tốn thời gian. Có cách đơn giản hơn là sử dụng thư viện prop-types.

Cài đặt bằng npm và import như mọi gói khác trên reactjs:

npm install --save prop-types
import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

hoặc với cdn

<!-- development version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 
<!-- production version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>

prop-types có thể sử dụng nhiều mục đích :

  • validate prop:
MyComponent.propTypes = {
  // 7 kiểu dữ liệu cơ bản
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
    // A React element.
  optionalElement: PropTypes.element,
  // Và nhiều kiểu khác các bạn

Tham khảo thêm ở đây.

  • Requiring Single Child:
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

  • Default Prop Values
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

5. Thêm unit test

Nếu code của bạn đã có unit test rồi. thì xin chúc mừng bạn có một source code tuyệt vời để bảo trì! Nếu chưa hay thêm vào ngay đễ thể hiện sự có tâm của mình. Tôi sẽ viết về Jest, thư viện test mà chúng tôi đang dùng.

  • jest: Cài đặt Jest mình dùng npm
npm install --save-dev jest

--save-dev có nghĩa là chỉ dùng cho môi trường development

Tạo function sum để thử

export const sum = (a, b) => {
    return a + b;
}

Tạo file test:

// src/__test__/function.test.js
import {sum} from '../function'

describe('Test function', () => {
    it('Sum', () => {
        expect(sum(1, 1)).toBe(2); // 1 + 1 === 2
    })
})

Chạy test: npm test kết quả :

Mỗi khi bạn chỉnh sửa code chỉ cần chạy test là đảm bảo tin tưởng không có bug 😄. Các quy trình devpos, chương trình test sẽ chạy khi bạn push code lên git repo.

6. Kết luận

Những điều tôi viết phía trên không đầy đủ do tôi chỉ có thể theo dõi những công nghệ mà mình từng sử dụng. Nó cũng chỉ mang giá trị thời điểm do công nghệ cập nhật liên tục. Để đảm bảo dự án chạy tốt chung ta phải luôn theo sát công nghệ và nghiên cứu sâu công nghệ mình sử dụng.


All Rights Reserved