Quartz 🪬

Keeping Components Pure

2 min read

Pure Function

Một pure function sẽ bao gồm hai tính chất:

  • Chỉ làm nhiệm vụ của nó: tức là không thay đổi các đối tượng đã tồn tại trước khi nó được gọi thực thi.
  • Cùng input thì sẽ cho ra cùng output.

Có thể xem các pure function như là các công thức toán học. Ví dụ xét công thức y = 2x:

  • Nếu x = 1 thì y = 2.
  • Nếu x = 2 thì y = 4.
  • Không thể xảy ra trường hợp x = 3 nhưng y lại khác 6.

Ta biểu diễn công thức đó như sau:

function double(number) {
	return 2 * number
}

React được xây dựng dựa trên tính chất này: nếu truyền vào cùng một input thì sẽ cho ra cùng một JSX element.

Impure Function

Quá trình render của React phải luôn là pure. Nói cách khác, nó không được chỉnh sửa các đối tượng ở bên ngoài component. Ví dụ bên dưới là impure:

let guest = 0
 
function Cup() {
    // Bad: changing a preexisting variable!
    guest = guest + 1
    return <h2>Tea cup for guest #{guest}</h2>
}
 
function TeaSet() {
    return (
        <>
            <Cup />
            <Cup />
            <Cup />
        </>
    )
}

Component này đọc và chỉnh sửa giá trị của biến guest đã được khai báo bên ngoài component. Điều này có nghĩa là: mỗi lần gọi sử dụng thì nó đều sẽ cho ra kết quả khác nhau. Và nếu các component khác cũng sử dụng biến guest, JSX element mà các component đó render cũng sẽ trở nên khác đi và không như mong đợi.

Chúng ta có thể sửa lại bằng cách truyền biến guest vào component thông qua props như sau:

function Cup({ guest }) {
    return <h2>Tea cup for guest #{guest}</h2>
}
 
function TeaSet() {
    return (
        <>
            <Cup guest={1} />
            <Cup guest={2} />
            <Cup guest={3} />
        </>
    )
}
list
from [[Keeping Components Pure]]
sort file.ctime asc

Resources

Backlinks