These docs are old & won’t be updated. Go khổng lồ react.dev for the new React docs.

Bạn đang xem: Trình bày một số cách tối ưu khi dùng reactjs

The updated Thinking in React guide teaches modern React and includes live examples.


Theo chủ ý cá nhân, React là cách rất tốt để xây đắp những ứng dụng Web mập một biện pháp nhanh chóng. Nó được sử dụng rộng rãi cho Facebook với Instagram.

Một một trong những điểm tuyệt vời của React là nó giúp cho bạn phát triển lối tư duy về kiểu cách xây dựng những ứng dụng. Trong tư liệu này, cửa hàng chúng tôi sẽ lí giải bạn quá trình xây dựng một bảng dữ liệu tìm kiếm sản phẩm bằng React.

Bắt đầu cùng với Mock

Tưởng tượng rằng chúng ta có một JSON API cùng một phiên bản mock từ người thiết kế. Bạn dạng mock trông như sau:

*

Dữ liệu trả về tự JSON API như sau:


< 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: "i
Pod Touch", category: "Electronics", price: "$399.99", stocked: false, name: "i
Phone 5", category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7">;

Bước 1: chia giao diện người dùng thành những component

Điều thứ nhất cần làm cho là khoanh tròn với đặt tên cho toàn bộ các component (và cả component con) trong bản mock. Bàn bạc với bạn thiết kế, họ có thể đã đặt tên đến chúng. Tên của các layer trong phiên bản vẽ photoshop rất có thể thành tên các react component của bạn!

Nhưng làm nắm nào nhằm chia nhỏ tuổi giao diện thành phần nhiều component? Hãy thực hiện những kỹ thuật khi quyết định nên cachseo.comết thêm một hàm hay tạo thành một object mới. Một trong những kỹ thuật đó là nguyên tắc đơn nhiệm

Vì quy mô dữ liệu hay hiển thị bên dưới dạng chuỗi JSON, ví như mô hình của doanh nghiệp được triển khai đúng, giao diện người dùng (và bởi vì thế kết cấu component) sẽ trọn vẹn tương thích. Đó là bởi vì giao diện người tiêu dùng và mô hình dữ liệu thường sẽ có xu hướng tuân thủ cùng một giao diện thông tin con kiến trúc, gồm nghĩa rằng các bạn sẽ không cần dành nhiều thời gian cho vấn đề chia nhỏ dại giao diện bạn dùng. Mỗi component đã tượng trưng cho một trong những phần mô hình dữ liệu.

*

Trong vận dụng dưới đây, các bạn sẽ thấy bọn họ có 5 component, tài liệu mà mỗi component hiển thị sẽ được in nghiêng

Filterable
Product
Table (orange):
chứa toàn cục cả ứng dụngSearch
Bar (blue):
nơi người dùng nhập từ khóa tìm kiếmProduct
Table (green):
lọc với hiển thị kết quả dựa trên từ khoá search kiếmProduct
Category
Row (turquoise):
hiển thị trương mục theo thể loạiProduct
Row (red):
hiển thị sản phẩm theo từng dòng

Nếu chú ý vào Product
Table, bạn sẽ thấy rằng title cuả bảng (bao tất cả những title như “Name” và “Price”) ko được chia nhỏ tuổi thành các component. Đây là một trong những tuỳ chọn mang tính chất cá nhân, đã bao hàm cuộc luận bàn về vụ cachseo.comệc này. Vào ví dụ, bọn họ để nó như là một phần của Product
Table cũng chính vì nó là một trong những phần khi hiển thị bảng dữ liệu trực thuộc về Product
Table. Tuy nhiên, trường hợp như phần tiêu đề trở nên phức hợp (ví dụ nếu chúng ta thêm tính năng sắp xếp phân loại), thì tất yếu sẽ hơp lí hơn khi gồm component Product
Table
Header dồn phần tiêu đề.

Bây tiếng khi xác định các component trong bạn dạng mock, hãy bố trí nó theo một hệ thống phân chia cấp cho bậc. Hồ hết component thuộc nằm bên trong một component trong bạn dạng mock thì nó yêu cầu là component con trong khối hệ thống cấp bậc:

Filterable
Product
Table

Search
Bar

Product
Table

Product
Category
Row
Product
Row

Bước 2: desgin một bản tĩnh trong React

Xem Pen tư duy trong React: bước 2 bên trên Code
Pen.

Bây giờ bạn đã có hệ thống cấp độ cho component của bạn, đã đến khi hoàn thiện ứng dụng. Cách dễ dàng nhất là tạo một phiên bạn dạng để hiển thị quy mô dữ liệu và giao diện fan dùng của người tiêu dùng mà không liên can với nhau. Đây là cách tốt nhất có thể để phân chia những tiến trình này cũng chính vì xây dựng một phiên phiên bản tĩnh yêu cầu rất nhiều công sức để tấn công máy thủ công mà không nên suy nghĩ. Mà lại khi thêm tác dụng tương tác thì này lại yêu mong ra theo hướng ngược lại, bọn họ sẽ coi xét tại sao lại như vậy.

Để gây ra một phiên bạn dạng tĩnh của áp dụng để hiển thị mô hình dữ liệu, bạn nên tạo thành các component tái sử dụng và truyền tài liệu vào bằng props. props là phương pháp để truyền tài liệu từ component thân phụ sang component con. Nếu như khách hàng đã có tác dụng quen với quan niệm của state, đừng sử dụng state để chế tạo một phiên bản tĩnh. State được sử dụng trong ngôi trường hợp phải tương tác, lúc dữ liệu biến hóa theo thời gian. Bởi vì đây là phiên bạn dạng tĩnh của ứng dụng nên các bạn sẽ không buộc phải nó.

Bạn rất có thể tạo ra theo chiều từ trên xuống bên dưới hoặc ngược lại. Điều đó bao gồm nghĩa, chúng ta cũng có thể bắt đầu với hầu hết component ở phía bên trên của hệ thống phân chia level (ví dụ ban đầu với Filterable
Product
Table) hoặc với hầu hết component bé của nó (Product
Row). Trong những ví dụ đối chọi giản, hay thì nó sẽ theo chiều từ bên trên xuống dưới, và giữa những dự án lớn thường sẽ thuận tiện hơn nếu làm theo hướng trái lại và song song là cachseo.comết chạy thử cho nó.

Sau khi kết thúc, bạn sẽ có đầy đủ thư cachseo.comện có thể tái áp dụng để hiển thị mô hình dữ liệu. Hầu như component sẽ chỉ tất cả hàm render() vì đó là phiên phiên bản tĩnh. Component ở phía bên trên của hệ thống phân chia cấp độ (Filterable
Product
Table) vẫn nhận kiểu tài liệu bằng prop. Nếu tài liệu được biến đổi và hàm root.render() được điện thoại tư vấn lại, thì giao diện người tiêu dùng sẽ được cập nhật. Điều này để giúp đỡ cho ta phát âm làm chũm nào giao diện người tiêu dùng được cập nhật dễ dàng rộng và tài liệu bị chuyển đổi ở đâu chính vì nó không trở nên phức tạp hoá. React luồng tài liệu một chiều (hay nói một cách khác ràng buộc một chiều) giữ cho các thứ được phân chia theo module và cấp tốc gọn.

Tham khảo tài liệu React nếu như khách hàng cần giúp sức để tiến hành bước này.

Xem React docs nếu bạn cần hỗ trợ ở bước này.

Bước 3: xác minh các trạng thái trả chỉnh nhỏ nhất của giao diện người dùng

Để làm cho giao diện người tiêu dùng tương tác, bạn cần có khả năng để kích hoạt những thay đổi đối với quy mô dữ liệu cơ bản. React làm điều đó một cách dễ dàng bằng state.

Để gây ra ứng dụng của người tiêu dùng một cách chuẩn chỉnh xác, thứ nhất cần cân nhắc về một tập hợp buổi tối thiểu những state bao gồm khả năng thay đổi trong ứng dựng. Hết sức quan trọng là DRY: Không lập lại xác minh tập thích hợp này và đo lường những yêu ước khác. Ví dụ, bạn tạo thành một list TODO, không nên dùng state để đếm bộ phận của mảng TODO. Chũm vào đó khi in ra con số TODO, chỉ cần tính độ dài của mảng TODO.

Suy tính về những thành phần tài liệu trong lấy ví dụ như ứng dựng, nó bao gồm:

Danh sách gốc các sản phẩm
Từ khoá tìm kiếm kiếm trường đoản cú phía tín đồ dùng
Giá trị của checkbox
Danh sách thành phầm sau lúc phân loại

Hãy cùng tò mò xem thành phần như thế nào là trạng thái bằng cách đặt ra 3 câu hổi cho mỗi phần:

Có cần nó được truyền tự component phụ thân qua props không? Nếu bao gồm thì nó hoàn toàn có thể không đề nghị là state.Dữ liệu có biến đổi không? nếu không thì nó chưa hẳn là state.Bạn rất có thể tính toán nó từ các state xuất xắc props không giống trong component cuả các bạn không? nếu bao gồm thì nó chưa phải là state.

Danh sách nơi bắt đầu của thành phầm được truyền vào thông qua props, vậy nó không phải state. Keyword tìm kiếm cùng checkbox dường như là state bởi vì chúng vẫn bị biến hóa và không thể tính toán dựa trên phần còn lại. Cuối cùng, danh sách phân loại sản phẩm không đề nghị là state cũng chính vì nó rất có thể được search ra phụ thuộc vào danh sách gốc với keyword tìm kiếm và cực hiếm của checkbox.

Cuối cùng, state của họ là:

Từ khoá search kiếm người tiêu dùng nhập vào
Giá trị của checkbox

Bước 4: khẳng định state của chúng ta ở đâu

Xem ví dụ như Pen tứ duy vào React: bước 4 on Code
Pen.

Chúng ta đã xác định được tập hợp tối thiểu các state của ứng dụng . Tiếp theo bọn họ cần quan tâm đến component làm sao sẽ nạm đổi, hoặc sở hữu, state này.

Lưu ý: React truyền tài liệu một chiều xuống trong hệ thống phân chia cấp độ component. Nó hoàn toàn có thể không rõ ràng ngay chớp nhoáng rằng component nào nên có state của riêng biệt nó. Đây thường là phần thử thách nhất cho những người mới bước đầu để hiểu, hãy theo thứ tự sau để search hiểu:

Cho từng phần của state trong áp dụng của bạn:

Xác định tất cả các component đã hiển thị dựa vào state.Tìm ra một component thân phụ ( component nghỉ ngơi phía trên những component buộc phải state sinh hoạt trong hệ thống phân chia cấp cho bậc).Hoặc là component phụ thân hay component khác ở phía bên trên nên duy trì state.¨Nếu chúng ta không thể tìm ra component hòa hợp lí, thì hãy tạo nên một component mới sở hữu state và thêm nó vào vào hệ thông phân chia cấp bậc ở phía trên component cha.

Hãy cùng điểm lại kế hoạch cho vận dụng của chúng ta:

Product
Table cần lọc danh sách các sản phẩm dựa trên state với Search
Bar cần hiển thị keyword tìm kiếm và state đã có được lựa chọn.Component thân phụ là Filterable
Product
Table.Theo lí thuyết thì từ khoá tìm kiếm và cực hiếm lưạ chọn phải nằm vào Filterable
Product
Table.

Vậy họ đã quyết định rằng state của bọn họ sẽ phía bên trong Filterable
Product
Table. Đầu tiên, thêm một nằm trong tính của instance this.state = filter
Text: "", in
Stock
Only: false vào hàm khởi sinh sản của Filterable
Product
Table nhằm khai báo trạng thái ban sơ của ứng dụng. Sau đó, truyền những tham số filter
Text với in
Stock
Only tới Product
Table với Search
Bar như là một trong prop. Cuối cùng, áp dụng những props này để lọc đa số hàng sống trong Product
Table cùng gán rất nhiều giá trị vào các trường của khung trong Search
Bar.

Bạn tất cả thể bắt đầu thấy vận dụng của bạn hoạt động ra sao: gán "ball" vào filter
Text cùng refresh lại ứng dụng. Bạn sẽ thấy rằng những dữ liệu của bảng được update chính xác.

Bước 5: update dữ liệu theo chiều trái lại

Xem Pen tứ duy trong React: bước 5 trên Code
Pen.

Cho đến giờ, bọn họ đã gây ra một ứng dụng để hiển thị đúng chuẩn các giá trị của props cùng state từ bên trên xuống dưới trong hệ thống phân chia cấp cho bậc. Tiếng là lúc để làm cho luồng dữ liệu có thể vận chuyển theo hướng ngược lại: số đông component form ở phía dưới cần update trạng thái mang lại Filterable
Product
Table.

React tạo cho luồng dữ liệu trở nên rõ ràng và dễ dàng nắm bắt hơn chương trình của bạn vận động ra sao, dẫu vậy nó cũng yêu mong gõ nhiều hơn nữa so với phong cách binding dữ liệu hai chiều truyền thống.

Nếu bạn thử gõ hoặc chọn lựa giá trị vào ví dụ hiện nay thời, bạn sẽ thấy rằng React bỏ qua mất những giá trị nguồn vào này. Điều này sảy ra bao gồm chủ ý, vì bọn họ gán value prop của input luôn luôn luôn bằng với state truyền từ bỏ Filterable
Product
Table.

Hãy suy nghĩ xem bọn họ muốn tiến hành điều gì. Chúng ta muốn chắc chắn rằng rằng bao giờ người dùng chuyển đổi form, bọn họ cập nhật state dựa trên dữ liệu đầu vào. Vì những component chỉ nên cập nhật state cuả chúng, Filterable
Product
Table đã truyền vào callbacks tới Search
Bar để kích hoạt mỗi một khi dữ liệu cần cập nhật. Chúng ta cũng có thể sử dụng sự kiện on
Change trong input đầu vào để nhận thấy thông báo. Callbacks truyền xuống do Filterable
Product
Table sẽ điện thoại tư vấn hàm set
State(), và ứng dụng sẽ được cập nhật.

Mặc cho dù nó nghe phức tạp, cơ mà thật ra chỉ cachseo.comệc vài dòng lệnh. Cùng nó chỉ ra rất rõ ràng luồng dữ liệu được truyền đi trong ứng dụng như thế nào.

Và chấm dứt

Hy vọng rằng nó sẽ cho bạn một ý tưởng phát minh về biện pháp tư duy khi tạo thành những component và ứng dụng với React. Trong lúc nó yêu thương cầu đề xuất gõ nhiều hơn bạn từng làm, dẫu vậy code này rất rõ ràng và dễ đọc. Khi bạn ban đầu xây dựng các thư cachseo.comện component lớn, bạn sẽ thấy sự có ích khi đọc phần đông code module hoá với rõ ràng, thêm nữa số lượng code sẽ giảm sút khi code được tái sử dụng .

These docs are old & won’t be updated. Go to lớn react.dev for the new React docs.

These new documentation pages teach modern React:


Về thực chất bên trong, React sử dụng một số kỹ thuật logic để sút thiểu tối đa những tác động tới DOM một phương pháp không cần thiết để cập nhật UI (Giao diện fan dùng). Đối với nhiều ứng dụng, cachseo.comệc thực hiện React sẽ giúp đỡ UI hiển thị cấp tốc mà không nhất thiết phải thực hiện nhiều các bước để tối ưu hóa hiệu suất một cách cụ thể. Tuy nhiên, có một số cách để bạn có thể tăng tốc vận dụng React của mình.

Sử dụng bản Production Build

Nếu ai đang đo điểm chuẩn chỉnh hoặc gặp sự thế về hiệu suất trong những ứng dụng React của mình, hãy bảo vệ rằng ai đang thử nghiệm với bạn dạng minified production build.

Xem thêm: Hướng dẫn cách khắc phục lỗi excel found unreadable content là lỗi gì

Theo khoác định, React sẽ bao gồm nhiều chú ý hữu ích. Những chú ý này rất hữu ích trong quá trình development. Tuy nhiên, chúng tạo cho React to hơn và chậm chạp hơn, vị vậy các bạn nên chắc chắn rằng rằng tôi đã sử dụng phiên bản production lúc deploy ứng dụng.

Nếu các bạn không có thể liệu quá trình build của bản thân mình có được thiết lập chính xác xuất xắc không, bạn cũng có thể kiểm tra bằng phương pháp cài đặt React Developer Tools for Chrome. Nếu khách hàng truy cập một trang web có áp dụng React ở cơ chế production, biểu tượng sẽ có nền tối:

*

Nếu bạn truy cập một trang web có React ở chính sách development, biểu tượng này sẽ sở hữu nền màu đỏ:

*

Bạn bắt buộc sử dụng chính sách development khi thao tác làm cachseo.comệc trên ứng dụng của bản thân và chế độ production lúc deploying áp dụng của bạn cho người dùng sử dụng.

Bạn hoàn toàn có thể tìm thấy chỉ dẫn build ứng dụng của bản thân mình cho production bên dưới.

Create React phầm mềm

Nếu dự án của người sử dụng đã được build bởi Create React App, hãy chạy:


npm run build
Điều này sẽ tạo ra một bạn dạng production đến ứng dụng của người sử dụng trong folder build/ của dự án công trình của bạn.

Hãy lưu giữ rằng điều đó chỉ quan trọng trước khi deploy lên production. Để development bình thường, hãy áp dụng npm start.

Single-File Builds

Chúng tôi cung ứng các phiên bản production-ready của React cùng React DOM dưới dạng những single file:


script src="https://unpkg.com/react
18/umd/react.production.min.js">script>script src="https://unpkg.com/react-dom
18/umd/react-dom.production.min.js">script>
Hãy nhớ là chỉ các file React kết thúc bằng .production.min.js mới phù hợp cho production.

Brunch

Để có bạn dạng Brunch production build tác dụng nhất, hãy thiết lập thêm plugin terser-brunch:


# If you use npmnpm install --save-dev terser-brunch# If you use Yarnyarn showroom --dev terser-brunch
Sau đó, để sản xuất một bản production build, hãy flag (cờ) -p vào command (lệnh) build như mặt dưới:


brunch build -p
Hãy đừng quên bạn chỉ cần làm điều này cho các phiên bản production build. Bạn tránh cachseo.comệc dùng flag -p hoặc áp dụng plugin này trong quy trình development, bởi vì nó sẽ ẩn những cảnh báo React hữu dụng và có tác dụng cho quá trình xây dựng và cách tân và phát triển chậm đi nhiều.

Browserify

Để có phiên bản Browserify production build hiệu quả nhất, hãy thiết lập một số plugin sau:


# If you use npmnpm install --save-dev encachseo.comfy terser uglifyify# If you use Yarnyarn showroom --dev encachseo.comfy terser uglifyify
Để tạo bạn dạng production build, hãy đảm bảo an toàn rằng các bạn thêm các chuyển đổi này (the order matters):

Ví dụ:


browserify ./index.js -g < encachseo.comfy --NODE_ENV production > -g uglifyify | terser --compress --mangle > ./bundle.js
Hãy đừng quên bạn chỉ cần làm vấn đề đó cho các bạn dạng production build. Bạn tránh cachseo.comệc áp dụng các plugin này trong quá trình development vị chúng vẫn ẩn các cảnh báo React bổ ích và có tác dụng cho quy trình xây dựng và phát triển chậm đi nhiều.

Rollup

Để có bản Rollup production build kết quả nhất, hãy cài đặt một số plugin:


# If you use npmnpm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser# If you use Yarnyarn địa chỉ --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser
Để tạo bản production build, hãy bảo đảm rằng bạn thêm những plugin này (the order matters):


plugins: < // ... Require("rollup-plugin-replace")( "process.env.NODE_ENV": JSON.stringify("production") ), require("rollup-plugin-commonjs")(), require("rollup-plugin-terser")(), // ...>
Để biết lấy ví dụ về cách tùy chỉnh hoàn chỉnh, hãy xem gist này

Hãy hãy nhớ là bạn chỉ cần làm điều đó cho các bạn dạng production build. Bạn không nên áp dụng plugin terser hoặc plugin replace cùng với value "production" trong quá trình development do chúng đang ẩn những cảnh báo React hữu dụng và có tác dụng cho quá trình xây dựng và cải cách và phát triển chậm đi nhiều.

webpack

Ghi chú:

Nếu bạn đang sử dụng Create React App, vui lòng làm theo hướng dẫn sống trên. Phần này chỉ có cần thiết nếu bạn định cấu hình webpack trực tiếp.

Webpack v4 + đã minify code của khách hàng một giải pháp mặc định ở chế độ production.


const Terser
Plugin = require("terser-webpack-plugin");module.exports = mode: "production", optimization: minimizer: Plugin( /* additional options here */ )>, ,;
Bạn gồm thể tham khảo thêm về vấn đề đó trong webpack documentation.

Hãy nhớ là bạn chỉ cachseo.comệc làm vấn đề đó cho các bản production build. Các bạn không nên áp dụng Terser
Plugin trong quy trình development bởi nó vẫn ẩn các cảnh báo React có lợi và làm cho quy trình xây dựng và cải tiến và phát triển chậm đi nhiều.

Profiling Components with the Dev
Tools Profiler

react-dom 16.5+ và react-native 0.57+ hỗ trợ khả năng tạo thành profiling capabilities trong chính sách DEV cùng với React Dev
Tools Profiler.Để gọi tổng quan hơn về Profiler, bạn cũng có thể đọc và tìm hiểu trong blog post này “Introducing the React Profiler”.Và một cachseo.comdeo clip hướng dẫn về profiler đã và đang có sẵn sống trên You
Tube.

Nếu bạn chưa cài đặt React Dev
Tools, chúng ta có thể tìm thấy bọn chúng tại đây:

Ghi chú

Một gói production profiling của react-dom cũng có thể có sẵn bên dưới dạng react-dom/profiling.Đọc thêm về cách sử dụng gói này tại fb.me/react-profiling

Ghi chú

Trước phiên phiên bản React 17, cửa hàng chúng tôi sử dụng User Timing API để cấu hình các component cùng với chrome performance tab.Để được phía dẫn cụ thể hơn, hãy xem bài cachseo.comết này của Ben Schwarz.

cachseo.comrtualize Long Lists

Nếu ứng dụng của chúng ta render (hiển thị) danh sách các dữ liệu dài và những (hàng trăm hoặc hàng trăm ngàn hàng), chúng tôi khuyên bạn nên thực hiện kỹ thuật được gọi là “windowing”. Kỹ thuật này chỉ hiển thị một tập hợp những hàng dữ liệu cần thiết trong từng thời gian và nó sẽ giúp đỡ giảm đáng kể thời hạn hiển thị lại những component tương tự như số lượng những DOM node được tạo.

react-window và react-cachseo.comrtualized là những thư cachseo.comện windowing phổ biến. Chúng hỗ trợ một số component có thể tái thực hiện để hiển thị bên dưới dạng danh sách, lưới và tài liệu dạng bảng. Bạn có thể tạo windowing component của riêng biệt mình, hệt như Twitter sẽ làm, nếu bạn muốn thứ gì đó cân xứng hơn cùng với từng trường hợp ví dụ trong ứng dụng của bạn.

Avoid Reconciliation

React thi công và gia hạn internal representation nhằm rendered UI. Nó bao hàm các React element mà các bạn trả về từ những component. Cách màn biểu diễn này có thể chấp nhận được React tránh cachseo.comệc tạo những DOM node và truy cập các node hiện bao gồm vượt quá mức cần thiết cần thiết, vày điều đó hoàn toàn có thể chậm hơn những operation trên những Java
Script object. Đôi khi nó được điện thoại tư vấn là “DOM ảo”, biện pháp nó vận động tương từ bỏ như cách chuyển động trên React Native.

Khi những prop hoặc state của một component nỗ lực đổi, React đang xem xét đưa ra quyết định liệu bản cập nhật DOM có thực sự cần thiết hay không hoặc không bằng cách so sánh các thành phần mới được trả về với các bộ phận đã được hiển thị trước đó. Lúc chúng rất khác nhau, React sẽ update lại DOM.

Mặc dù React chỉ cập nhật các DOM node đã thế đổi, thì cachseo.comệc re-rendering (hiển thị lại) vẫn vẫn mất một khoảng chừng thời gian. Tuy nhiên trong các trường hợp, đó chưa phải là vấn đề, nhưng nếu cachseo.comệc bị trễ đi này thực sự đáng chú ý, chúng ta cũng có thể xem xét tăng tốc độ chúng bằng cách ghi đè với lifecycle function should
Component
Update, nó được kích hoạt trước khi quy trình re-rendering bắt đầu. cachseo.comệc xúc tiến của hàm này mang định vẫn trả về true, nhằm mục tiêu để báo mang đến React triển khai cachseo.comệc cập nhật:


Nếu chúng ta biết có lẽ trong một vài trường hợp, component của bạn không phải cập nhật, chúng ta có thể trả về false tự should
Component
Update để quăng quật qua toàn thể quá trình render, bao hàm cả cachseo.comệc gọi render() bên trên component bây giờ và cả mặt dưới.

Trong phần đông các trường hợp, thay vì cachseo.comết should
Component
Update() bởi tay, bạn cũng có thể kế thừa từ React.Pure
Component. Nó tương tự với cachseo.comệc thực hiện should
Component
Update() vẫn shallow comparison giữa những prop với state bây giờ và trước đó.

should
Component
Update In action

Đây là một trong những subtree của những component. Đối với từng SCU sẽ báo mang lại should
Component
Update biết là trả về đồ vật gi và v
DOMEq cho thấy liệu các phần tử React được render có tương tự hay không. Cuối cùng, màu của vòng tròn sẽ cho thấy liệu component dành được reconciled giỏi không.

*

Vì should
Component
Update trả về false cho subtree khởi đầu từ C2, React đã không cố render C2 và do đó thậm chí chưa phải gọi mang lại should
Component
Update bên trên C4 cùng C5.

Đối với C1 và C3, should
Component
Update trả về true, bởi vì vậy React phải đi xuống các nhánh và đánh giá chúng. Đối cùng với C6 should
Component
Update trả về true với vì các element được render rất khác nhau bắt buộc React phải cập nhật lại DOM.

Trường hợp thú vị ở đầu cuối là C8. React cần render component này, nhưng bởi các thành phần React trả về bằng với các phần tử đã được render đó, cho nên nó không phải cập nhật lại DOM.

Lưu ý rằng React chỉ phải tiến hành các DOM mutation mang lại C6, điều này là tất yêu tránh khỏi. Đối với C8, nó đã đối chiếu các bộ phận React đã được render và so với subtree của C2 cùng C7, nó thậm chí không hẳn so sánh các thành phần trên should
Component
Update với render đang không được gọi.

Examples

Nếu phương pháp duy nhất nhằm component của bạn biến đổi là khi trở thành props.color hoặc state.count cố kỉnh đổi, chúng ta nên tiến hành kiểm tra should
Component
Update như bên dưới:


class Counter
Button extends React.Component constructor(props) super(props); this.state = count: 1; should
Component
Update(next
Props, next
State) if (this.props.color !== next
Props.color) return true; if (this.state.count !== next
State.count) return true; return false; render() return ( button color=this.props.color on
Click=() => this.set
State(state => (count: state.count + 1))> Count: this.state.count button> );
Trong đoạn mã này, should
Component
Update chỉ chất vấn xem có bất kỳ thay thay đổi nào vào props.color hoặc state.count hay không. Nếu đầy đủ giá trị đó không cố gắng đổi, component sẽ không cập nhật. Nếu như component của người tiêu dùng phức tạp hơn nữa, chúng ta cũng có thể sử dụng một quy mô tương trường đoản cú để triển khai “shallow comparison” (so sánh) giữa toàn bộ các props cùng state để xác minh xem component tất cả nên được cập nhật lại tuyệt không. Với mô hình phổ đổi mới này đủ nhằm React hỗ trợ một trình trợ giúp cho cachseo.comệc sử dụng xúc tích và ngắn gọn này - bằng cách chỉ cần thừa kế từ React.Pure
Component. Bởi vậy, đoạn code này là 1 cách đơn giản hơn để giành được điều tương tự:


class Counter
Button extends React.Pure
Component constructor(props) super(props); this.state = count: 1; render() return ( button color=this.props.color on
Click=() => this.set
State(state => (count: state.count + 1))> Count: this.state.count button> );
Hầu hết các trường hợp, chúng ta cũng có thể sử dụng React.Pure
Component thay vì buộc phải cachseo.comết should
Component
Update của riêng rẽ bạn. Nó chỉ thực hiện một shallow comparison, vì vậy bạn không thể thực hiện nó nếu những prop hoặc state rất có thể đã bị đổi khác theo giải pháp mà một phép shallow comparison sẽ rất có thể bỏ qua.

Đây rất có thể là một sự cachseo.comệc với các cấu trúc dữ liệu tinh cachseo.com hơn. Ví dụ: mang sử bạn có nhu cầu component List
Of
Words render danh sách các từ cùng được phân bóc tách bằng lốt phẩy, cùng với component Word
Adder parent được cho phép bạn click vào button nhằm thêm một tự vào danh sách. Đoạn code này vẫn không hoạt động chính xác:


class List
Of
Words extends React.Pure
Component render() return div>this.props.words.join(",")div>; class Word
Adder extends React.Component constructor(props) super(props); this.state = words: <"marklar"> ; this.handle
Click = this.handle
Click.bind(this); handle
Click() // This section is bad style & causes a bug const words = this.state.words; words.push("marklar"); this.set
State(words: words); render() return ( div> button on
Click=this.handle
Click /> List
Of
Words words=this.state.words /> div> );
Vấn đề là Pure
Component sẽ thực hiện một phép so sánh dễ dàng giữa những giá trị cũ và new của this.props.words. Vì chưng code này biến đổi array words vào method handle
Click của Word
Adder, các giá trị cũ và bắt đầu của this.props.words sẽ so sánh bằng nhau, mặc dù các word (từ) thực tiễn trong array đang được nạm đổi. Bởi đó, List
Of
Words đã không cập nhật mặc mặc dù nó có các từ mới rất cần phải render.

The power nguồn Of Not Mutating Data

Cách đơn giản dễ dàng nhất để tránh chạm chán vấn đề này là tránh biến đổi các quý giá mà nhiều người đang sử dụng như prop hoặc state. Ví dụ: method handle
Click ngơi nghỉ trên hoàn toàn có thể được cachseo.comết lại bằng phương pháp sử dụng concat như sau:


ES6 hỗ trợ một spread syntax có thể chấp nhận được các array có thể làm cachseo.comệc này một cách dễ dàng hơn. Nếu bạn đang thực hiện Create React App, thì cú pháp này đã có sẵn theo khoác định rồi.


Bạn cũng rất có thể cachseo.comết lại hồ hết đoạn code mutate object nhằm tránh mutation, theo một cách tương tự. Ví dụ: đưa sử họ có một object tên là colormap và chúng ta muốn cachseo.comết một function mang đến phép thay đổi colormap.right thành "blue". Chúng ta cũng có thể cachseo.comết:


Để cachseo.comết vấn đề này mà ko làm chuyển đổi object ban đầu, bạn cũng có thể sử dụng method Object.assign:


update
Color
Map bây chừ đã trả về một object mới, cầm cố vì biến hóa object cũ. Object.assign phía bên trong ES6 và yêu cầu một polyfill.

Object spread syntax giúp update các object tiện lợi hơn mà không phải thay đổi chúng:


Tính năng này đang được thêm vào Java
Script vào phiên bạn dạng ES2018

Nếu bạn đang sử dụng Create React App, thì cả Object.assign và object spread syntax mọi đã tất cả sẵn đi theo mặc định rồi.

Khi bạn xử lý các đối tượng người sử dụng lồng nhau cực kỳ sâu, thì cachseo.comệc update chúng theo cách immutable rất có thể khiến các bạn cảm thấy phức tạp. Nếu bạn gặp mặt sự cầm này, hãy xem Immer hoặc immutability-helper. Các thư cachseo.comện này cho phép bạn cachseo.comết code dễ dàng đọc nhưng không làm mất đi đi tác dụng của immutability.