Bí quyết lập trình React cho người mới bắt đầu

Naming components

Khi đặt tên component trong react, chúng ta nên đặt tên theo path-based-component-naming, tức là đặt tên component react tương ứng với đường dẫn của nó.

Ví dụ: component trong file components/User/List.jsx sẽ được đặt tên thành UserList.

Khi file nằm trong folder cùng tên, chúng ta không cần lặp lại tên đó.

Ví dụ: component trong file components/User/Form/Form.jsx sẽ được đặt tên thành UserForm (không phải là UserFormForm).

Nếu IDE hoặc editor của bạn có hỗ trợ fuzzy search, việc đặt tên như vậy sẽ giúp chúng ta tìm kiếm file dễ dàng hơn nhiều:

Hoặc chỉ đơn giản hơn là nghe tên component là có thể tìm kiếm ngay tại folder tree:

Sử dụng functional components

Nếu component react chỉ có tác dụng hiển thị dữ liệu, thay vì dùng class component như:

class Watch extends React.Component {
  render () {
    return <div>{this.props.hours}:{this.props.minutes}</div>
  }
}

chúng ta có thể dùng functional component để thay thế:

const Watch = (props) =>
  <div>{props.hours}:{props.minutes}</div>;

=> Ngắn hơn và không cần sử dụng this nữa.

Sử dụng React.Fragment thay cho div

Tất cả các component react phải được gói gọn vào trong 1 template, thường thì chúng ta sẽ dùng thẻ div.

Vậy trong trường hợp có nhiều thẻ div lồng nhau thì sao? Nếu sử dụng <div><div>...</div></div>, React sẽ không complie được code của bạn.

May mắn là, React version 16 cung cấp cho chúng ta một feature khá hữu ích, đó là React.Fragment. Và React.Fragment cho phép chúng ta nhóm một tập hợp các component con mà không cần 2 đầu node. Ví dụ:

<div class="app">
    (...a bunch of other elements)
    <div> (my react component)
        <ComponentA></ComponentA>
        <ComponentB></ComponentB>
        <ComponentC></ComponentC>
    </div>
    (...a bunch more elements)
</div>

nên sử dụng

<div class="app">
    (...a bunch of other elements)
    <React.Fragment> (my react component) // Thay thế node <div>
        <ComponentA></ComponentA>
        <ComponentB></ComponentB>
        <ComponentC></ComponentC>
    </React.Fragment>
    (...a bunch more elements)
</div>

Binding functions trong component

Xét ví dụ:

class DatePicker extends React.Component {
   handleDateSelected({target}){
     // Do stuff
   }
   render() {
     return <input type="date" onChange={this.handleDateSelected}/>
   }
 }

=> Không chạy. Nguyên nhân là: giá trị this chưa được ràng buộc trong component. Có một số cách khắc phục việc binding this như sau:

• Cách 1: Sử dụng arrow function.

<input type="date" onChange={(event) => this.handleDateSelected(event)}/>

• Cách 2: Bind this vào component constructor.

constructor () {
 this.handleDateSelected = this.handleDateSelected.bind(this);
}

• Cách 3: Khai báo function như 1 class field (arrow function syntax).

handleDateSelected = ({target}) => {
  // Do stuff
}

Follow SoC principle

Xét ví dụ:

export class DatePicker extends React.Component {
  state = { currentDate: null };
  handleDateSelected = ({target}) =>
     this.setState({ currentDate: target.value });
  render = () =>
     <input type="date" onChange={this.handleDateSelected}/>
}

Component DatePicker đang đảm nhận 2 nhiệm vụ: render temple và xử lý user action cùng một lúc. Sẽ tốt hơn nếu chúng ta tách DatePick thành 2 component react:

const DatePicker = (props) =>
  <input type="date" onChange={props.handleDateSelected}/>

Và:

export class DatePickerController extends React.Component {
  // ... No changes except render function ...
  render = () =>
     <DatePicker handleDateSelected={this.handleDateSelected}/>;
}

Component DatePickerContainer sẽ xử lý tương tác người dùng hoặc call API nếu cần thiết, sau đó sẽ render ra DatePicker.

Chúng ta nên cố gắng chia component sao cho chúng nhỏ nhất có thể để có thể dễ dàng hiểu, test và maintain.

Kết luận

Qua bài viết, chúng ta đã biết cách tiếp cận React một cách nhanh chóng. Hãy tận dụng để code React một cách hiệu quả và clean.

Tham khảo thêm về React : Những cách tối ưu hóa code React cần biết

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.