Thay thế dấu ngoặc kép trong javascript

Theo chúng tôi, React là cách hàng đầu để xây dựng các ứng dụng Web lớn, nhanh bằng JavaScript. Nó đã mở rộng quy mô rất tốt cho chúng tôi tại Facebook và Instagram

Một trong nhiều phần tuyệt vời của React là cách nó khiến bạn nghĩ về các ứng dụng khi bạn xây dựng chúng. Trong tài liệu này, chúng tôi sẽ hướng dẫn bạn quy trình xây dựng bảng dữ liệu sản phẩm có thể tìm kiếm bằng React

Bắt đầu với một Mock

Hãy tưởng tượng rằng chúng ta đã có một API JSON và một bản mô phỏng từ nhà thiết kế của chúng ta. Mô phỏng trông như thế này

API JSON của chúng tôi trả về một số dữ liệu giống như thế này

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

Bước 1. Chia giao diện người dùng thành một hệ thống phân cấp thành phần

Điều đầu tiên bạn muốn làm là vẽ các hộp xung quanh mọi thành phần (và thành phần phụ) trong mô hình và đặt tên cho tất cả chúng. Nếu bạn đang làm việc với một nhà thiết kế, họ có thể đã làm việc này rồi, vì vậy hãy nói chuyện với họ. Tên lớp Photoshop của họ có thể trở thành tên của các thành phần React của bạn

Nhưng làm thế nào để bạn biết những gì nên là thành phần riêng của nó? . Một kỹ thuật như vậy là nguyên tắc trách nhiệm duy nhất, nghĩa là lý tưởng nhất là một thành phần chỉ nên làm một việc. Nếu nó kết thúc việc phát triển, nó nên được phân tách thành các thành phần con nhỏ hơn

Vì bạn thường hiển thị mô hình dữ liệu JSON cho người dùng, nên bạn sẽ thấy rằng nếu mô hình của bạn được xây dựng chính xác, giao diện người dùng của bạn (và do đó cấu trúc thành phần của bạn) sẽ ánh xạ độc đáo. Đó là bởi vì các mô hình dữ liệu và giao diện người dùng có xu hướng tuân theo cùng một kiến ​​trúc thông tin. Tách giao diện người dùng của bạn thành các thành phần, trong đó mỗi thành phần khớp với một phần của mô hình dữ liệu của bạn

Bạn sẽ thấy ở đây chúng tôi có năm thành phần trong ứng dụng của mình. Chúng tôi đã in nghiêng dữ liệu mà mỗi thành phần đại diện. Các số trong ảnh tương ứng với các số bên dưới

1. FilterableProductTable (màu cam). chứa toàn bộ ví dụ
2. SearchBar (màu xanh). nhận tất cả đầu vào của người dùng
3. ProductTable (màu xanh lá cây). hiển thị và lọc bộ sưu tập dữ liệu dựa trên đầu vào của người dùng
4. ProductCategoryRow (màu ngọc lam). hiển thị tiêu đề cho từng danh mục
5. ProductRow (màu đỏ). hiển thị một hàng cho mỗi sản phẩm

Nếu bạn nhìn vào ProductTable, bạn sẽ thấy rằng tiêu đề bảng (chứa nhãn “Tên” và “Giá”) không phải là thành phần của chính nó. Đây là một vấn đề ưu tiên và có một cuộc tranh luận được đưa ra theo bất kỳ cách nào. Đối với ví dụ này, chúng tôi để nó như một phần của ProductTable bởi vì nó là một phần của việc kết xuất việc thu thập dữ liệu thuộc trách nhiệm của ProductTable. Tuy nhiên, nếu tiêu đề này trở nên phức tạp (e. g. , nếu chúng tôi thêm khả năng chi trả để sắp xếp), chắc chắn sẽ hợp lý khi biến thành phần này thành phần ProductTableHeader của riêng nó

Bây giờ chúng ta đã xác định được các thành phần trong mô hình của mình, hãy sắp xếp chúng thành một hệ thống phân cấp. Các thành phần xuất hiện bên trong một thành phần khác trong mô phỏng sẽ xuất hiện dưới dạng thành phần con trong cấu trúc phân cấp

• FilterableProductTable

  • SearchBar

  • ProductTable

    • ProductCategoryRow
    • ProductRow

Bước 2. Xây dựng phiên bản tĩnh trong React

Xem Bút Suy Nghĩ Trong React. Bước 2 trên CodePen

Bây giờ bạn đã có hệ thống phân cấp thành phần của mình, đã đến lúc triển khai ứng dụng của bạn. Cách dễ nhất là xây dựng một phiên bản lấy mô hình dữ liệu của bạn và hiển thị giao diện người dùng nhưng không có tính tương tác. Tốt nhất là tách riêng các quy trình này vì việc xây dựng một phiên bản tĩnh cần phải gõ nhiều và không cần suy nghĩ, đồng thời việc thêm tính tương tác cần phải suy nghĩ nhiều chứ không phải gõ nhiều. Chúng ta sẽ thấy tại sao

Để xây dựng một phiên bản tĩnh của ứng dụng để hiển thị mô hình dữ liệu của bạn, bạn sẽ muốn xây dựng các thành phần sử dụng lại các thành phần khác và truyền dữ liệu bằng cách sử dụng các đạo cụ. đạo cụ là một cách truyền dữ liệu từ cha mẹ sang con. Nếu bạn đã quen với khái niệm trạng thái, thì hoàn toàn không sử dụng trạng thái để xây dựng phiên bản tĩnh này. Trạng thái chỉ dành riêng cho tính tương tác, nghĩa là dữ liệu thay đổi theo thời gian. Vì đây là phiên bản tĩnh của ứng dụng nên bạn không cần

Bạn có thể xây dựng từ trên xuống hoặc từ dưới lên. Nghĩa là, bạn có thể bắt đầu với việc xây dựng các thành phần cao hơn trong hệ thống phân cấp (i. e. bắt đầu bằng FilterableProductTable) hoặc với những cái thấp hơn trong đó (ProductRow). Trong các ví dụ đơn giản hơn, việc đi từ trên xuống thường dễ dàng hơn và đối với các dự án lớn hơn, việc đi từ dưới lên và viết các bài kiểm tra khi bạn xây dựng sẽ dễ dàng hơn

Ở cuối bước này, bạn sẽ có một thư viện gồm các thành phần có thể tái sử dụng để hiển thị mô hình dữ liệu của bạn. Các thành phần sẽ chỉ có các phương thức FilterableProductTable7 vì đây là phiên bản tĩnh của ứng dụng của bạn. Thành phần ở trên cùng của hệ thống phân cấp (_______1_______) sẽ lấy mô hình dữ liệu của bạn làm chỗ dựa. Nếu bạn thực hiện thay đổi đối với mô hình dữ liệu cơ bản của mình và gọi lại FilterableProductTable9, thì giao diện người dùng sẽ được cập nhật. Bạn có thể xem giao diện người dùng của mình được cập nhật như thế nào và nơi thực hiện các thay đổi. Luồng dữ liệu một chiều của React (còn gọi là liên kết một chiều) giúp mọi thứ luôn ở dạng mô đun và nhanh chóng

Tham khảo tài liệu React nếu bạn cần trợ giúp thực hiện bước này

Đoạn giới thiệu ngắn. Props vs State

Có hai loại dữ liệu “mô hình” trong React. đạo cụ và trạng thái. Điều quan trọng là phải hiểu sự khác biệt giữa hai điều này; . Xem thêm

Bước 3. Xác định Đại diện tối thiểu (nhưng đầy đủ) của trạng thái giao diện người dùng

Để làm cho giao diện người dùng của bạn có tính tương tác, bạn cần có khả năng kích hoạt các thay đổi đối với mô hình dữ liệu cơ bản của mình. React đạt được điều này với trạng thái

Để xây dựng ứng dụng của bạn một cách chính xác, trước tiên bạn cần nghĩ đến tập hợp tối thiểu trạng thái có thể thay đổi mà ứng dụng của bạn cần. Chìa khóa ở đây là KHÔ. Đừng lặp lại chính mình. Tìm ra biểu diễn tối thiểu tuyệt đối về trạng thái mà ứng dụng của bạn cần và tính toán mọi thứ khác mà bạn cần theo yêu cầu. Ví dụ: nếu bạn đang tạo danh sách CẦN LÀM, hãy giữ một mảng các mục CẦN LÀM xung quanh; . Thay vào đó, khi bạn muốn hiển thị số lượng TODO, hãy lấy độ dài của mảng mục TODO

Hãy nghĩ về tất cả các phần dữ liệu trong ứng dụng ví dụ của chúng tôi. Chúng ta có

• Danh sách ban đầu của sản phẩm
• Văn bản tìm kiếm người dùng đã nhập
• Giá trị của hộp kiểm
• Danh sách sản phẩm đã lọc

Hãy đi qua từng cái và tìm ra cái nào là trạng thái. Đặt ba câu hỏi về mỗi phần dữ liệu

1. Nó có được truyền từ cha mẹ thông qua đạo cụ không?
2. Nó không thay đổi theo thời gian?
3. Bạn có thể tính toán nó dựa trên bất kỳ trạng thái hoặc đạo cụ nào khác trong thành phần của mình không?

Danh sách sản phẩm ban đầu được chuyển vào dưới dạng đạo cụ, vì vậy đó không phải là trạng thái. Văn bản tìm kiếm và hộp kiểm dường như ở trạng thái vì chúng thay đổi theo thời gian và không thể tính toán được từ bất kỳ thứ gì. Và cuối cùng, danh sách các sản phẩm được lọc không ở trạng thái vì nó có thể được tính bằng cách kết hợp danh sách sản phẩm ban đầu với văn bản tìm kiếm và giá trị của hộp kiểm

Vì vậy, cuối cùng, trạng thái của chúng tôi là

• Văn bản tìm kiếm người dùng đã nhập
• Giá trị của hộp kiểm

Bước 4. Xác định nơi tiểu bang của bạn nên sống

Xem Bút Suy Nghĩ Trong React. Bước 4 trên CodePen

OK, vậy là chúng ta đã xác định được tập hợp tối thiểu của trạng thái ứng dụng là gì. Tiếp theo, chúng ta cần xác định thành phần nào biến đổi hoặc sở hữu trạng thái này

Nhớ. React là tất cả về luồng dữ liệu một chiều xuống hệ thống phân cấp thành phần. Có thể không rõ ràng ngay lập tức thành phần nào sẽ sở hữu trạng thái nào. Đây thường là phần khó hiểu nhất đối với người mới, vì vậy hãy làm theo các bước sau để hiểu

Đối với mỗi phần trạng thái trong ứng dụng của bạn

• Xác định mọi thành phần hiển thị thứ gì đó dựa trên trạng thái đó
• Tìm một thành phần sở hữu chung (một thành phần duy nhất trên tất cả các thành phần cần trạng thái trong cấu trúc phân cấp)
• Chủ sở hữu chung hoặc thành phần khác cao hơn trong hệ thống phân cấp sẽ sở hữu trạng thái
• Nếu bạn không thể tìm thấy thành phần nào hợp lý để sở hữu trạng thái, hãy tạo một thành phần mới chỉ để giữ trạng thái và thêm nó vào đâu đó trong hệ thống phân cấp phía trên thành phần sở hữu chung

Hãy chạy qua chiến lược này cho ứng dụng của chúng tôi

• ProductTable cần lọc danh sách sản phẩm dựa trên trạng thái và SearchBar cần hiển thị văn bản tìm kiếm và trạng thái đã chọn
• Thành phần sở hữu chung là FilterableProductTable
• Về mặt khái niệm, văn bản bộ lọc và giá trị được kiểm tra tồn tại trong FilterableProductTable là hợp lý

Thật tuyệt, vì vậy chúng tôi đã quyết định rằng tiểu bang của chúng tôi sống ở FilterableProductTable. Trước tiên, hãy thêm một thuộc tính thể hiện SearchBar5 vào SearchBar7 của FilterableProductTable để phản ánh trạng thái ban đầu của ứng dụng của bạn. Sau đó, chuyển SearchBar8 và SearchBar9 cho ProductTable và SearchBar làm chỗ dựa. Cuối cùng, sử dụng các đạo cụ này để lọc các hàng trong ProductTable và đặt giá trị của các trường biểu mẫu trong SearchBar

Bạn có thể bắt đầu xem ứng dụng của mình sẽ hoạt động như thế nào. đặt SearchBar8 thành ProductTable5 và làm mới ứng dụng của bạn. Bạn sẽ thấy bảng dữ liệu được cập nhật chính xác

Bước 5. Thêm luồng dữ liệu nghịch đảo

Xem Bút Suy Nghĩ Trong React. Bước 5 trên CodePen

Cho đến nay, chúng tôi đã xây dựng một ứng dụng hiển thị chính xác dưới dạng chức năng của các đạo cụ và trạng thái chảy xuống hệ thống phân cấp. Bây giờ là lúc để hỗ trợ dữ liệu chảy theo cách khác. các thành phần biểu mẫu ở sâu trong hệ thống phân cấp cần cập nhật trạng thái trong FilterableProductTable

React làm cho luồng dữ liệu này trở nên rõ ràng để giúp bạn hiểu chương trình của mình hoạt động như thế nào, nhưng nó yêu cầu gõ nhiều hơn một chút so với liên kết dữ liệu hai chiều truyền thống

Nếu bạn cố nhập hoặc chọn hộp trong phiên bản trước của ví dụ (bước 4), bạn sẽ thấy rằng React bỏ qua thông tin đầu vào của bạn. Điều này là có chủ ý, vì chúng tôi đã đặt giá trị chỗ dựa ProductTable7 của ProductTable8 luôn bằng với giá trị ProductTable9 được chuyển vào từ FilterableProductTable

Hãy nghĩ về những gì chúng ta muốn xảy ra. Chúng tôi muốn đảm bảo rằng bất cứ khi nào người dùng thay đổi biểu mẫu, chúng tôi sẽ cập nhật trạng thái để phản ánh đầu vào của người dùng. Vì các thành phần chỉ nên cập nhật trạng thái của chính chúng, nên FilterableProductTable sẽ chuyển các cuộc gọi lại tới SearchBar sẽ kích hoạt bất cứ khi nào trạng thái cần được cập nhật. Chúng ta có thể sử dụng sự kiện ProductCategoryRow3 trên các đầu vào để được thông báo về sự kiện đó. Các cuộc gọi lại được thông qua bởi FilterableProductTable sẽ gọi ProductCategoryRow5 và ứng dụng sẽ được cập nhật

Và Đó Là Nó

Hy vọng rằng điều này mang đến cho bạn ý tưởng về cách nghĩ về việc xây dựng các thành phần và ứng dụng bằng React. Mặc dù nó có thể khiến bạn phải gõ nhiều hơn một chút so với trước đây, nhưng hãy nhớ rằng mã được đọc thường xuyên hơn nhiều so với mã được viết và việc đọc mã mô-đun, rõ ràng này sẽ dễ dàng hơn. Khi bạn bắt đầu xây dựng các thư viện thành phần lớn, bạn sẽ đánh giá cao tính rõ ràng và tính mô đun này, đồng thời với việc sử dụng lại mã, các dòng mã của bạn sẽ bắt đầu thu gọn lại. . )