• REACT JS là gì?
• Học ReactJS qua loạt video hướng dẫn từ Khoa Phạm
• So sánh Reactjs và Angularjs – Hai khía cạnh javascript

1. Sử dụng những kỹ thuật mà ReactJS cung cấp cho chúng ta.

Khi viết framework ReactJS thì những nhà phát triển đã luôn lường trước những vấn đề liên quan đến performance. Nên đi kèm với việc hướng dẫn chúng ta làm sao sử dụng ReactJS thì song song đó họ cũng khuyển cáo chúng ta là nên sử dụng cái gì và như thế nào để đạt performance cao nhất.

Dưới đây là 3 kỹ thuật đó:

• React.PureComponent
• shouldComponentUpdate
• memo

Trong đó thì React.PureComponent có thể được sử dụng trong class-based component, shouldComponentUpdate trong lifecycle hook và memo là một HOC (Higher-Order Component) dùng khi wrap function component. Nếu sử dụng những kỹ thuật trên thì bạn có thể làm cho component của mình chỉ update khi mà props của nó thay đổi (state mình chưa đề cập ở đây).

Và khi sử dụng 3 kỹ thuật trên hãy tạo thói quen là chia component của mình nhỏ nhất có thể (theo ý của từng người nhé, nhỏ quá thì có thể bỏ qua vụ performance), chính xác và linh hoạt. Mặc dù chỉ là một ít của một ít thôi nhưng khi gom lại chúng ta sẽ có 1 nền tảng vững chắc. Cũng giống như việc xây nhà vậy, để bạn xây nên một căn nhà bền đẹp thì những thành phần nhỏ cấu thành ngôi nhà đó cũng phải như vậy.

// Desk.js
export default function Desk(props) {
    return (
        <div>
            <Book amount={props.bookAmount} />
            <Pen amount={props.penAmount} />
            <DeskLamp amount={props.deskLampAmount} />
        </div>
    )
}

// Book.js
export default class Book extends React.PureComponent {
    render() {
        return <div>Book: {this.props.amount}</div>
    }
}

// Pen.js
export default class Pen extendx React.Component {
    shouldComponentUpdate(nextProps) {
        return this.props.amount !== nextProps.amount
    }

    render() {
        return <div>Pen: {this.props.amount}</div>
    }
}

// DeskLamp
export default memo(function DeskLamp(props) {
    return <div>DeskLamp: {this.props.amount}</div>
})

Một chú ý nhỏ nữa là hãy dùng một là React.PureComponent khi bạn sử dụng class-based component và memo cho function component. Còn shouldComponentUpdate thì chúng ta dùng React.PureComponent thay thế luôn sử dụng shouldComponentUpdate để handle có thể gây bug không mong muốn.

2. Tránh sử dụng inline object.

inline object trong ReactJS thì đúng là như cơm bữa vậy =)). Vì vậy hãy tránh sử dụng nó.

Việc sử dụng inline object khi trong lúc truyền vào props sẽ khiến cho React hiểu là nó sẽ là một thể hiện mới vào mỗi lần render. Việc đó khiến mỗi lần component mà nhận được object prop thì là một lần nhận được một prop hoàn toàn mới, nó sẽ làm 3 kỹ thuật chúng ta nói ở trên chở nên vô nghĩa (React chỉ sử dụng shallow compare giữa props và nextProps).

Nó giống kiểu chúng ta muốn truyền một object style xuống chẵng hạn

<Component style={{ color: 'white' }} />

// Đừng dùng như dưới
function Foo(props) {
    return <Bar style={{ color: 'white' }} />
}

// Hãy dùng như dưới
function Foo(props) {
    const style = { color: 'white' }
    
    return <Bar style />
}

memo(function Bar(props) {
 return <div style={props.style}>Bar</div>
})

3. Tránh sử dụng anonymous function.

Việc sử dụng anonymous function cũng có giải thích tương tự như việc sử dụng inline object. Nó cũng khiến React hiểu rằng nó là một thể hiện hoàn toàn mới.

Trong trường hợp này hãy định nghĩa function đó rồi đưa vào props khi bạn sử dụng class-based component và sử dụng useCallBack khi bạn sử dụng function component.

Dĩ nhiên là sẽ có những lúc mà nó rất hữu dụng khi sử dụng hoặc chỉ đơn giản vì nó nhanh gọn thôi. Nhưng hãy chú ý là linh hoạt việc sử dụng anonymous function đối với component nhẹ và component nặng.

// Đừng dùng như dưới
function Foo(props) {
    return <Bar onClick={() => console.log(props.message)} />
}

// Hãy dùng như dưới
class Foo extends React.Component {
    handleClick = () => console.log(props.message)

    return <Bar onClick={handleClick} />
}

function Foo(props) {
    const handleClick = useCallback(() => console.log(props.message), [props.message]);

    return <Bar onClick={handleClick} />
}

memo(function Bar(props) {
 return <button onClick={props.onClick}>Click me to show message!</button>
})

Nguồn: https://viblo.asia/p/3-loi-khuyen-nho-giup-tang-preformance-trong-reactjs-V3m5WxY8KO7