8 mục tôi đã thêm vào hướng dẫn kiểu React + TypeScript của mình

Mar 22 2022
Tên tệp TSX, khai báo thành phần chức năng, v.v.
Bao gồm một hướng dẫn về phong cách lập trình trong ứng dụng React của bạn có thể có tác động lớn đến quá trình phát triển. Nó thúc đẩy cảm giác về cấu trúc và cung cấp một định dạng cho các nhà phát triển cơ sở làm theo.

Bao gồm một hướng dẫn về phong cách lập trình trong ứng dụng React của bạn có thể có tác động lớn đến quá trình phát triển. Nó thúc đẩy cảm giác về cấu trúc và cung cấp một định dạng cho các nhà phát triển cơ sở làm theo. Nếu làm đúng, bạn có thể tiết kiệm thời gian trong quá trình xem xét bằng cách bao gồm những thứ bạn muốn xem.

Tôi muốn chia sẻ một số vật dụng tôi đã sử dụng trong quá khứ cho các hướng dẫn phong cách của riêng tôi. Một số trong số đó chỉ là sở thích cá nhân, trong khi những người khác có ảnh hưởng đến hiệu suất và cấu trúc tệp.

Hy vọng rằng, danh sách này sẽ cung cấp cho bạn một số cảm hứng nếu bạn tự viết.

Tên tệp TSX

TSX Tên tệp phải là Pascal Case. Tốt nhất bạn nên có một tiêu chuẩn cho việc đặt tên tệp để giữ cho các thư mục dễ đọc.

Làm:

MyFile.tsx

myFile.tsx
my-file.tsx
my_file.tsx
My_File.tsx

Tôi thích khai báo const hơn vì bản chất ngắn gọn của chúng. Luôn bao gồm FunctionComponent loại để có quyền truy cập vào các thuộc tính như trẻ em

Làm:

const MyComponent: React.FunctionComponent = () => {}

const MyComponent = () => {}
function MyComponent() {}

Các bản xuất được đặt tên sẽ được sử dụng khi một thành phần là một phần của thư viện thành phần hoặc bất kỳ cấu hình nào khác có nhiều bản xuất tương tự.

export const MyComponent1: React.FunctionComponent = () => {}
export const MyComponent2: React.FunctionComponent = () => {}

Các bản xuất mặc định sẽ được sử dụng khi một thành phần được sử dụng một lần hoặc nếu một tệp có một bản xuất không được kết hợp với phần còn lại của thư mục.

const MyComponent: React.FunctionComponent = () => {}
export default MyComponent

useState Naming

Các biến useState phải có tên mô tả, với tên hàm cập nhật được đặt + {tên biến}

Làm:

const [name, setName] = useState("")

const [name, updateName] = useState("")

Khi so sánh hai giá trị, hãy luôn sử dụng ===. Trong JavaScript, ==thực hiện cưỡng chế kiểu có thể dẫn đến những lỗi rất kỳ quặc. Ví dụ: 1 == “1”sẽ tương đương với true.

Làm:

if (var1 === var2) {}

if (var1 == var2) {}

Khi xác định giao diện cho các thuộc tính thành phần, luôn luôn xác định các biến đầu tiên và chức năng thứ hai, được phân tách bằng dấu cách.

Làm:

interface IProps {
var1: string
var2: boolean

function1(): void
}
const MyComponent: React.FunctionComponent = (props: IProps) => {}

interface IProps {
var1: string
function1(): void
var2: boolean
}
const MyComponent: React.FunctionComponent = (props: IProps) => {}

Khi sử dụng phương pháp viết tắt để kết xuất có điều kiện, hãy sử dụng toán tử bậc ba đầy đủ, thay vì logic &&. Rất hiếm, nhưng toán tử && cục bộ có thể trả về các giá trị lẻ trong jsx khi các điều kiện nhất định được đáp ứng.

Làm:

const MyComponent: React.FunctionComponent = () => {
const authenticated = true
return (
<div>
{authenticated ? <p> You're Logged In </p> : null}
</div>
)
}

const MyComponent: React.FunctionComponent = () => {
const authenticated = true
return (
<div>
{authenticated && <p> You're Logged In </p>}
</div>
)
}

Hãy cho tôi biết nếu có bất kỳ điều gì mà bạn thấy hữu ích.

© Copyright 2021 - 2023 | vngogo.com | All Rights Reserved