GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 27/08/2020 | 00:00 GMT+7

Cách gỡ lỗi các thành phần React bằng các công cụ dành cho nhà phát triển React

Vì các ứng dụng React được tạo ra để mở rộng quy mô và phát triển nhanh chóng, nên rất dễ dàng để các lỗi tinh vi xâm nhập vào mã của bạn. Tiện ích mở rộng trình duyệt React Developer Tools có thể giúp bạn theo dõi những lỗi này bằng cách cung cấp cho bạn cái nhìn sâu sắc hơn về trạng thái hiện tại của từngthành phần . React Developer Tools cung cấp cho bạn một giao diện để khám phá cây thành phần React cùng với các đạo cụ , trạng thái và ngữ cảnh hiện tại cho các thành phần riêng lẻ. Công cụ dành cho nhà phát triển React cũng cho phép bạn xác định thành phần nào đang hiển thị lại và có thể tạo đồ thị để hiển thị thời gian các thành phần riêng lẻ cần hiển thị. Bạn có thể sử dụng thông tin này để theo dõi mã không hiệu quả hoặc để tối ưu hóa các thành phần chứa nhiều dữ liệu.

Hướng dẫn này bắt đầu bằng cách cài đặt tiện ích mở rộng trình duyệt React Developer Tools. Sau đó, bạn sẽ xây dựng một trình phân tích văn bản như một ứng dụng thử nghiệm, sẽ lấy một khối văn bản và hiển thị thông tin như số từ, số ký tự và cách sử dụng ký tự. Cuối cùng, bạn sẽ sử dụng Công cụ dành cho nhà phát triển React để khám phá các thành phần của trình phân tích văn bản và theo dõi các đạo cụ và ngữ cảnh thay đổi. Các ví dụ sẽ sử dụng trình duyệt Chrome , nhưng bạn cũng có thể sử dụng plugin cho Firefox .

Đến cuối hướng dẫn này, bạn có thể bắt đầu sử dụng Công cụ dành cho nhà phát triển React để gỡ lỗi và khám phá bất kỳ dự án React nào.

Yêu cầu

Bước 1 - Cài đặt Tiện ích mở rộng Công cụ dành cho nhà phát triển React

Trong bước này, bạn sẽ cài đặt tiện ích mở rộng trình duyệt React Developer Tools trong Chrome. Bạn sẽ sử dụng các công cụ dành cho nhà phát triển trong control panel JavaScript của Chrome để khám phá cây thành phần của dự án debug-tutorial mà bạn đã thực hiện trong Yêu cầu . Bước này sẽ sử dụng Chrome, nhưng các bước sẽ gần giống với việc cài đặt Công cụ nhà phát triển React dưới dạng tiện ích bổ sung trong Firefox.

Đến cuối bước này, bạn sẽ cài đặt Công cụ nhà phát triển React trong trình duyệt của bạn và bạn có thể khám phá và lọc các thành phần theo tên.

React Developer Tools là một plugin dành cho trình duyệt Chrome và Firefox. Khi bạn thêm tiện ích mở rộng, bạn đang thêm các công cụ bổ sung vào console dành cho nhà phát triển. Truy cập trang plugin Chrome dành cho Công cụ nhà phát triển React để cài đặt tiện ích mở rộng.

Nhấp vào nút Thêm vào Chrome . Sau đó nhấp vào nút Thêm tiện ích mở rộng để xác nhận:

Nút thêm tiện ích mở rộng của Chrome

Chrome sẽ cài đặt tiện ích mở rộng và một thông báo thành công và một biểu tượng mới sẽ xuất hiện ở góc trên bên phải của trình duyệt bên cạnh thanh địa chỉ:

Thông báo thành công của Chrome

Nếu biểu tượng không xuất hiện, bạn có thể thêm nó bằng cách nhấp vào mảnh ghép, sau đó nhấp vào biểu tượng đinh ghim bằng Công cụ nhà phát triển React:

Ghim phần mở rộng

Khi bạn ở trên một trang không có bất kỳ thành phần React nào, biểu tượng sẽ xuất hiện màu xám. Tuy nhiên, nếu bạn đang ở trên một trang có các thành phần React, biểu tượng sẽ xuất hiện màu xanh lam và xanh lục. Nếu bạn nhấp vào biểu tượng, nó sẽ cho biết rằng ứng dụng đang chạy version production của React.

Truy cập digitalocean.com , để biết rằng trang chủ đang chạy version production của React:

Thông tin về production phản ứng DigitalOcean

Đến đây bạn đang ở trên một trang web sử dụng React, hãy mở console để truy cập Công cụ dành cho nhà phát triển React. Mở console bằng cách nhấp chuột phải và kiểm tra một phần tử hoặc bằng cách mở thanh công cụ bằng cách nhấp vào Xem> Nhà phát triển> Control panel JavaScript .

Khi bạn mở giao diện điều khiển, bạn sẽ thấy hai tab mới: Linh kiện và Profiler:

Mở console

Tab Thành phần sẽ hiển thị cây thành phần React hiện tại, cùng với bất kỳ đạo cụ, trạng thái hoặc ngữ cảnh nào. Tab Profiler cho phép bạn ghi lại các tương tác và đo vẽ thành phần. Bạn sẽ khám phá những tab Profiler trong Bước 3 .

Bấm vào tab Thành phần để xem cây thành phần hiện tại.

Vì đây là bản dựng production , mã sẽ được rút gọn và các thành phần sẽ không có tên mô tả:

Các thành phần cho digitalocean.com trong console

Đến đây bạn đã dùng thử Công cụ dành cho nhà phát triển React trên một trang web đang hoạt động, bạn có thể sử dụng nó trên ứng dụng thử nghiệm của bạn . Nếu bạn chưa khởi động ứng dụng debug-tutorial của bạn , hãy chuyển đến cửa sổ terminal và chạy npm start từ folder root của dự án.

Mở trình duyệt tới http://localhost:3000 .

Lưu ý biểu tượng của React Developer Tools hiện có màu đỏ và trắng. Nếu bạn nhấp vào biểu tượng Công cụ nhà phát triển React, bạn sẽ thấy cảnh báo rằng trang đang ở chế độ phát triển.Vì bạn vẫn đang làm việc trên ứng dụng mẫu, điều này được mong đợi.

Mở console và bạn sẽ tìm thấy tên của Thành phần App trong tab Thành phần .

Thành phần cơ sở

Vẫn chưa có nhiều thông tin, nhưng khi bạn xây dựng dự án ở bước tiếp theo, bạn sẽ thấy tất cả các thành phần của bạn tạo thành một cây chuyển .

Trong bước này, bạn đã thêm tiện ích mở rộng React Developer Tools vào Chrome. Bạn đã kích hoạt các công cụ trên cả trang production và trang phát triển, đồng thời bạn đã khám phá nhanh dự án debug-tutorial của bạn trong tab Thành phần . Trong bước tiếp theo, bạn sẽ xây dựng trình phân tích văn bản mà bạn sẽ sử dụng để thử các tính năng của Công cụ dành cho nhà phát triển React.

Bước 2 - Xác định ngữ cảnh và đạo cụ thành phần thời gian thực

Trong bước này, bạn sẽ xây dựng một ứng dụng nhỏ để phân tích một khối văn bản. Ứng dụng sẽ xác định và báo cáo số từ, số ký tự và tần suất ký tự của văn bản trong trường nhập. Khi xây dựng ứng dụng, bạn sẽ sử dụng Công cụ dành cho nhà phát triển React để khám phá trạng thái hiện tại và các đạo cụ của từng thành phần. Bạn cũng sẽ sử dụng Công cụ dành cho nhà phát triển React để xem ngữ cảnh hiện tại trong các thành phần được lồng sâu vào nhau. Cuối cùng, bạn sẽ sử dụng các công cụ để xác định các thành phần hiển thị lại dưới dạng thay đổi trạng thái.

Khi kết thúc bước này, bạn có thể sử dụng Công cụ dành cho nhà phát triển React để khám phá một ứng dụng đang hoạt động và quan sát trạng thái và đạo cụ hiện tại mà không có câu lệnh console hoặc trình gỡ lỗi.

Để bắt đầu, bạn sẽ tạo một thành phần đầu vào sẽ chiếm một lượng lớn văn bản.

Mở file App.js :

  • nano src/components/App/App.js

Bên trong thành phần, thêm một div với một lớp wrapper , sau đó tạo phần tử <label> bao quanh phần tử <textarea> :

debug-tutorial / src / components / App / App.js
import React from 'react'; import './App.css';  function App() {   return(     <div className="wrapper">      <label htmlFor="text">        Add Your Text Here:        <br>        <textarea          id="text"          name="text"          rows="10"          cols="100"        >        </textarea>       </label>     </div>   ) }  export default App;

Đây sẽ là khu vực đầu vào cho user của bạn. Thuộc tính htmlFor liên kết phần tử label với các phần tử có id text bằng JSX . Bạn cũng cung cấp cho thành phần <textarea> 10 hàng và 100 cột để cung cấp chỗ cho một lượng lớn văn bản.

Lưu và đóng file . Tiếp theo, mở App.css :

  • nano src/components/App/App.css

Thêm một số kiểu cho ứng dụng bằng cách thay thế nội dung bằng những thứ sau:

debug-tutorial / src / components / App.App.css
.wrapper {     padding: 20px; }  .wrapper button {     background: none;     border: black solid 1px;     cursor: pointer;     margin-right: 10px; }  .wrapper div {     margin: 20px 0; }

Ở đây, bạn thêm một số phần đệm vào lớp wrapper , sau đó đơn giản hóa các phần tử <button> bằng cách loại bỏ màu nền và thêm một số lề. Cuối cùng, bạn thêm một lề nhỏ cho các phần tử <div> . Các kiểu này sẽ áp dụng cho các thành phần bạn sẽ xây dựng để hiển thị thông tin về văn bản.

Lưu các file . Khi bạn làm như vậy, trình duyệt sẽ làm mới và bạn sẽ thấy đầu vào:

Vùng văn bản

Mở App.js :

  • nano src/components/App/App.js

Tiếp theo, tạo ngữ cảnh để giữ giá trị từ phần tử <textarea> . Chụp dữ liệu bằng useState Hook :

debug-tutorial / src / components / App / App.js
import React, { createContext, useState } from 'react'; import './App.css';  export const TextContext = createContext();  function App() {   const [text, setText] = useState('');    return(     <TextContext.Provider value={text}>       <div className="wrapper">         <label htmlFor="text">           Add Your Text Here:           <br>           <textarea             id="text"             name="text"             rows="10"             cols="100"             onChange={e => setText(e.target.value)}           >           </textarea>         </label>       </div>     </TextContext.Provider>   ) }  export default App;

Đảm bảo xuất TextContext , sau đó bọc toàn bộ thành phần bằng TextContext.Provider . Nắm bắt dữ liệu bằng cách thêm phần tử onChange vào phần tử <textarea> của bạn.

Lưu các file . Trình duyệt sẽ reload . Hãy chắc chắn rằng bạn đã Phản ứng Developer Tools cởi mở và thông báo rằng App thành phần hiện nay cho thấy các Context.Provider như một thành phần con.

Ngữ cảnh thành phần trong Công cụ dành cho nhà phát triển React

Thành phần theo mặc định có tên chung - Context — nhưng bạn có thể thay đổi tên đó bằng cách thêm thuộc tính displayName vào ngữ cảnh đã tạo. Bên trong App.js , thêm một dòng nơi bạn đặt displayName thành TextContext :

debug-tutorial / src / components / App / App.js
import React, { createContext, useState } from 'react'; import './App.css';  export const TextContext = createContext(); TextContext.displayName = 'TextContext';  function App() {     ... }  export default App;

Nó không phải là cần thiết để thêm một displayName , nhưng nó sẽ giúp cho các thành phần chuyển khi phân tích các cây thành phần trong giao diện điều khiển. Bạn cũng sẽ thấy giá trị của useState Hook trong thanh bên. Nhập một số văn bản vào đầu vào và bạn sẽ thấy giá trị được cập nhật trong Công cụ dành cho nhà phát triển React bên dưới phần hook trên thành phần App .

Cập nhật giá trị trong Công cụ dành cho nhà phát triển

Hook cũng có tên chung là State , nhưng điều này không dễ cập nhật vì bối cảnh. Có một useDebugValue Hook, nhưng nó chỉ hoạt động trên các Hook tùy chỉnh và không được khuyến khích cho tất cả các Hook tùy chỉnh.

Trong trường hợp này, trạng thái cho thành phần App là chỗ dựa cho TextContext.Provider . Nhấp vào TextContext.Provider trong React Developer Tools và bạn sẽ thấy rằng value cũng phản ánh giá trị đầu vào mà bạn đã đặt với trạng thái:

Đã cập nhật giá trị cho ngữ cảnh

Công cụ dành cho nhà phát triển React đang hiển thị cho bạn thông tin ngữ cảnh và hỗ trợ thời gian thực, đồng thời giá trị sẽ tăng lên khi bạn thêm các thành phần.

Tiếp theo, thêm một thành phần có tên là TextInformation . Thành phần này sẽ là nơi chứa các thành phần có phân tích dữ liệu cụ thể, chẳng hạn như số từ.

Đầu tiên, tạo folder :

  • mkdir src/components/TextInformation

Sau đó, mở TextInformation.js trong editor của bạn.

  • nano src/components/TextInformation/TextInformation.js

Bên trong thành phần, bạn sẽ có ba thành phần riêng biệt: CharacterCount , WordCount và CharacterMap . Bạn sẽ tạo ra các thành phần này chỉ trong giây lát.

Thành phần TextInformation sẽ sử dụng useReducer Hook để chuyển đổi hiển thị của từng thành phần. Tạo một hàm reducer để chuyển đổi giá trị hiển thị của từng thành phần và một nút để chuyển đổi từng thành phần bằng hành động onClick :

debug-tutorial / src / components / TextInformation / TextInformation.js
import React, { useReducer } from 'react';  const reducer = (state, action) => {   return {     ...state,     [action]: !state[action]   } } export default function TextInformation() {   const [tabs, toggleTabs] = useReducer(reducer, {     characterCount: true,     wordCount: true,     characterMap: true   });    return(     <div>       <button onClick={() => toggleTabs('characterCount')}>Character Count</button>       <button onClick={() => toggleTabs('wordCount')}>Word Count</button>       <button onClick={() => toggleTabs('characterMap')}>Character Map</button>     </div>   ) }

Lưu ý useReducer Hook của bạn bắt đầu với một đối tượng ánh xạ mỗi khóa tới một boolean. Hàm giảm thiểu sử dụng toán tử spread để bảo toàn giá trị trước đó trong khi đặt giá trị mới bằng cách sử dụng tham số action .

Lưu và đóng file . Sau đó, mở App.js :

  • nano src/components/App/App.js

Thêm vào thành phần mới của bạn:

debug-tutorial / src / components / App / App.js
import React, { createContext, useState } from 'react'; import './App.css'; import TextInformation from '../TextInformation/TextInformation';  ...  function App() {   const [text, setText] = useState('');    return(     <TextContext.Provider value={text}>       <div className="wrapper">         <label htmlFor="text">           Add Your Text Here:           <br>           <textarea             id="text"             name="text"             rows="10"             cols="100"             onChange={e => setText(e.target.value)}           >           </textarea>         </label>         <TextInformation />       </div>     </TextContext.Provider>   ) }  export default App;

Lưu và đóng file . Khi bạn làm như vậy, trình duyệt sẽ reload và bạn sẽ thấy thành phần được cập nhật. Nếu bạn nhấp vào TextInformation trong React Developer Tools, bạn sẽ thấy cập nhật giá trị trên mỗi lần nhấp vào nút:

Cập nhật Giảm khi nhấp chuột

Đến đây bạn đã có thành phần containers , bạn cần tạo từng thành phần thông tin. Mỗi thành phần sẽ có một chỗ dựa được gọi là show . Nếu show là sai, thành phần sẽ trả về null . Các thành phần sẽ sử dụng TextContext , phân tích dữ liệu và hiển thị kết quả.

Để bắt đầu, hãy tạo thành phần CharacterCount .

Đầu tiên, tạo một folder mới:

  • mkdir src/components/CharacterCount

Sau đó, mở CharacterCount.js trong editor của bạn:

  • nano src/components/CharacterCount/CharacterCount.js

Bên trong component, hãy tạo một hàm sử dụng show prop và hiển thị null nếu show là giả:

debug-tutorial / src / components / CharacterCount / CharacterCount.js
import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { TextContext } from '../App/App';  export default function CharacterCount({ show }) {   const text = useContext(TextContext);    if(!show) {     return null;   }    return(     <div>       Character Count: {text.length}     </div>   ) }  CharacterCount.proTypes = {   show: PropTypes.bool.isRequired }

Bên trong hàm CharacterCount , bạn chỉ định giá trị của TextContext cho một biến bằng cách sử dụng useContext Hook. Sau đó, bạn trả về một <div> hiển thị số ký tự bằng cách sử dụng phương pháp length . Cuối cùng, PropTypes bổ sung một hệ thống đánh máy yếu để cung cấp một số thực thi nhằm đảm bảo loại prop không được thông qua.

Lưu và đóng file . Mở TextInformation.js :

  • nano src/components/TextInformation/TextInformation.js

Nhập CharacterCount và thêm thành phần sau các node , chuyển tabs.characterCount làm chỗ dựa show :

debug-tutorial / src / components / TextInformation / TextInformation.js
import React, { useReducer } from 'react'; import CharacterCount from '../CharacterCount/CharacterCount';  const reducer = (state, action) => {   return {     ...state,     [action]: !state[action]   } }  export default function TextInformation() {   const [tabs, toggleTabs] = useReducer(reducer, {     characterCount: true,     wordCount: true,     characterMap: true   });    return(     <div>       <button onClick={() => toggleTabs('characterCount')}>Character Count</button>       <button onClick={() => toggleTabs('wordCount')}>Word Count</button>       <button onClick={() => toggleTabs('characterMap')}>Character Map</button>       <CharacterCount show={tabs.characterCount} />     </div>   ) }

Lưu các file . Trình duyệt sẽ reload và bạn sẽ thấy thành phần trong Công cụ dành cho nhà phát triển React. Lưu ý khi bạn thêm từ vào đầu vào, ngữ cảnh sẽ cập nhật. Nếu bạn chuyển đổi thành phần, bạn sẽ thấy cập nhật đạo cụ sau mỗi lần nhấp:

Thêm văn bản và chuyển đổi

Bạn cũng có thể thêm hoặc thay đổi giá đỡ theo cách thủ công bằng cách nhấp vào thuộc tính và cập nhật giá trị:

Thay đổi đạo cụ theo cách thủ công

Tiếp theo, thêm một thành phần WordCount .

Tạo folder :

  • mkdir src/components/WordCount

Mở file trong editor :

  • nano src/components/WordCount/WordCount.js

Tạo một thành phần tương tự như CharacterCount , nhưng sử dụng phương pháp split trên khoảng trắng để tạo một mảng từ trước khi hiển thị độ dài:

debug-tutorial / src / components / WordCount / WordCount.js
import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { TextContext } from '../App/App';  export default function WordCount({ show }) {   const text = useContext(TextContext);    if(!show) {     return null;   }    return(     <div>       Word Count: {text.split(' ').length}     </div>   ) }  WordCount.proTypes = {   show: PropTypes.bool.isRequired }

Lưu và đóng file .

Cuối cùng, tạo một thành phần CharacterMap . Thành phần này sẽ cho biết tần suất một ký tự cụ thể được sử dụng trong một khối văn bản. Sau đó, nó sẽ sắp xếp các ký tự theo tần suất trong đoạn văn và hiển thị kết quả.

Đầu tiên, tạo folder :

  • mkdir src/components/CharacterMap

Tiếp theo, mở CharacterMap.js trong editor :

  • nano src/components/CharacterMap/CharacterMap.js

Nhập và sử dụng thành phần TextContext và sử dụng show hỗ trợ để hiển thị kết quả như bạn đã làm trong các thành phần trước:

debug-tutorial / src / components / CharacterMap / CharacterMap.js
import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { TextContext } from '../App/App';  export default function CharacterMap({ show }) {   const text = useContext(TextContext);    if(!show) {     return null;   }    return(     <div>       Character Map: {text.length}     </div>   ) }  CharacterMap.proTypes = {   show: PropTypes.bool.isRequired }

Thành phần này cần một chức năng phức tạp hơn một chút để tạo bản đồ tần số cho mỗi chữ cái. Bạn cần phải xem qua từng ký tự và tăng một giá trị khi nào có lặp lại. Sau đó, bạn cần lấy dữ liệu đó và sắp xếp nó sao cho các chữ cái thường gặp nhất nằm ở đầu danh sách.

Để thực hiện việc này, hãy thêm mã được đánh dấu sau:

debug-tutorial / src / components / CharacterMap / CharacterMap.js
 import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { TextContext } from '../App/App';  function itemize(text){  const letters = text.split('')    .filter(l => l !== ' ')    .reduce((collection, item) => {      const letter = item.toLowerCase();      return {        ...collection,        [letter]: (collection[letter] || 0) + 1      }    }, {})  return Object.entries(letters)    .sort((a, b) => b[1] - a[1]); }  export default function CharacterMap({ show }) {   const text = useContext(TextContext);    if(!show) {     return null;   }    return(     <div>      Character Map:      {itemize(text).map(character => (        <div key={character[0]}>          {character[0]}: {character[1]}        </div>      ))}     </div>   ) }  CharacterMap.proTypes = {   show: PropTypes.bool.isRequired }

Trong đoạn mã này, bạn tạo một hàm có tên là itemize chia văn bản thành một mảng ký tự bằng phương thức chuỗi split() . Sau đó, bạn reduce mảng thành một đối tượng bằng cách thêm ký tự và sau đó tăng số lượng cho mỗi ký tự tiếp theo. Cuối cùng, bạn chuyển đổi đối tượng thành một mảng các cặp bằng Object.entries và sort để đặt các ký tự được sử dụng nhiều nhất ở trên cùng.

Sau khi bạn tạo hàm, bạn chuyển văn bản cho hàm trong phương thức render và map qua kết quả để hiển thị ký tự — giá trị mảng [0] —và số lượng — giá trị mảng [1] —trên một <div> .

Lưu và đóng file . Chức năng này sẽ cho bạn cơ hội khám phá một số tính năng hiệu suất của Công cụ dành cho nhà phát triển React trong phần tiếp theo.

Tiếp theo, thêm các thành phần mới vào TextInformation và xem các giá trị trong React Developer Tools.

Mở TextInformation.js :

  • nano src/components/TextInformation/TextInformation.js

Nhập và hiển thị các thành phần mới:

debug-tutorial / src / components / TextInformation / TextInformation.js
import React, { useReducer } from 'react'; import CharacterCount from '../CharacterCount/CharacterCount'; import CharacterMap from '../CharacterMap/CharacterMap'; import WordCount from '../WordCount/WordCount';  const reducer = (state, action) => {   return {     ...state,     [action]: !state[action]   } }  export default function TextInformation() {   const [tabs, toggleTabs] = useReducer(reducer, {     characterCount: true,     wordCount: true,     characterMap: true   });    return(     <div>       <button onClick={() => toggleTabs('characterCount')}>Character Count</button>       <button onClick={() => toggleTabs('wordCount')}>Word Count</button>       <button onClick={() => toggleTabs('characterMap')}>Character Map</button>       <CharacterCount show={tabs.characterCount} />       <WordCount show={tabs.wordCount} />       <CharacterMap show={tabs.characterMap} />     </div>   ) }

Lưu và đóng file . Khi bạn làm như vậy, trình duyệt sẽ làm mới và nếu bạn thêm một số dữ liệu vào, bạn sẽ tìm thấy phân tích tần số ký tự trong các thành phần mới:

Thành phần CharacterMap trong Công cụ dành cho nhà phát triển React

Trong phần này, bạn đã sử dụng React Developer Tools để khám phá cây thành phần. Bạn cũng đã học cách xem các đạo cụ trong thời gian thực cho từng thành phần và cách thay đổi các đạo cụ theo cách thủ công bằng các công cụ dành cho nhà phát triển. Cuối cùng, bạn đã xem bối cảnh cho sự thay đổi thành phần với đầu vào.

Trong phần tiếp theo, bạn sẽ sử dụng Phản ứng Developer Tools tab Profiler để xác định thành phần mà từ lâu đã thời gian render.

Bước 3 - Theo dõi kết xuất thành phần qua các tương tác

Trong bước này, bạn sẽ sử dụng trình biên dịch Công cụ dành cho nhà phát triển React để theo dõi kết xuất và kết xuất thành phần khi bạn sử dụng ứng dụng mẫu. Bạn sẽ chuyển các bản ghi hoặc hình ảnh trực quan về các chỉ số tối ưu hóa có liên quan của ứng dụng và sử dụng thông tin để xác định các thành phần không hiệu quả, giảm thời gian hiển thị và tăng tốc độ ứng dụng.

Đến cuối bước này, bạn sẽ biết cách xác định các thành phần hiển thị trong quá trình tương tác của user và cách soạn các thành phần để giảm kết xuất không hiệu quả.

Một cách nhanh chóng để xem các thành phần thay đổi nhau như thế nào là bật tính năng đánh dấu khi một thành phần được kết xuất lại. Điều này sẽ cung cấp cho bạn một cái nhìn tổng quan trực quan về cách các thành phần phản ứng với việc thay đổi dữ liệu.

Trong Công cụ nhà phát triển React, nhấp vào biểu tượng Cài đặt . Nó sẽ giống như một bánh răng:

Biểu tượng cài đặt

Sau đó chọn tùy chọn bên dưới Chung có nội dung Đánh dấu các bản cập nhật khi các thành phần hiển thị .

Đánh dấu các thay đổi

Khi bạn thực hiện bất kỳ thay đổi nào, React Developer Tools sẽ đánh dấu các thành phần hiển thị lại. Ví dụ: khi bạn thay đổi đầu vào, mọi thành phần hiển thị lại vì dữ liệu được lưu trữ trên Hook ở cấp cơ sở và mọi thay đổi sẽ hiển thị lại toàn bộ cây thành phần.

Lưu ý điểm nổi bật xung quanh các thành phần, bao gồm cả phần trên cùng của màn hình xung quanh thành phần root :

Đánh dấu văn bản

So sánh điều đó với cách các thành phần hiển thị lại khi bạn nhấp vào một trong các node để chuyển đổi dữ liệu. Nếu bạn nhấp vào một trong các node , các thành phần trong TextInformation sẽ hiển thị lại, nhưng không phải thành phần root :

Chỉ hiển thị các thành phần thấp hơn

Việc hiển thị các kết xuất sẽ giúp bạn nhanh chóng biết được các thành phần có liên quan như thế nào, nhưng nó không cung cấp cho bạn nhiều dữ liệu để phân tích các thành phần cụ thể. Để có thêm thông tin chi tiết, ta hãy xem xét các công cụ lập profile .

Các công cụ cấu hình được thiết kế để giúp bạn đo lường chính xác thời gian mỗi thành phần cần để hiển thị. Điều này có thể giúp bạn xác định các thành phần có thể chậm hoặc xử lý mạnh.

Mở lại cài đặt và bỏ chọn hộp Đánh dấu các bản cập nhật khi các thành phần hiển thị . Sau đó click vào tab Profiler trong giao diện điều khiển.

Để sử dụng trình biên dịch, hãy nhấp vào vòng tròn màu xanh lam ở bên trái màn hình để bắt đầu ghi và nhấp lại vào nó khi bạn hoàn tất:

Bắt đầu lập profile

Khi dừng ghi, bạn sẽ tìm thấy biểu đồ về các thay đổi của thành phần, bao gồm thời gian hiển thị từng mục.

Để hiểu rõ về hiệu quả tương đối của các thành phần, hãy paste vào trang Wikipedia cho Creative Commons .Văn bản này đủ dài để mang lại kết quả thú vị, nhưng không quá lớn để làm hỏng ứng dụng.

Sau khi paste vào văn bản, hãy khởi động trình biên dịch, sau đó thực hiện một thay đổi nhỏ đối với đầu vào. Dừng cấu hình sau khi thành phần hoàn thành kết xuất. Sẽ có một khoảng thời gian tạm dừng dài vì ứng dụng đang xử lý một quá trình kết xuất dài:

Thêm một thay đổi với nhiều văn bản

Khi bạn kết thúc quá trình ghi, React Developer Tools sẽ tạo một bản ghi hiển thị mọi thành phần được hiển thị lại và mất bao lâu để hiển thị lại từng thành phần.

Trong trường hợp này, mỗi lần nhấn phím từ từ "Thay đổi" đều gây ra kết xuất lại. Quan trọng hơn, nó cho biết mỗi lần hiển thị mất bao lâu và tại sao lại có độ trễ lâu. Các thành phần App , TextContext.Provider và TextInformation mất khoảng 0,2 mili giây để kết xuất. Nhưng CharacterMap thành phần mất khoảng 1 giây cho mỗi tổ hợp phím để tái làm vì các dữ liệu phức tạp phân tích cú pháp trong itemize chức năng.

Trong màn hình, mỗi thanh màu vàng là một tổ hợp phím mới. Bạn có thể phát lại trình tự lần lượt bằng cách nhấp vào từng thanh. Lưu ý có một chút thay đổi trong thời gian kết xuất, nhưng Bản đồ CharacterMap luôn chậm:

Nhìn vào máy ghi lửa

Bạn có thể lấy thêm thông tin bằng cách chọn tùy chọn Ghi lại lý do tại sao mỗi thành phần được hiển thị trong khi lập profile . dưới phần Profiler các cài đặt .

Tùy chọn "Ghi lại lý do" của Tab Hồ sơ

Hãy thử chuyển đổi thành phần Word Count và để ý xem các thay đổi diễn ra trong bao lâu. Ứng dụng vẫn bị lag mặc dù bạn không thay đổi nội dung văn bản:

Bảng lửa bật tắt Đếm từ

Bây giờ khi bạn di con trỏ qua một thành phần, bạn sẽ thấy rằng nó bao gồm lý do khiến thành phần đó được hiển thị lại. Trong trường hợp này, lý do thành phần thay đổi là Thành phần mẹ được hiển thị . Đó là một vấn đề đối với thành phần CharacterMap . CharacterMap đang thực hiện một phép tính tốn kém mỗi khi cha mẹ thay đổi, ngay cả khi đạo cụ và bối cảnh không thay đổi. Đó là, nó đang tính toán lại dữ liệu mặc dù dữ liệu giống hệt với lần hiển thị trước đó.

Nhấp vào tab Xếp hạng và bạn sẽ thấy CharacterMap mất bao nhiêu thời gian khi so sánh với tất cả các thành phần khác:

Tab xếp hạng

React Developer Tools đã giúp cô lập một vấn đề: thành phần CharacterMap lại và thực hiện một phép tính tốn kém bất cứ lúc nào bất kỳ thành phần mẹ nào thay đổi.

Có nhiều cách để giải quyết vấn đề, nhưng tất cả chúng đều liên quan đến một số loại bộ nhớ đệm thông qua ghi nhớ , một quá trình mà dữ liệu đã được tính toán được ghi nhớ thay vì được tính toán lại. Bạn có thể sử dụng một thư viện như lodash / memoize hoặc memoize-one để lưu vào bộ nhớ cache các kết quả của hàm itemize hoặc bạn có thể sử dụng hàm memo trong React để memo toàn bộ thành phần.

Nếu bạn sử dụng React memo , hàm sẽ chỉ hiển thị lại nếu các đạo cụ hoặc ngữ cảnh thay đổi. Trong trường hợp này, bạn sẽ sử dụng React memo . Nói chung, bạn nên ghi nhớ chính dữ liệu trước vì đây là một trường hợp cá biệt hơn, nhưng có một số thay đổi thú vị trong Công cụ dành cho nhà phát triển React nếu bạn ghi nhớ toàn bộ thành phần, vì vậy bạn sẽ sử dụng cách tiếp cận đó trong hướng dẫn này.

Mở CharacterMap.js :

  • nano src/components/CharacterMap/CharacterMap.js

Nhập memo từ React, sau đó chuyển toàn bộ hàm vào hàm memo :

debug-tutorial / src / components / CharacterMap / CharacterMap.js
import React, { memo, useContext } from 'react'; import PropTypes from 'prop-types'; import { TextContext } from '../App/App';  ...  function CharacterMap({ show }) {   const text = useContext(TextContext);    if(!show) {     return null;   }    return(     <div>      Character Map:      {itemize(text).map(character => (        <div key={character[0]}>          {character[0]}: {character[1]}        </div>      ))}     </div>   ) }  CharacterMap.proTypes = {   show: PropTypes.bool.isRequired }  export default memo(CharacterMap);

Bạn di chuyển dòng export default đến cuối mã để chuyển thành phần vào memo ngay trước khi xuất. Sau đó, React sẽ so sánh các đạo cụ trước khi kết xuất lại.

Lưu và đóng file . Trình duyệt sẽ reload và khi bạn chuyển đổi WordCount , thành phần sẽ cập nhật nhanh hơn nhiều. Lần này, CharacterMap không hiển thị lại. Thay vào đó, trong Công cụ dành cho nhà phát triển React, bạn sẽ thấy một hình chữ nhật màu xám cho thấy việc hiển thị đã bị ngăn cản.

Công cụ dành cho nhà phát triển React cho thấy rằng CharacterMap không hiển thị lại

Nếu bạn nhìn vào tab Xếp hạng , bạn sẽ thấy rằng cả CharacterCount và WordCount được hiển thị lại, nhưng vì những lý do khác nhau. Vì CharacterCount không được ghi nhớ, nó được hiển thị lại do phần tử root đã thay đổi. WordCount được hiển thị lại vì các đạo cụ đã thay đổi. Ngay cả khi nó được gói trong memo , nó vẫn sẽ hiển thị.

Chế độ xem xếp hạng của ứng dụng được ghi nhớ

Lưu ý: Ghi nhớ rất hữu ích, nhưng bạn chỉ nên sử dụng nó khi gặp vấn đề về hiệu suất rõ ràng, như bạn đã làm trong trường hợp này. Nếu không, nó có thể tạo ra một vấn đề về hiệu suất: React sẽ phải kiểm tra các đạo cụ mỗi khi nó hiển thị lại, điều này có thể gây ra sự chậm trễ trên các thành phần nhỏ hơn.

Trong bước này, bạn đã sử dụng trình cấu hình để xác định kết xuất lại và các thành phần không kết xuất. Bạn cũng đã sử dụng đồ thị và đồ thị được xếp hạng để xác định các thành phần kết xuất chậm và sau đó sử dụng chức năng memo để ngăn kết xuất lại khi không có thay đổi nào đối với đạo cụ hoặc ngữ cảnh.

Kết luận

Tiện ích mở rộng trình duyệt React Developer Tools cung cấp cho bạn một bộ tiện ích mạnh mẽ để khám phá các thành phần của bạn trong các ứng dụng của chúng. Với những công cụ này, bạn có thể khám phá trạng thái của một thành phần và xác định lỗi bằng cách sử dụng dữ liệu thực mà không cần câu lệnh console hoặc trình gỡ lỗi. Bạn cũng có thể sử dụng trình biên dịch để khám phá cách các thành phần tương tác với nhau, cho phép bạn xác định và tối ưu hóa các thành phần có kết xuất chậm trong ứng dụng đầy đủ của bạn. Những công cụ này là một phần quan trọng của quá trình phát triển và cho bạn cơ hội khám phá các thành phần như một phần của ứng dụng chứ không chỉ như mã tĩnh.

Nếu bạn muốn tìm hiểu thêm về cách gỡ lỗi JavaScript, hãy xem bài viết của ta về Cách gỡ lỗi Node.js bằng Trình gỡ lỗi tích hợp và Công cụ dành cho nhà phát triển của Chrome . Để có thêm các hướng dẫn về React, hãy xem trang Chủ đề React của ta hoặc quay lại trang Cách viết mã trong chuỗi React.js .

Tags:

Các tin liên quan