Trong các dự án React nhỏ hơn, việc giữ tất cả các phương thức thành phần của bạn trong chính các thành phần đó sẽ hoạt động tốt. Trong các dự án cỡ trung bình, bạn có thể ước mình có thể lấy các phương thức đó ra khỏi các thành phần của mình và trở thành một “người trợ giúp”. Ở đây, tôi sẽ chỉ cho bạn cách sử dụng Lớp [thay vì xuất các hàm và biến riêng lẻ] để sắp xếp mã của bạn
Ghi chú. Tôi làm việc trong React nên đó là ví dụ mà chúng ta sẽ thảo luận ở đây
tái cấu trúc điển hình
Trong một công cụ tái cấu trúc điển hình, bạn sẽ lấy một chức năng trên thành phần đó và chuyển nó sang một trình trợ giúp khác
Từ
const MyComponent = [] => {
const someFunction = [] => 'Hey, I am text'
return [
{someFunction[]}
]
}
Đến
import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
và
export const someFunction = [] => 'Hey, I am text'
Ví dụ này thực sự ngớ ngẩn, nhưng bạn thấy chúng ta đang đi đâu
- Lấy các chức năng của bạn và sao chép chúng vào một tệp riêng
- Nhập chúng và gọi chúng như bình thường
Tuy nhiên, khi mọi thứ trở nên phức tạp, bạn sẽ phải chuyển một loạt nội dung cho các chức năng đó - đối tượng, chức năng để thao tác trạng thái, v.v. Hôm nay tôi gặp phải một vấn đề khi tôi muốn trích xuất ba chức năng ra khỏi một thành phần và tất cả chúng đều yêu cầu các đầu vào giống nhau [một
export const someFunction = [] => 'Hey, I am text'
2 và một chức năng để cập nhật export const someFunction = [] => 'Hey, I am text'
2]. Phải có một cách tốt hơn…Tái cấu trúc với một lớp
Tôi đã tạo một bản demo lớn cho bài đăng này. Bạn có thể xem mã trên Github. Cam kết ban đầu hiển thị tất cả các chức năng bên trong thành phần chính [
export const someFunction = [] => 'Hey, I am text'
4] và các cam kết tiếp theo cấu trúc lại mã để sử dụng một lớpBạn có thể tự chạy cái này và làm bất cứ điều gì bạn muốn với nó. Nhớ
import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
0Chúng tôi bắt đầu với một thành phần “tìm nạp” một đối tượng [bắt chước cách chúng tôi có thể thực hiện việc này từ một API] với các thuộc tính nhất định trên đó. lặp lại [số ô], cạnh [chiều cao và chiều rộng], văn bản, màu sắc. Sau đó, chúng tôi có một số cách để thao tác với chế độ xem — thay đổi màu sắc, cập nhật văn bản, v.v. Sau mỗi lần thay đổi, chúng tôi hiển thị một thông báo
Chẳng hạn, đây là phương pháp thay đổi chiều rộng và chiều cao của chúng tôi
changeSide = side => {
const obj = {...this.state.obj, side}
this.fetchObject[obj];
this.setState[{ message: `You changed the sides to ${side} pixels!` }];
}
Chúng tôi có thể có một số phương thức khác yêu cầu các hành động tương tự — hoặc có thể là các phương thức rất khác. Chúng tôi có thể bắt đầu nghĩ về việc trích xuất mã này cho người trợ giúp. Sau đó, chúng tôi sẽ tạo một phương thức khác để gọi hành động
import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
1 và chúng tôi phải chuyển nó, import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
2, đối tượng ở trạng thái và import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
3 mà chúng tôi đang nhận làm đối số cho phương thức. Nếu chúng ta có một số phương thức tương tự, thì đó là rất nhiều tham số được truyền và có thể nó không thực sự hữu ích [hoặc có thể đọc được]Thay vào đó, chúng ta có thể sử dụng một lớp, hoàn thành với một phương thức khởi tạo
________số 8Điều này cho phép chúng tôi tạo một đối tượng có các chức năng mà chúng tôi có thể gọi bên trong thành phần chính của chúng tôi
const manipulator = new ObjectManipulator[{
object,
fetchObject: this.fetchObject,
markResettable: this.markResettable,
updateMessage: this.updateMessage,
updateStateValue: this.updateStateValue,
}];
Điều này tạo ra một đối tượng
import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
4 — một thể hiện của lớp import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
5 của chúng ta. Khi chúng ta gọi import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
6, nó sẽ chạy phương thức import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
7 mà chúng ta đã xác định ở trên. Không cần phải truyền vào import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
8 hoặc bất kỳ phương thức nào khác — chúng tôi chọn chúng từ hàm tạo, khi chúng tôi tạo thể hiệnBạn có thể tưởng tượng rằng điều này sẽ trở nên thực sự hữu ích nếu chúng ta có nhiều phương pháp này để giải quyết. Trong trường hợp của tôi, tôi cần gọi
import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
9es] sau mọi thứ tôi đang cố trích xuất. Definiexport const someFunction = [] => 'Hey, I am text'
0ion trên thể hiện của lớp thay vì chuyển nó tới từng hàm giúp tôi tiết kiệm được rất nhiều mãGiữ mọi thứ ngăn nắp
Phương pháp tổ chức này có thể thực sự hữu ích để giữ mọi thứ ở đúng vị trí của nó. Chẳng hạn, tôi có một mảng màu mà tôi ánh xạ để có các nút màu mà bạn thấy trong ví dụ. Bằng cách di chuyển hằng số này vào
import { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
5, tôi có thể đảm bảo rằng nó không xung đột với bất kỳ export const someFunction = [] => 'Hey, I am text'
2 nào khác trong phần còn lại của ứng dụng của tôiimport { someFunction } from 'functionHelper.js'
const MyComponent = [] => {
return [
{someFunction[]}
]
}
9Tôi có thể sử dụng
export const someFunction = [] => 'Hey, I am text'
3 để lấy đúng màu cho trang này, trong khi có thể có hằng số export const someFunction = [] => 'Hey, I am text'
2 chung được sử dụng cho mục đích khácNgười giới thiệu
Tài liệu Mozilla Class cũ tốt
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển phần mềm, chủ yếu là Ruby và Javascript. Yogi, Khách du lịch, Người đam mê. Tất cả các bức ảnh của tôi
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu