Trong bài báo này, Mohammad Faisal sẽ giới thiệu tới các độc giả 21 Best Practice hướng tới một dự án React code sạch. Hãy cùng thu thập tri thức và nâng cao chất lượng code lên nào.
Photo by Diana Polekhina on Unsplash.
Lời nói đầu
React không hề áp đặt bạn phải cấu trúc mọi thứ như thế nào. Bởi vậy chính chúng ta là những người phải chịu trách nhiệm với project của mình, đảm bảo sao cho nó được 'sạch' và tiện maintain sau này.
Bữa nay ta sẽ cùng nhau nói về các Thực Hành Hay Nhất mà dân chuyên nên áp dụng để nâng cao sức khỏe cho app React của mình. Những rule này được mọi người chấp nhận rộng rãi, nên không lẽ gì chúng ta lại không tiếp cận đến những tri thức này.
Mọi thứ sẽ được thể hiện qua code, mời các bạn lên chuyến bay này và thắt dây an toàn vào nào!
1. Dùng dạng viết tắt của JSX
Dùng dạng viết tắt của JSX để truyền biến boolean. Ví dụ, nếu bạn muốn kiểm soát việc hiển thị title của Navbar component:
Xấu
return (
<Navbar showTitle={true} />
);
Tốt
return(
<Navbar showTitle />
)
2. Dùng phép toán ba ngôi
Ví dụ, nếu bạn muốn hiển thị chi tiết user nào đó dựa trên role:
Xấu
const { role } = user;
if(role === ADMIN) {
return <AdminUser />
}else{
return <NormalUser />
}
Tốt
const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />
3. Tận dụng lợi thế của cú pháp Object literal
Cú pháp tạo object sử dụng cặp dấu ngoặc {} thực sự giúp code của bạn dễ đọc. Ví dụ, bạn muốn hiển thị 3 loại user tương ứng với role. Lúc ấy bạn không thể dùng phép toán ba ngôi được vì có nhiều hơn hai lựa chọn.
Xấu
const {role} = user
switch(role){
case ADMIN:
return <AdminUser />
case EMPLOYEE:
return <EmployeeUser />
case USER:
return <NormalUser />
}
Tốt
const {role} = user
const components = {
ADMIN: AdminUser,
EMPLOYEE: EmployeeUser,
USER: NormalUser
};
const Component = components[role];
return <Componenent />;
conditional-rendering-good.jsx
Đã dễ xem hơn rồi đấy.
4. Dùng fragment
Hãy luôn chọn Fragment thay vì div. Không chỉ giữ cho code sạch mà còn tốt cho performance bởi vì có ít hơn 1 node được tạo ở DOM ảo.
Xấu
return (
<div>
<Component1 />
<Component2 />
<Component3 />
</div>
)
Tốt
return (
<>
<Component1 />
<Component2 />
<Component3 />
</>
)
5. Đừng định nghĩa hàm ở bên trong render
Đừng định nghĩa hàm ở bên trong render. Cố gắng kiềm chế logic bên trong render sao cho ít nhất có thể.
Xấu
return (
<button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE
This is a bad example
</button>
)
Tốt
const submitData = () => dispatch(ACTION_TO_SEND_DATA)
return (
<button onClick={submitData}>
This is a good example
</button>
)
6. Dùng memo
React.PureComponent và memo giúp performance của app bạn tăng một cách đáng kể. Và còn có thể tránh được rendering không cần thiết.
Xấu
import React, { useState } from "react";
export const TestMemo = () => {
const [userName, setUserName] = useState("faisal");
const [count, setCount] = useState(0);
const increment = () => setCount((count) => count + 1);
return (
<>
<ChildrenComponent userName={userName} />
<button onClick={increment}> Increment </button>
</>
);
};
const ChildrenComponent =({ userName }) => {
console.log("rendered", userName);
return <div> {userName} </div>;
};
Value của count không liên quan tới ChildComponent, cho nên chỉ cần render childcomponent một lần duy nhất thôi. Nhưng mỗi lần bạn click vào button thì nó đều được render.
Tốt
Edit ChildrenComponent như sau nào ~
import React ,{useState} from "react";
const ChildrenComponent = React.memo(({userName}) => {
console.log('rendered')
return <div> {userName}</div>
})
Giờ thì bạn có click đến bể nút, nó cũng sẽ chỉ render khi nào cần thiết thôi.
7. Đưa CSS vào JavaScript
Việc sắp xếp CSS còn vất hơn nhiều sắp xếp JS. Do vậy, khi viết app React, hãy tránh việc dùng JavaScript raw nhé.
Xấu
// CSS FILE
.body {
height: 10px;
}
//JSX
return <div className='body'>
</div>
Tốt
const bodyStyle = {
height: "10px"
}
return <div style={bodyStyle}>
</div>
8. Tận dụng Object Destructuring
Tận dụng Object Destructuring! Ví dụ, nếu bạn cần hiển thị chi tiết user:
Xấu
return (
<>
<div> {user.name} </div>
<div> {user.age} </div>
<div> {user.profession} </div>
</>
)
Tốt
const { name, age, profession } = user;
return (
<>
<div> {name} </div>
<div> {age} </div>
<div> {profession} </div>
</>
)
9. Không cần {} cho thuộc tính chuỗi ký tự
Ví dụ, khi bạn truyền chuỗi ký tự vào childcomponent:
Xấu
return(
<Navbar title={"My Special App"} />
)
Tốt
return(
<Navbar title="My Special App" />
)
10. Xóa code JS khỏi JSX
Bỏ hết JS code khỏi JSX nếu như nó không phục vụ cho mục đích render hay chức năng UI nào.
Xấu
return (
<ul>
{posts.map((post) => (
<li onClick={event => {
console.log(event.target, 'clicked!'); // <- THIS IS BAD
}} key={post.id}>{post.title}
</li>
))}
</ul>
);
Tốt
const onClickHandler = (event) => {
console.log(event.target, 'clicked!');
}
return (
<ul>
{posts.map((post) => (
<li onClick={onClickHandler} key={post.id}> {post.title} </li>
))}
</ul>
);
