Forem: mikebui

Dùng Profile để kiểm tra hiệu suất của React App

mikebui — Tue, 24 May 2022 01:37:02 +0000

Bài viết được dịch từ:
https://kentcdodds.com/blog/profile-a-react-app-for-performance

Thực hành dựa trên source code

Cài đặt Extension

Cần cài React DevTools extension.

Khởi động app

Ứng dụng bookshelf sử dụng react-scripts (nhờ create-react-app), vì vậy sau khi bạn đã cài đặt dự án ở máy mình, hãy chạy npm run start để chạy server. Thao tác này sẽ hiển thị ứng dụng trong trình duyệt của bạn tại http://localhost: 3000:

Profiler

F12 trên browser chọn tab Profiler. Bây giờ bạn có thể ấn vào vòng tròn nhỏ màu xanh lam để "Start profiling" ứng dụng.

Từ đây, hãy tiếp tục và tương tác với ứng dụng một chút. Tôi sẽ đăng ký một tài khoản mới. Sau đó ấn vào vòng tròn nhỏ màu đỏ để "Stop profiling."

Khám phá dữ liệu hồ sơ

Từ đây, bạn có một số tùy chọn để khám phá dữ liệu mà DevTools đã thu thập khi bạn tương tác với ứng dụng. Chế độ xem mặc định là "Flamegraph chart" và cũng có "Ranked chart". Đây là "Flamegraph chart" trông như thế nào (nếu bạn muốn xem "Ranked chart", bạn sẽ phải tự mình làm điều này 😜):

Chúng ta có thể đi sâu vào phân tích nội dung này trong một bài đăng khác.

Cạm bẫy: đo lường ở chế độ phát triển

Tôi muốn chỉ ra một cạm bẫy nghiêm trọng mà bạn cần tránh khi thực hiện các phép đo hiệu suất như lập hồ sơ (Profiling). Hiện tại, chúng ta đang đo lường hiệu quả hoạt động của ứng dụng trong chế độ phát triển. Nếu bạn đã sử dụng React được một thời gian, bạn biết rõ rằng nó có rất nhiều cảnh báo ở môi trường phát triển để giúp bạn tránh khỏi các vấn đề do code sai lý thuyết. Đây là một trong những điều tôi yêu thích nhất ở React, nhưng điều đó đi kèm với chi phí hiệu suất (thường là đáng kể).

Do đó, các phép đo hiệu suất của bạn bị nhiễm bẩn bởi môi trường phát triển của React.

Vì vậy, nếu bạn muốn có được phép đo chính xác về hiệu suất của ứng dụng trên môi trường production, bạn nên đảm bảo thực hiện các phép đo trên môi trường production.

Build và đo trên môi trường production

Vì vậy, hãy chạy npm run build. Tiếp theo, chạy npx serve -s build để chạy trên server. Vào port 5000 và chạy profiler. Nhưng không?!

Profiling not supported.
Profiling support requires either a development or production-profiling build of React v16.5+.
Learn more at fb.me/react-profiling.

Hóa ra, React có code dành riêng cho việc lập hồ sơ và vì lợi ích của việc làm cho ứng dụng của bạn nhanh nhất có thể, họ đã xóa code đó khỏi môi trường production.

LƯU Ý: Nếu bạn đang sử dụng create-react-app với react-scripts @> = 3.2.0 thì bạn có thể chỉ cần chạy npx react-scripts build --profile và nó sẽ thực hiện tất cả những việc này cho bạn (nhờ Jacob) và bạn có thể bỏ qua cạm bẫy tiếp theo. Nếu không, vui lòng đọc tiếp.

Cập nhật cấu hình webpack để tạo hồ sơ trên môi trường production

Như lưu ý trên, ở môi trường production loại bỏ hầu hết các code hữu ích ở môi trường phát triển, nhưng vẫn giữ nguyên đoạn code lập hồ sơ. Nó vẫn chậm hơn một chút, nhưng nó cho chúng ta ý tưởng về cách các component của chúng ta đang hoạt động trong môi trường production.

Có một số cách để giải quyết vấn đề này, nhưng đơn giản nhất là cập nhật cấu hình webpack thành alias bất kỳ import nào của các mô-đun nhất định vào phiên bản lập hồ sơ của mô-đun đó. Có hai mô-đun như vậy:

react-dom -> react-dom/profiling
scheduler/tracing ->scheduler/tracing-profiling`

Cả hai đều là các package React và cần đoạn code đặc biệt để việc lập hồ sơ hoạt động.

Cách bạn cập nhật cấu hình webpack sẽ khác nhau dựa trên framework bạn đang sử dụng (create-react-app, next.js, gatsby.js hoặc của riêng bạn với webpack tự xây). Trong trường hợp này, chúng tôi đang sử dụng create-react-app và không có cách nào được hỗ trợ chính thức để mở rộng hoặc sửa đổi cấu hình webpack.
Vì đang test ở local nên chúng ta có thể sửa trong node_modules

Vì vậy, nếu bạn đang sử dụng react-scripts@3.1.1 (hoặc ở đâu đó xung quanh đó), thì bạn có thể mở cấu hình webpack tại đây: ./node_modules/react-scripts/config/webpack.config.js

Sau đó xác định vị trí code trông giống như thế này và thêm các dòng ghi chú:

Lập hồ sơ cho bản build ở môi trường production

Bây giờ hãy chạy npm run build, sau đó npx serve -s build và hãy lập hồ sơ ứng dụng một lần nữa! Tôi sẽ làm theo các bước đăng ký giống như lần trước.

Bạn sẽ nhận thấy rằng đây là lần tương tác giống như lần trước (nó hiển thị trang sau khi đăng ký) và chúng tôi đã tăng từ 13,7 mili giây xuống 6,5 mili giây. Cải tiến tốt đẹp!

Nhưng thành phần Ẩn danh này có gì ở khắp nơi vậy? Và chúng tôi có một thành phần được gọi là ee khác được gọi là Z? Huh? Những gì đang xảy ra ở đây? Chà, bởi vì chúng tôi đang xây dựng ứng dụng của mình cho production, chúng ta đang giảm thiểu mã của mình để tải / phân tích cú pháp nhanh hơn, đây là một điều tốt cho người dùng cuối, nhưng lại là một điều tồi tệ đối với việc đo lường hiệu suất vì điều đó gây khó khăn cho chúng ta để biết thành phần nào trong số những thành phần này là thủ phạm gây ra các vấn đề về hiệu suất.

Tắt chức năng name mangling

React biết cách gọi các components của bạn dựa trên thuộc tính namecủa component:

Tuy nhiên, khi chúng tôi tạo mã bằng "uglifier" hoặc "minifier", công cụ sẽ thay đổi những tên đó theo cách làm cho code hoạt động giống như trước đây, nhưng giảm kích thước tệp để cải thiện hiệu suất :

Đây là lý do tại sao chúng ta thấy những cái tên kì quặc này trong các phép đo hiệu suất. Vì vậy, cần phải tắt tính năng mangling này.

create-react-app sử dụng một công cụ có tên là Terser thông qua terser-webpack-plugin để thực hiện việc thu nhỏ, vì vậy chúng ta chỉ cần cập nhật cấu hình để giữ nguyên hàm và tên class.

Vì vậy, trong cùng một tệp cấu hình webpack đó, hãy cuộn xuống nơi plugin được cấu hình và sửa đổi nó như sau:

Với keep_classnames và keep_fnames được định cấu hình thành true, bây giờ hãy thử build app và chạy một phiên cấu hình một lần nữa!

Cạm bẫy: Lập hồ sơ bằng máy tính nhanh

Tôi đảm bảo với bạn rằng hầu hết các bạn đang đọc bài viết này hiện đang phát triển ứng dụng của mình bằng một thiết bị mạnh mẽ hơn hầu hết những người đang sử dụng ứng dụng. Không có gì thay thế cho việc thử ứng dụng của bạn trên các thiết bị mà người dùng sẽ sử dụng. Điều đó nói rằng, bạn có thể hiểu rõ hơn nhiều về hiệu suất thực tế của ứng dụng nếu bạn điều chỉnh CPU để mô phỏng trải nghiệm của một số người dùng ứng dụng của bạn.

Vì vậy, chúng ta hãy làm điều đó. Ấn vào tab "Performance" của Chrome DevTools, sau đó vào biểu tượng bánh răng để hiển thị cài đặt, sau đó trên tùy chọn CPU, chọn "6x slowdown.".

Bây giờ hãy làm lại toàn bộ và kiểm tra sự khác biệt:

Phù! 31,8 mili giây! Đó là khá chậm! Tìm hiểu thêm về tác động của thời gian đó đối với trải nghiệm của người dùng trong bài đăng blog này có tiêu đề Rendering Performance. Đây có thể là một cái gì đó đáng xem xét! Nhưng chúng tôi sẽ lưu nó cho một bài đăng blog khác 😉

Giải thích đơn giản về React.useEffect ()

mikebui — Tue, 17 May 2022 13:36:07 +0000

Bài viết dịch từ:
https://dmitripavlutin.com/react-useeffect-explanation/

1. useEffect () dành cho side-effect

Một component React sử dụng các props và/hoặc state để tính toán kết quả đầu ra. Nếu component thực hiện các tính toán không nhắm mục đích là giá trị đầu ra, thì các tính toán này được đặt tên là side effect.

Ví dụ về các side effect là lấy data, thao tác DOM trực tiếp, sử dụng các hàm hẹn giờ như setTimeout (), v.v.

Component rendering và logic của side effect là độc lập. Sẽ là một sai lầm nếu thực hiện các side effect trực tiếp trong phần thân của Component , vốn chủ yếu được sử dụng để tính toán kết quả đầu ra.

Tần suất hiển thị của component không phải là điều bạn có thể kiểm soát - nếu React muốn hiển thị component, bạn không thể dừng nó.

function Greet({ name }) {
  const message = `Hello, ${name}!`; // Calculates output
  // Bad!
  document.title = `Greetings to ${name}`; // Side-effect!
  return <div>{message}</div>;       // Calculates output
}

Làm thế nào để tách rendering khỏi side effect? Hãy dùng
useEffect() - hook chạy các side effect độc lập với việc rendering.

import { useEffect } from 'react';
function Greet({ name }) {
  const message = `Hello, ${name}!`;   // Calculates output
  useEffect(() => {
    // Good!
    document.title = `Greetings to ${name}`; // Side-effect!
  }, [name]);
  return <div>{message}</div>;         // Calculates output
}

useEffect() hook chấp nhận 2 đối số:

useEffect(callback[, dependencies]);

callback là hàm chứa logic của side effect. callback được thực thi ngay sau khi các thay đổi được đẩy vào DOM.
dependencies là một mảng tùy chọn của các dependencies . useEffect() chỉ thực thi lệnh gọi lại nếu các dependencies thay đổi giữa các lần hiển thị.

Đặt logic của side effect vào hàm callback, sau đó sử dụng đối số dependencies để kiểm soát thời điểm bạn muốn side effect chạy. Đó là mục đích duy nhất của useEffect().

Ví dụ: trong đoạn code trước đó, bạn đã thấy useEffect() đang hoạt động:

useEffect(() => {
  document.title = `Greetings to ${name}`;
}, [name]);

Cập nhật tiêu đề document là side effect vì nó không trực tiếp tính toán kết quả đầu ra của component. Đó là lý do tại sao cập nhật tiêu đề document được đặt trong một hàm callback và được cung cấp cho useEffect().

Ngoài ra, bạn không muốn bản cập nhật tiêu đề document thực thi mỗi khi component Greet hiển thị. Bạn chỉ muốn nó được thực thi khi prop name thay đổi - đó là lý do bạn cung cấp tên làm dependency cho useEffect (callback, [name]).

2. Đối số Dependencies

Đối số Dependencies của useEffect(callback, dependencies) cho phép bạn kiểm soát thời điểm side effect chạy. Khi Dependencies là:

A) Không có: Side effect chạy sau mỗi lần rendering

import { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Runs after EVERY rendering
  });  
}

B) Array rỗng []: side-effect chạy một lần sau lần hiển thị đầu tiên.

import { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Runs ONCE after initial rendering
  }, []);
}

C) Có props hoặc state [prop1, prop2, ..., state1, state2]: side-effect chỉ chạy khi bất kỳ giá trị phụ thuộc nào thay đổi.

import { useEffect, useState } from 'react';
function MyComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}

Hãy phân tích các trường hợp B) và C) vì chúng được sử dụng thường xuyên.

3. Vòng đời của component

3.1 ComponentDidMount

Sử dụng một mảng phụ thuộc trống để gọi một side effect một lần sau khi component được mount:

import { useEffect } from 'react';
function Greet({ name }) {
  const message = `Hello, ${name}!`;
  useEffect(() => {
    // Runs once, after mounting
    document.title = 'Greetings page';
  }, []);
  return <div>{message}</div>;
}

useEffect (..., []) được cung cấp một mảng trống làm đối số phụ thuộc. Khi được cấu hình theo cách như vậy, useEffect () sẽ thực hiện callback chỉ một lần, sau khi được mount vào DOM.

Ngay cả khi component hiển thị với thuộc tính name khác, side effect chỉ chạy một lần sau lần hiển thị đầu tiên:

// First render
<Greet name="Eric" />   // Side-effect RUNS
// Second render, name prop changes
<Greet name="Stan" />   // Side-effect DOES NOT RUN
// Third render, name prop changes
<Greet name="Butters"/> // Side-effect DOES NOT RUN

3.2 Component did update

Mỗi khi side effect sử dụng props hoặc state, bạn phải chỉ ra các giá trị này dưới dạng dependencies:

import { useEffect } from 'react';
function MyComponent({ prop }) {
  const [state, setState] = useState();
  useEffect(() => {
    // Side-effect uses `prop` and `state`
  }, [prop, state]);
  return <div>....</div>;
}

useEffect (callback, [prop, state]) gọi hàm callback sau khi các thay đổi được mount vào DOM và khi và chỉ khi bất kỳ giá trị nào trong mảng phụ thuộc [prop, state] đã thay đổi.

Sử dụng đối số dependencies của useEffect(), bạn kiểm soát thời điểm gọi side effect, độc lập với các chu kỳ hiển thị của component. Một lần nữa, đó là bản chất của hook useEffect().

Hãy cải thiện component Greet bằng cách sử dụng prop name trong tiêu đề của document:

import { useEffect } from 'react';
function Greet({ name }) {
  const message = `Hello, ${name}!`;
  useEffect(() => {
    document.title = `Greetings to ${name}`; 
  }, [name]);
  return <div>{message}</div>;
}

Prop name được đề cập trong đối số dependencies của useEffect (..., [name]). useEffect() hook chạy side effect sau lần hiển thị ban đầu và chỉ khi hiển thị sau khi giá trị name thay đổi.

5, Xóa Side-effect

Một số side-effect cần được xóa: đóng socket, xóa bộ hẹn giờ.

Nếu callback của useEffect(callback, deps)trả về một hàm, thì useEffect () coi đây là xóa side effect:

Phần xóa side effect (dọn dẹp) hoạt động theo cách sau:

A) Sau khi rendering ban đầu, useEffect() gọi hàm callback có side effect. chức năng dọn dẹp không được gọi.

B) Trong các lần hiển thị sau đó, trước khi gọi side effect của callback tiếp theo, useEffect() gọi hàm dọn dẹp từ lần thực thi side effect trước đó (để dọn dẹp mọi thứ sau side effect trước đó), sau đó chạy side effect hiện tại.

C) Cuối cùng, sau khi component được loại bỏ khỏi DOM useEffect() gọi hàm dọn dẹp từ side effect mới nhất.

Hãy xem một ví dụ khi dọn dẹp side effect là hữu ích.

Component sau <RepeatMessage message = "My Message" /> có props là message. Sau đó, cứ sau 2 giây, props message được ghi vào console:

import { useEffect } from 'react';
function RepeatMessage({ message }) {
  useEffect(() => {
    setInterval(() => {
      console.log(message);
    }, 2000);
  }, [message]);
  return <div>I'm logging to console "{message}"</div>;
}

Ở demo nhập text. Console ghi lại 2 giây một lần bất kỳ message nào đã từng được nhập từ input. Tuy nhiên, bạn chỉ cần log ra message mới nhất.

Đó là trường hợp để dọn dẹp side effect: hủy bộ hẹn giờ trước đó khi bắt đầu bộ hẹn giờ mới. Hãy trả về một chức năng dọn dẹp dừng bộ đếm thời gian trước đó:

import { useEffect } from 'react';
function RepeatMessage({ message }) {
  useEffect(() => {
    const id = setInterval(() => {
      console.log(message);
    }, 2000);
    return () => {
      clearInterval(id);
    };
  }, [message]);
  return <div>I'm logging to console "{message}"</div>;
}

Thử trên demo, nhập vào ô input chỉ message mới nhất được log ra.

6. Ứng dụng của useEffect

6.1 Fetching data

useEffect() có thể thực hiện side effect là lấy dữ liệu.

Component FetchEmployees lấy danh sách nhân viên:

import { useEffect, useState } from 'react';
function FetchEmployees() {
  const [employees, setEmployees] = useState([]);
  useEffect(() => {
    async function fetchEmployees() {
      const response = await fetch('/employees');
      const fetchedEmployees = await response.json(response);
      setEmployees(fetchedEmployees);
    }
    fetchEmployees();
  }, []);
  return (
    <div>
      {employees.map(name => <div>{name}</div>)}
    </div>
  );
}

useEffect() bắt đầu lấy data từ request bằng cách gọi hàm bất đồng bộ fetchEmployees() sau lần khởi tạo ban đầu.

Khi request hoàn tất, setEmployees(fetchedEmployees) sẽ cập nhật state của nhân viên với danh sách nhân viên vừa lấy được.

Lưu ý rằng đối số callback của useEffect(callback) không thể là một hàm bất đồng bộ. Nhưng bạn luôn có thể định nghĩa và sau đó gọi một hàm bất đồng bộ bên trong chính callback:

function FetchEmployees() {
  const [employees, setEmployees] = useState([]);
  useEffect(() => {  // <--- CANNOT be an async function
    async function fetchEmployees() {
      // ...
    }
    fetchEmployees(); // <--- But CAN invoke async functions
  }, []);
  // ...
}

Để get data từ props hoặc state, chỉ cần chỉ ra dependencies trong đối số dependencies : useEffect (fetchSideEffect, [prop, stateValue]).

7. Kết luận

useEffect(callback, dependencies) là hook quản lý các side effect trong các component chức năng. đối số callback là một hàm để đặt logic của side effect. dependencies là danh sách các phụ thuộc của side effect của bạn: là props hoặc state.

useEffect(callback, dependencies) gọi lại sau khi gắn vào DOM lần đầu và trong các lần rendering sau đó, nếu bất kỳ giá trị nào bên trong các dependencies thay đổi.

Error Boundaries

mikebui — Mon, 16 May 2022 01:59:14 +0000

Bài viết dịch từ:
https://reactjs.org/docs/error-boundaries.html

Trước đây, các lỗi JavaScript bên trong các component thường làm hỏng trạng thái bên trong của React và khiến nó phát ra các lỗi khó hiểu trong lần hiển thị tiếp theo. Những lỗi này gây ra do lỗi trước đó trong code gây ra, nhưng React không cung cấp cách xử lý chúng một cách linh hoạt trong các component và không thể khôi phục chúng.

Giới thiệu Error Boundaries

Lỗi JavaScript trong một phần của giao diện người dùng không nên làm hỏng toàn bộ ứng dụng. Để giải quyết vấn đề này cho người dùng React, React 16 giới thiệu một khái niệm mới về “Error Boundaries”.

Error Boundaries là các component React bắt lỗi JavaScript ở bất kỳ đâu trong cây component con của chúng, ghi lại các lỗi đó và hiển thị giao diện người dùng dự phòng thay vì cây component bị lỗi. Error Boundaries bắt lỗi trong quá trình rendering, trong các phương thức vòng đời và trong các hàm tạo của toàn bộ cây bên dưới chúng.

Error Boundaries không bắt lỗi đối với:

Event handlers (learn more)

Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)

Server side rendering

Errors thrown in the error boundary itself (rather than its children)

Class component sẽ trở thành error boundary nếu nó định nghĩa một trong hai (hoặc cả hai) phương thức vòng đời static getDerivedStateFromError () hoặc componentDidCatch (). Sử dụng static getDerivedStateFromError () để hiển thị một giao diện người dùng dự phòng sau khi một lỗi được đưa ra. Sử dụng componentDidCatch () để ghi thông tin lỗi.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Sau đó, bạn có thể sử dụng nó như một component thông thường:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Các error boundaries hoạt động giống như JavaScript catch{}, nhưng đối với component. Chỉ các class component mới có thể là error boundaries. Trong thực tế, hầu hết thời gian bạn sẽ muốn khai báo ErrorBoundary một lần và sử dụng nó trong toàn bộ ứng dụng của mình.

Lưu ý rằng Error Boundaries chỉ bắt lỗi trong các component bên dưới chúng trong cây. Error Boundary không thể tự bắt lỗi. Nếu một Error Boundary không thể hiển thị thông báo lỗi, lỗi sẽ lan truyền đến Error Boundary gần nhất phía trên nó. Điều này cũng tương tự như cách khối catch {} hoạt động trong JavaScript.

Demo

Example

Nơi đặt Error Boundaries

Mức độ chi tiết của Error Boundary là tùy thuộc vào bạn. Bạn có thể bao bọc các component tuyến cấp cao nhất để hiển thị thông báo "Đã xảy ra sự cố" cho người dùng, giống như cách phía máy chủ thường xử lý các sự cố. Bạn cũng có thể bao bọc các widget riêng lẻ trong một Error Boundary để bảo vệ chúng khỏi làm hỏng phần còn lại của ứng dụng.

Điều này là tùy vào người viết, có thể đặt ở tầng trên cùng của ứng dụng để bắt toàn bộ lỗi, cũng có thể đặt sâu hơn để bắt lỗi cho cụ thể.

Hành vi mới cho các lỗi chưa xảy ra

Sự thay đổi này có một hàm ý quan trọng. Kể từ React 16, các lỗi không nằm trong bất kỳ Error Boundaries nào sẽ dẫn đến việc ngắt kết nối toàn bộ cây component React.

Chúng tôi đã tranh luận về quyết định này, nhưng theo kinh nghiệm của chúng tôi, việc để lại giao diện người dùng bị hỏng tại chỗ còn tệ hơn là xóa bỏ hoàn toàn. Ví dụ: trong một sản phẩm như Messenger, việc hiển thị giao diện người dùng bị hỏng có thể dẫn đến việc ai đó gửi tin nhắn đến nhầm người. Tương tự, ứng dụng thanh toán hiển thị sai số tiền còn tệ hơn là không hiển thị gì.

Thay đổi này có nghĩa là khi bạn chuyển sang React 16, bạn có thể sẽ phát hiện ra các lỗi hiện có trong ứng dụng của mình mà trước đây chưa được chú ý. Thêm Error Boundaries cho phép bạn cung cấp trải nghiệm người dùng tốt hơn khi có sự cố.

Ví dụ: Facebook Messenger bọc nội dung của sidebar, bảng thông tin, nhật ký cuộc trò chuyện và đầu vào tin nhắn thành các Error Boundaries riêng biệt. Nếu một số thành phần trong một trong các khu vực giao diện người dùng này gặp sự cố, phần còn lại của chúng vẫn tương tác.

Chúng tôi cũng khuyến khích bạn sử dụng các dịch vụ báo cáo lỗi JS (hoặc xây dựng của riêng bạn) để bạn có thể tìm hiểu về các trường hợp ngoại lệ không được khắc phục khi chúng xảy ra trong quá trình sản xuất và khắc phục chúng.

Component Stack Traces

React 16 in tất cả các lỗi xảy ra trong quá trình hiển thị cho console ở môi trường phát triển. Ngoài thông báo lỗi và JavaScript stack, nó cũng cung cấp component stack traces. Bây giờ bạn có thể thấy vị trí chính xác lỗi trong cây component:

Bạn cũng có thể xem tên tệp và số dòng trong component stack trace. Điều này hoạt động theo mặc định trong Create React App:

Nếu không sử dụng Create React App, bạn có thể thêm plugin này theo cách thủ công vào cấu hình Babel của mình. Lưu ý rằng nó chỉ dành cho mục đích development và phải bị vô hiệu hóa trong production.

Thế còn try/catch

try / catch dùng cho imperative code

try {
  showButton();
} catch (error) {
  // ...
}

Tuy nhiên, các component React là declarative và chỉ định những gì sẽ được hiển thị:

<Button />

Tham khảo: declarative vs imperative

Thế còn Event Handlers

Error Boundary không bắt lỗi bên trong Event Handlers.

React không cần Error Boundary để khôi phục từ lỗi trong Event Handlers. Không giống như phương thức render và phương thức lifecycle, Event Handlers không xảy ra trong quá trình rendering. Vì vậy, nếu event handler ném ra lỗi, React vẫn biết những gì sẽ hiển thị trên màn hình.

Nếu bạn cần bắt lỗi bên trong Event Handlers, hãy sử dụng câu lệnh try / catch JavaScript thông thường:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // Do something that could throw
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

Lưu ý rằng ví dụ trên thể hiện hành vi JavaScript thông thường và không sử dụng các Error Boundary.

Dự án để học Error Boundary: Github

Cách đặt khoảng thời gian trong React (setInterval)(có ví dụ)

mikebui — Sun, 15 May 2022 15:02:54 +0000

Bài viết được dịch từ:
https://devtrium.com/posts/set-interval-react

Sử dụng setInterval cho phép bạn thực thi một hàm trong những khoảng thời gian cụ thể. Nó thường rất hữu ích trong các ứng dụng React, chẳng hạn như để kiểm tra một điều kiện thường xuyên hoặc lấy dữ liệu thường xuyên.

Code

Đây là cách bạn sử dụng setInterval trong một component:

· · ·
useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will be called every 2 seconds');
  }, 2000);

  return () => clearInterval(interval);
}, []);
· · ·

Đọc phần còn lại của bài viết nếu bạn muốn lời giải thích về những gì đang xảy ra ở trên!

Cách hoạt động của `setInterval`

Có ba câu hỏi được đặt ra:

Tại sao setInterval được gọi bên trong hook useEffect?
Tại sao gọi hàm setInterval lại trông như vậy?
Tại sao chúng ta trả lại một cái gì đó từ hook useEffect?

1. Tại sao `setInterval` được gọi bên trong hook `useEffect`?

Theo tài liệu React, "Effect Hook cho phép bạn thực hiện các side-effect trong các thành phần chức năng". Và đó chính xác là những gì chúng tôi muốn làm ở đây.

Bạn có thể hỏi điều gì sẽ xảy ra nếu chúng ta khai báo nó trong chính component. Hãy xem điều đó với các ví dụ nổi tiếng nhất, một bộ đếm!

Giả sử chúng ta muốn một bộ đếm bắt đầu từ 0 và tăng lên 1 sau mỗi giây.

Cách triển khai bộ đếm này bằng cách sử dụng code ở đầu bài viết như sau:

import { useState, useEffect } from 'react';

export default function ExampleCounter() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
    </div>
  );
}

Một functional component khá đơn giản giữ state trong bộ đếm. State được tăng lên mỗi giây nhờ setInterval được xác định trong useEffect.

Bây giờ điều gì sẽ xảy ra nếu tôi loại bỏ hoàn toàn useEffect?

import { useState } from 'react';

export default function ExampleCounter() {
  const [counter, setCounter] = useState(0);

  setInterval(() => {
    setCounter((prevCounter) => prevCounter + 1);
  }, 1000);

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
    </div>
  );
}

Chà, điều này xảy ra:

Đúng là một bộ đếm điên rồ! bạn có thể đoán được chuyện gì đã xảy ra không?

Vì setInterval được định nghĩa trực tiếp bên trong functional component, nó được gọi mỗi khi component render! Và component render khi nào? Khi state thay đổi! Và khi nào thì state thay đổi? Khi interval callback được gọi.

Vậy nên để side-effect trong useEffect nếu bạn không muốn side-effect bị gọi mỗi lần component renders.

2. Tại sao gọi hàm `setInterval` lại trông như vậy?

Điều này khá dễ dàng: nó chỉ đơn giản là (sử dụng API web của setInterval)[https://developer.mozilla.org/en-US/docs/Web/API/setInterval]. Có một số chức năng được định nghĩa cho bạn trên web mà bạn có thể trực tiếp sử dụng. setInterval là một trong số đó.

Hàm nhận hai đối số:

Đầu tiên là một hàm sẽ được gọi trong các khoảng thời gian xác định.
Thứ hai là khoảng thời gian, tính bằng mili giây.

3. Tại sao chúng ta trả lại một cái gì đó từ hook `useEffect`?

Xin nhắc lại, khi chúng ta muốn thực hiện một số hành động khi một component bị hủy, chúng ta xác định nó trong một hàm được trả về trong useEffect.

Một trường hợp sử dụng rất phổ biến của điều này là xóa các effect như khoảng thời gian.

Tại sao chúng ta cần xóa các khoảng thời gian? Vâng, hãy tưởng tượng chúng ta không xóa nó. Component bị hủy, nhưng khoảng thời gian vẫn chạy! Và nó đang cố gắng thiết lập một state không tồn tại nữa.

Bản thân đây không phải là vấn đề quá lớn (React sẽ bỏ qua nó), nhưng nó vẫn là một điểm rò rỉ bộ nhớ. Bây giờ hãy tưởng tượng thành phần được tạo và phá hủy lặp đi lặp lại. Bạn có thể nhận được hàng tá setIntervals đang chạy! Tổng hợp lại, điều này có thể làm chậm ứng dụng của bạn một cách nghiêm trọng.

Đó là lý do tại sao API web cung cấp cho chúng ta setInterval cũng cung cấp cho chúng tôi một hàm clearInterval. Và đó là lý do tại sao bạn gọi nó trong câu lệnh trả về useEffect!

Hướng dẫn hoàn chỉnh để sử dụngRef () và Refs trong React

mikebui — Sun, 15 May 2022 11:40:52 +0000

Bài viết dịch từ trang:
https://dmitripavlutin.com/react-useref-guide/

Trong bài đăng này, bạn sẽ học cách sử dụng hook React.useRef () để tạo các giá trị có thể thay đổi liên tục (còn được gọi là tham chiếu hoặc refs), cũng như truy cập các phần tử DOM.

1. Mutable values

useRef (initialValue) là một hook React tích hợp sẵn chấp nhận một đối số làm giá trị ban đầu và trả về một tham chiếu (còn gọi là ref). Ref là một đối tượng có thuộc tính đặc biệt là current.

import { useRef } from 'react';
function MyComponent() {
  const reference = useRef(initialValue);
  const someHandler = () => {
    // Access reference value:
    const value = reference.current;
    // Update reference value:
    reference.current = newValue;
  };
  // ...
}

reference.current truy cập vào giá trị tham chiếu và reference.current = newValue cập nhật giá trị tham chiếu. Khá đơn giản.

Có 2 quy tắc cần nhớ về references:

Giá trị của tham chiếu được duy trì (giữ nguyên) giữa các lần re-rendering component;
Cập nhật tham chiếu không làm re-rendering component.

Bây giờ, chúng ta hãy xem cách sử dụng useRef () trong thực tế.

1.1 Trường hợp sử dụng: ghi nhật ký button khi click

Component LogButtonClicks sử dụng một tham chiếu để lưu trữ số lần ấn vào button:

import { useRef } from 'react';
function LogButtonClicks() {
  const countRef = useRef(0);

  const handle = () => {
    countRef.current++;
    console.log(`Clicked ${countRef.current} times`);
  };
  console.log('I rendered!');
  return <button onClick={handle}>Click me</button>;
}

const countRef = useRef (0) tạo một tham chiếu countRef được khởi tạo bằng 0.

Khi button được ấn, hàm xử lý được gọi và giá trị tham chiếu được tăng lên: countRef.current ++. Giá trị tham chiếu được ghi vào console.

Cập nhật giá trị tham chiếu countRef.current ++ không làm component re-rendering. Điều này được chứng minh bằng thực tế là 'I rendered!' được ghi vào console chỉ một lần, ở lần hiển thị đầu tiên và không có render nào xảy ra khi tham chiếu được cập nhật.

Bây giờ có một câu hỏi: sự khác biệt chính giữa tham chiếu và state là gì?

Khác biệt giữa tham chiếu và state

Hãy sử dụng lại component LogButtonClicks từ phần trước, nhưng lần này sử dụng hook useState () để đếm số lần ấn vào button:

import { useState } from 'react';
function LogButtonClicks() {
  const [count, setCount] = useState(0);

  const handle = () => {
    const updatedCount = count + 1;
    console.log(`Clicked ${updatedCount} times`);
    setCount(updatedCount);
  };
  console.log('I rendered!');
  return <button onClick={handle}>Click me</button>;
}

Ở link trên ấn vào button. Mỗi lần bạn ấn vào, bạn sẽ thấy trong console có thông báo 'I rendered!' - nghĩa là mỗi khi state được cập nhật, component sẽ re-render.

Vì vậy, 2 điểm khác biệt chính giữa tham chiếu và trạng thái:

Cập nhật tham chiếu không làm re-render, trong khi cập nhật state làm cho component re-render;
Cập nhật tham chiếu là đồng bộ (giá trị tham chiếu được cập nhật có sẵn ngay lập tức), trong khi cập nhật state là không đồng bộ (state được cập nhật sau khi re-render).

Từ một quan điểm cao hơn, các tham chiếu lưu trữ dữ liệu cơ sở hạ tầng về side-effect, trong khi state lưu trữ thông tin được hiển thị trực tiếp trên màn hình.

1.2 Trường hợp sử dụng: triển khai đồng hồ bấm giờ

Bạn có thể lưu trữ bên trong một cơ sở hạ tầng dữ liệu tham khảo về các side-effect. Ví dụ: bạn có thể lưu trữ vào các con trỏ tham chiếu: timer ids, socket ids, etc.

Component Stopwatch sử dụng chức năng hẹn giờ setInterval(gọi lại, thời gian) để tăng số đếm của đồng hồ bấm giờ mỗi giây. Id bộ hẹn giờ được lưu trữ trong timerIdRef:

import { useRef, useState, useEffect } from 'react';
function Stopwatch() {
  const timerIdRef = useRef(0);
  const [count, setCount] = useState(0);
  const startHandler = () => {
    if (timerIdRef.current) { return; }
    timerIdRef.current = setInterval(() => setCount(c => c+1), 1000);
  };
  const stopHandler = () => {
    clearInterval(timerIdRef.current);
    timerIdRef.current = 0;
  };
  useEffect(() => {
    return () => clearInterval(timerIdRef.current);
  }, []);
  return (
    <div>
      <div>Timer: {count}s</div>
      <div>
        <button onClick={startHandler}>Start</button>
        <button onClick={stopHandler}>Stop</button>
      </div>
    </div>
  );
}

startHandler (), được gọi khi ấn vào button Start, khởi động bộ hẹn giờ và lưu id bộ hẹn giờ trong tham chiếu timerIdRef.current = setInterval (...).

Để dừng đồng hồ bấm giờ, người dùng ấn vào button Stop. Trình xử lý button Stop stopHandler () truy cập id bộ hẹn giờ từ tham chiếu và dừng bộ hẹn giờ clearInterval(timerIdRef.current).

Ngoài ra, nếu component unmount khi đồng hồ bấm giờ đang hoạt động, chức năng dọn dẹp của useEffect () cũng sẽ dừng đồng hồ bấm giờ.

Trong ví dụ về đồng hồ bấm giờ, tham chiếu được sử dụng để lưu trữ dữ liệu cơ sở hạ tầng - id bộ hẹn giờ hoạt động.

2. Truy cập các phần tử DOM

Một ứng dụng hữu ích khác của hook useRef () là truy cập các phần tử DOM. Điều này được thực hiện trong 3 bước:

Xác định tham chiếu để truy cập phần tử const elementRef = useRef ();
Gán tham chiếu đến thuộc tính ref của phần tử: <div ref = {elementRef}> </div>;
Sau khi gắn kết, elementRef.current trỏ đến phần tử DOM.

import { useRef, useEffect } from 'react';
function AccessingElement() {
  const elementRef = useRef();
   useEffect(() => {
    const divElement = elementRef.current;
    console.log(divElement); // logs <div>I'm an element</div>
  }, []);
  return (
    <div ref={elementRef}>
      I'm an element
    </div>
  );
}

2.1 Trường hợp sử dụng: focus vào input

Ví dụ, bạn sẽ cần truy cập các phần tử DOM để focus vào input khi component mount.

Để làm cho nó hoạt động, bạn sẽ cần tạo một tham chiếu đến input, gán tham chiếu cho thuộc tính ref và sau khi gắn kết, hãy gọi phương thức đặc biệt element.focus () trên phần tử.

Đây là cách triển khai có thể có của component <InputFocus>:

import { useRef, useEffect } from 'react';
function InputFocus() {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (
    <input 
      ref={inputRef} 
      type="text" 
    />
  );
}

const inputRef = useRef () tạo một tham chiếu để giữ phần tử input.

inputRef sau đó được gán cho thuộc tính ref của input: <input ref = {inputRef} type = "text" />.

React sau đó, sau khi mounting, đặt inputRef.current là phần tử input. Bây giờ bạn có thể đặt focus qua: inputRef.current.focus ().

Tham chiếu không có giá trị khi hiển thị ban đầu

Trong quá trình hiển thị ban đầu, tham chiếu được cho là giữ phần tử DOM là rỗng:

import { useRef, useEffect } from 'react';
function InputFocus() {
  const inputRef = useRef();
  useEffect(() => {
    // Logs `HTMLInputElement` 
    console.log(inputRef.current);
    inputRef.current.focus();
  }, []);
  // Logs `undefined` during initial rendering
  console.log(inputRef.current);
  return <input ref={inputRef} type="text" />;
}

Trong quá trình hiển thị ban đầu, React vẫn xác định đâu là đầu ra của component, vì vậy chưa có cấu trúc DOM nào được tạo. Đó là lý do tại sao inputRef.current đánh giá là không xác định trong quá trình hiển thị ban đầu.

useEffect (callback, []) hook gọi lại ngay sau khi mount, khi phần tử input đã được tạo trong DOM.

hàm callback của useEffect (callback, []) là nơi thích hợp để truy cập inputRef.current vì nó được đảm bảo rằng DOM được xây dựng.

3. Hạn chế cập nhật refs

Phạm vi chức năng của component chức năng nên tính toán đầu ra hoặc gọi các hook.

Đó là lý do tại sao việc cập nhật một tham chiếu (cũng như cập nhật state) không nên được thực hiện bên trong phạm vi ngay lập tức của chức năng của component.

Tham chiếu phải được cập nhật bên trong callback useEffect () hoặc bên trong các handlers (event handlers, timer handlers, etc).

import { useRef, useEffect } from 'react';
function MyComponent({ prop }) {
  const myRef = useRef(0);
  useEffect(() => {
    myRef.current++; // Good!
    setTimeout(() => {
      myRef.current++; // Good!
    }, 1000);
  }, []);
  const handler = () => {
    myRef.current++; // Good!
  };
  myRef.current++; // Bad!
  if (prop) {
    myRef.current++; // Bad!
  }
  return <button onClick={handler}>My button</button>;
}

4. Tóm tắt

useRef () hook tạo ra các tham chiếu.

Gọi const reference = useRef(initialValue) với initialValue trả về một đối tượng đặc biệt có tên là tham chiếu. Đối tượng tham chiếu có thuộc tính current: bạn có thể sử dụng thuộc tính này để đọc giá trị tham chiếu reference.current hoặc cập nhật tham chiếu reference.current = newValue.

Giữa các lần component re-rendering, giá trị của tham chiếu là không đổi.

Cập nhật tham chiếu, trái với cập nhật state, không làm component re-rendering.

Ref cũng có thể truy cập các phần tử DOM. Gán tham chiếu đến thuộc tính ref của phần tử bạn muốn truy cập: <div ref = {reference}> Element</div> - và phần tử sẽ có tại reference.current.

Nghệ thuật dựng component trong thực tế-Phần 4

mikebui — Sat, 14 May 2022 22:46:12 +0000

Bài viết được dịch từ:
https://ishadeed.com/article/building-real-life-components/

Nội dung từ phải sang trái

Trong trường hợp bố cục là LTR (Từ trái sang phải) và nội dung tin nhắn bằng tiếng Ả Rập, hướng của nội dung tin nhắn phải là RTL (Từ phải sang trái).

Vì phần tử .card__content__start là một flex container, các item con sẽ tự động lật tùy thuộc vào direction của component hoặc phần tử gốc (root element). Điều này có thể được thêm một cách chủ động tùy thuộc vào ngôn ngữ nội dung. (Chú ý: css direction)

<div class="card__content">
  <div class="card__content__start" style="direction: rtl"></div>
  <div class="card__content__end"></div>
</div>

Lật component

Nếu người dùng chọn RTL (Từ phải sang trái) như tiếng Ả Rập cho toàn bộ giao diện người dùng, thì component sẽ được lật.

Vì flexbox được sử dụng để sắp xếp các mục, không cần thực hiện nhiều thao tác ngoại trừ việc lật margin.

/* LTR */
.card__content__end {
  margin-left: 12px;
}

/* LTR */
.card__content__end {
  margin-right: 12px;
}

Chi tiết về khả năng tiếp cận

Sử dụng bàn phím

Để xây dựng một sản phẩm hoạt động với hàng tỷ người dùng, nó phải hoàn toàn có thể truy cập được. Đối với component của bài viết này, tôi đã thử nghiệm trong Chrome và Firefox và nhận thấy các vấn đề sau:

Các kiểu tiêu điểm hoạt động tốt trong Chrome, nhưng trong Firefox, không có manh mối trực quan nào về chúng.
Menu tác vụ xuất hiện khi di chuột có thể đặt tiêu điểm trong Firefox và tôi không thể truy cập menu này bằng bàn phím trong Chrome.

Và để cung cấp cho bạn nhiều ngữ cảnh hơn, menu tác vụ sẽ xuất hiện khi di chuột. Tuy nhiên, là một người dùng bàn phím, tôi cũng mong đợi có thể truy cập nó qua bàn phím.

Rất tiếc, trong Chrome, tôi không thể truy cập menu tác vụ.

Danh sách cards

Trong danh sách card component, có một số role ARIA được sử dụng. Danh sách là ở dạng grid và nó chứa các hàng. Mỗi hàng có thể có một hoặc nhiều ô.

<div role="grid">
  <div role="row">
    <div role="gridcell">
      <a href="#">
        <!-- The component lives here -->
      </a>
    </div>
  </div>
  <div role="row">
    <div role="gridcell">
      <a href="#">
        <!-- The component lives here -->
      </a>
    </div>
  </div>
</div>

Nhiều hình đại diện

Đối với trò chuyện nhóm, có nhiều hình đại diện cho các chỉ số được nhìn thấy. Trong trường hợp này, các hình đại diện được sắp xếp dưới dạng các ô của một hàng bằng cách sử dụng role ARIA.

<div role="grid">
  <div role="row">
    <!-- 1st avatar -->
    <div role="cell"></div>
    <!-- 2nd avatar -->
    <div role="cell"></div>
  </div>
</div>

Đây là bản demo trên Codepen. Nó không bao gồm tất cả các biến thể. Tôi chỉ đang thử nghiệm mọi thứ.

Kết luận

Xây dựng web bằng HTML & CSS không phải là một công việc dễ dàng và cũng không khó. Điểm tôi muốn đưa ra trong bài viết này là component đơn giản nhất bao gồm rất nhiều công việc. Nhân tiện, tất cả các giải thích ở trên chỉ thảo luận về HTML & CSS. Còn JavaScript thì sao? Đó là một câu chuyện khác.

Cách sử dụng Chrome Dev Tools để tìm các nút thắt về hiệu suất

mikebui — Sat, 14 May 2022 08:43:23 +0000

Bài viết dịch từ trang:
https://www.digitalocean.com/community/tutorials/how-to-use-chrome-dev-tools-to-find-performance-bottlenecks

Bài viết này viết về tab Audit hiện đã được thay bằng tab LightHouse. Do mình không tìm được bài viết chi tiết về cách sử dụng LightHouse nên mình sẽ dịch bài này. Audit và LightHouse khá là giống nhau nên các bạn có thể tham khảo.

Giới thiệu

Khi một người tiến bộ trong sự nghiệp phát triển phần mềm, có thể nảy sinh những mối quan tâm ngoài việc code. Trong thế giới phát triển web, không chỉ xây dựng phần mềm chức năng mà còn phải làm cho nó có hiệu suất cao để có thể liên tục mang lại trải nghiệm mong muốn trong khi vẫn sử dụng tài nguyên tối thiểu.

Thông thường, đây sẽ là một nhiệm vụ khá lớn vì người ta không thể đưa ra dự đoán về các thuộc tính tiêu thụ tài nguyên của một ứng dụng nếu không có các công cụ để mô phỏng và đo lường các thông số khác nhau.

Trong bài viết này, bạn sẽ khám phá một trong những công cụ sau: Chrome Dev Tools. Cụ thể, bạn sẽ học được tính tiện dụng của tab Audits và Performance trong việc đánh giá các ứng dụng web và phát hiện các vấn đề về hiệu suất.

Để làm cho bài kiểm tra này trở thành một bài kiểm tra thực tế, bạn sẽ thử nghiệm các kỹ thuật khác nhau để tìm ra các vấn đề về hiệu suất trên một trang web và giải quyết chúng. Hướng dẫn này khám phá trang web Scotch.io, nhưng các bước này có thể được áp dụng cho bất kỳ trang web nào.

Điều kiện tiên quyết

Cần cài đặt Google Chrome browser trước.

Bước 1 - Chuẩn bị trình duyệt

Khi cải thiện hiệu suất của một trang web hoặc ứng dụng web, có hai khía cạnh chính cần xem xét:

Hiệu suất tải
Hiệu suất thời gian chạy

Hướng dẫn này sẽ tập trung nhiều hơn vào Hiệu suất tải. Hiệu suất tải đề cập đến hiệu suất của trang khi nó đang tải. Mục tiêu chính là xác định các vấn đề về hiệu suất ảnh hưởng đến tốc độ ứng dụng và trải nghiệm người dùng tổng thể.

Để bắt đầu kiểm tra Hiệu suất tải, bạn sẽ bắt đầu bằng cách thiết lập kiểm tra (Audit).

Khởi chạy trình duyệt Chrome của bạn và mở một tab ở chế độ Ẩn danh bằng cách nhấn COMMAND + SHIFT + N trên macOS hoặc CTRL + SHIFT + N trên Windows hoặc Linux. Sau khi trình duyệt Ẩn danh được mở, hãy điều hướng đến trang web mà bạn muốn kiểm tra.

Tiếp theo, mở DevTools bằng cách nhấn COMMAND + OPTION + I trên macOS hoặc CTRL + SHIFT + I trên Windows hoặc Linux. Nếu bạn muốn thay đổi vị trí của bảng điều khiển DevTools, hãy nhấp vào ba chấm dọc trên thanh công cụ và thực hiện lựa chọn từ tùy chọn Dock Side.

Sau khi bạn hài lòng với vị trí bảng điều khiển, hãy chuyển sang tab Kiểm tra (Audits). Với sự trợ giúp của công cụ này, bạn sẽ tạo đường cơ sở để đo lường các thay đổi ứng dụng tiếp theo, cũng như nhận được thông tin chi tiết về những thay đổi nào sẽ cải thiện ứng dụng.

Lưu ý: Tab Kiểm tra có thể bị ẩn sau nút mũi tên Bảng khác (More Panels).

Mục tiêu chính của bạn ở đây là xác định các điểm nghẽn về hiệu suất trên trang Scotch.io và tối ưu hóa để có hiệu suất tốt hơn. Một nút thắt, trong kỹ thuật phần mềm, mô tả một tình huống mà dung lượng của một ứng dụng bị giới hạn bởi một component duy nhất.

Trong bước tiếp theo, bạn sẽ thực hiện kiểm tra để tìm kiếm các điểm nghẽn về hiệu suất.

Bước 2 - Thực hiện Kiểm tra

Khi thực hiện kiểm tra, bạn sẽ sử dụng một công cụ có tên là Lighthouse. Lighthouse là một công cụ tự động mã nguồn mở để cải thiện chất lượng của bất kỳ trang web nào trong các lĩnh vực hiệu suất, khả năng truy cập, các tính năng web và hơn thế nữa.

Trong tab Kiểm tra (Audits) của Chrome Dev Tools, hãy cấu hình công cụ kiểm tra (Audits). Cài đặt default như sau:

Thiết bị

Có tùy chọn chuyển đổi giữa Mobile và Desktop. Hơn một nửa lưu lượng truy cập web tính đến quý 3 năm 2018 là do Thiết bị di động tạo ra, vì vậy chúng tôi sẽ kiểm tra Scotch.io trên Mobile.

Kiểm tra (Audits)

Cài đặt này cho phép chúng ta chọn chất lượng của ứng dụng mà chúng tôi muốn đánh giá và cải thiện. Trong trường hợp này, hiệu suất là mối quan tâm chính, vì vậy bạn có thể bỏ chọn mọi tùy chọn khác.

Throttling

Tùy chọn này cho phép bạn mô phỏng các điều kiện duyệt web trên thiết bị di động. Bạn sẽ sử dụng tùy chọn Sim Simulated Fast 3G, 4x CPU Slowdown. Điều này thực sự sẽ không hiệu quả trong quá trình kiểm tra, nhưng nó sẽ giúp tính toán thời gian tải trang trong điều kiện thiết bị di động.

Xóa Lưu trữ

Điều này cho phép bạn xóa tất cả dữ liệu được lưu trong bộ nhớ cache và tài nguyên trang web thử nghiệm, để kiểm tra đối với khách lần đầu truy cập sẽ có trải nghiệm như nào, vì vậy hãy chọn tùy chọn này nếu nó chưa được chọn.

Sau khi định cấu hình kiểm tra như đã chỉ định ở trên, hãy ấn Generate report và đợi trong khi Audit chuẩn bị báo cáo chi tiết về hiệu suất của trang web.

Bước 3 - Phân tích Báo cáo đánh giá

Sau khi hoàn thành kiểm tra, báo cáo sẽ có dạng như sau:

Con số trong một vòng tròn ở trên cùng bên phải cho biết điểm hiệu suất tổng thể của trang web trên thang điểm từ 1–100. Chúng ta hiện có 55, điều này cho thấy rằng có một cơ hội để cải thiện cùng với các đề xuất được cung cấp để tăng điểm số và hiệu suất. Hãy chia báo cáo thành các phần và phân tích chúng riêng lẻ.

Trong phần Metrics, bạn sẽ tìm thấy thông tin chi tiết định lượng về các khía cạnh khác nhau về hiệu suất của trang web:

Ngay bên dưới phần Metrics là một nhóm ảnh chụp màn hình hiển thị các trạng thái giao diện người dùng khác nhau của trang từ thời điểm truy vấn ban đầu cho đến khi tải hoàn toàn:

Phần Diagnostics cung cấp cho bạn thông tin bổ sung về hiệu suất, thường chỉ ra các yếu tố xác định thời gian tải của trang web:

Cuối cùng, phần Audits đạt yêu cầu nêu bật các kiểm tra hiệu suất đã được trang web vượt qua:

Với bản báo cáo, bạn biết những vấn đề nào có thể cần được giải quyết.

Bước 4 - Giải quyết vấn đề trong phần Metrics

Trong ví dụ này, năm vấn đề về hiệu suất đã được đánh dấu. Trong bước này, chúng tôi sẽ khám phá các bản sửa lỗi có thể có:

First Meaningful Paint

First Meaningful Paint cho bạn biết khi nào nội dung chính của trang nhìn thấy được. Theo đánh giá, bạn sẽ mất khoảng 3,4 giây trước khi xem nội dung chính. Điều này có thể được xác nhận bằng cách nhấp vào button View Trace. Thao tác này sẽ đưa bạn đến tab Performance, nơi bạn có thể xem qua các trạng thái giao diện người dùng khác nhau trong thời gian tải để xác nhận điều gì xảy ra tại từng thời điểm cụ thể.

Lưu ý rằng đó là lúc nội dung trang được hiển thị.

Để cải thiện điều này, chúng tôi phải tối ưu hóa đường dẫn hiển thị quan trọng của trang / ứng dụng tổng thể. Điều này có nghĩa là chúng ta ưu tiên hiển thị nội dung theo mong muốn của người dùng nhằm tạo ra trải nghiệm tốt hơn và cải thiện hiệu suất. Điều này có thể được thực hiện bằng cách giảm số lượng tài nguyên quan trọng, độ dài đường dẫn quan trọng và số byte quan trọng.

Speed Index

Speed Index cho biết nội dung trang được hiển thị nhanh như thế nào. Quá trình này mất khoảng 7,2 giây như được hiển thị trên tab hiệu suất:

Một cách để khắc phục điều này, giống như trong số liệu đã kiểm tra trước đó, là tối ưu hóa đường dẫn hiển thị quan trọng. Cách thứ hai là tối ưu hóa hiệu quả nội dung. Điều này liên quan đến việc loại bỏ các bản tải xuống không cần thiết theo cách thủ công, tối ưu hóa mã hóa truyền tải thông qua nén và lưu vào bộ nhớ đệm bất cứ khi nào có thể để ngăn tải lại các tài nguyên không thay đổi.

First CPU Idle

Còn được gọi là First Interactive, First CPU Idle cho bạn biết khi nào trang trở nên tương tác tối thiểu (CPU không hoạt động đủ để xử lý thông tin nhập của người dùng, như nhấp chuột, vuốt, v.v.). Từ quá trình kiểm tra, quá trình này mất khoảng 6,5 giây. Giảm giá trị này xuống mức tối thiểu luôn tốt hơn:

Time to Interactive

Time to Interactive cho biết thời gian cần thiết để trang có thể tương tác hoàn toàn. Quá trình kiểm tra trong ví dụ này cho thấy 6,9 giây cho số liệu này. Tương tác trong ngữ cảnh này mô tả điểm mà:

Trang đã hiển thị nội dung hữu ích.
Trình xử lý sự kiện được gán cho hầu hết các phần tử hiển thị trên trang.
Trang phản hồi các tương tác của người dùng trong vòng 50 mili giây.

Để khắc phục điều này, bạn cần loại bỏ những công việc JavaScript không cần thiết xảy ra trong quá trình tải trang. Điều này thường có thể đạt được bằng cách code splitting và lazy loading (Ai làm React nhớ cho cái này vào nhé), nén, rút gọn và bằng cách xóa code không sử dụng (bảo sao phải cài eslint) và bộ nhớ đệm không sử dụng.

Estimated Input Latency

Estimated Input Latency mô tả khả năng đáp ứng của ứng dụng đối với đầu vào của người dùng. Quá trình kiểm tra ghi lại khoảng 170 mili giây trên số liệu này. Các ứng dụng thường có 100 mili giây để phản hồi thông tin nhập của người dùng, tuy nhiên, mục tiêu cho Lighthouse là 50 mili giây. Lý do cho sự chênh lệch này là do Lighthouse sử dụng chỉ số proxy, là tính khả dụng của luồng chính để đánh giá chỉ số này thay vì đo lường trực tiếp.

Sau khi mất nhiều thời gian hơn thời gian quy định, ứng dụng có thể bị coi là chậm.

Để cải thiện số liệu này, bạn có thể sử dụng service worker thực hiện một số tính toán, để giải phóng luồng chính. Một biện pháp hữu ích khác là cấu trúc lại CSS selectors để đảm bảo chúng thực hiện ít phép tính hơn.

Bước 5 - Giải quyết các vấn đề trong phần Opportunities

Phần Opportunities liệt kê các tối ưu hóa có thể cải thiện hiệu suất:

Thông thường, khi các trang web tải, chúng sẽ kết nối với các nguồn khác (server) để nhận hoặc gửi dữ liệu. Để cải thiện hiệu suất như trong trường hợp này, cách tốt nhất là thông báo cho trình duyệt để thiết lập kết nối với các server như vậy sớm hơn trong quá trình hiển thị, do đó cắt giảm lượng thời gian chờ giải quyết các tra cứu DNS, chuyển hướng và một số lần quay lại và hơn thế nữa cho đến khi khách hàng nhận được phản hồi.

Để khắc phục điều này, bạn có thể thông báo cho trình duyệt về ý định sử dụng các tài nguyên đó bằng cách thêm thuộc tính rel vào các thẻ liên kết như được hiển thị bên dưới:

<link rel="preconnect" href="https://scotchresources.com">

Trên các kết nối an toàn, quá trình này vẫn có thể mất một chút thời gian, vì vậy nó phải được sử dụng trong vòng 10 giây, nếu không trình duyệt sẽ tự động đóng kết nối và tất cả công việc kết nối ban đầu sẽ trở nên lãng phí.

Nghệ thuật dựng component trong thực tế-Phần 3

mikebui — Fri, 13 May 2022 09:03:02 +0000

Bài viết được dịch từ:
https://ishadeed.com/article/building-real-life-components/

Nhiều hình đại diện trong trò chuyện nhóm

Trong trường hợp trò chuyện với nhiều người, khu vực hình đại diện sẽ có hai hình đại diện với mỗi hình đại diện được đặt lần lượt ở trên cùng bên phải và dưới cùng bên trái.

Để giữ cho một hình đại diện và nhiều hình đại diện được căn chỉnh, chúng ta cần đặt một kích thước cố định cho thẻ cha chứa nhiều hình đại diện.

.card__avatar {
  width: 56px;
  height: 56px;
}

Biến thể này yêu cầu thay đổi HTML, xem đoạn code HTML dưới.

<div class="card__avatar card__avatar--multiple">
  <svg
    class="avatar avatar-1"
    role="none"
    style="height: 36px; width: 36px"
  ></svg>
  <svg
    class="avatar avatar-2"
    role="none"
    style="height: 36px; width: 36px"
  ></svg>
  <div class="badge"></div>
</div>

.card__avatar--multiple {
  position: relative;
  width: 56px;
  height: 56px;
}

.card__avatar--multiple .avatar {
  position: absolute;
}

.card__avatar--multiple .avatar-1 {
  right: 0;
  top: 0;
}

.card__avatar--multiple .avatar-2 {
  left: 0;
  bottom: 0;
}

.card__avatar--multiple .badge {
  right: 6px;
  bottom: 6px;
}

Nội dung

Khu vực này là nơi người dùng có thể nhìn thấy tên của người mà họ đang trò chuyện và nội dung của tin nhắn hoặc hành động (không rõ lắm chắc là status).

Tôi có thể tưởng tượng phần code HTML này được chia thành hai phần, một phần cho nội dung văn bản (tên, tin nhắn hoặc hành động) và phần thứ hai cho chỉ báo ở phía bên phải (tin nhắn mới, đã xem, đã tắt tiếng, đã gửi).

Phần đầu tiên

Hãy cùng khám phá code HTML cho khu vực nội dung.

<div class="card__content">
  <div class="card__content__start">
    <h3>Ahmad Shadeed</h3>
    <div class="row">
      <p>You: Thanks, sounds good. What about doing a webinar, too?</p>
      <span class="separator">.</span>
      <time>8hr</time>
    </div>
  </div>
  <div class="card__content__end">
    <!-- The indicator (new message, seen, muted, sent) -->
  </div>
</div>

.card__content {
  display: flex;
  flex: 1;
}

.card__content__start {
  display: flex;
  flex: 1;
}

.card__content__start .row {
  display: flex;
  align-items: center;
}

.card__content__end {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
}

.separator {
  margin-left: 4px;
  margin-right: 4px;
}

Với phần trên, khu vực nội dung sẽ giống như bên dưới (Đây là ảnh chụp màn hình được chụp từ Firefox).

Độ dài của tên hoặc tin nhắn có thể rất dài. Quan trọng là phải tính đến điều đó ngay từ đầu. Trước tiên, chúng ta hãy khám phá phương pháp "flow as you like".

Trong hình trên, nội dung thẻ thứ hai bao gồm nhiều dòng. Điều này có vẻ không tốt cho một component. Để tránh điều đó, đây là những thứ cần làm:

Đặt min-width: 0 trên các item con (dùng flex cho parent component). Vì sao? Tôi sẽ cho bạn biết sau đây.
Cắt bớt văn bản bằng cách sử dụng các thuộc tính overflow, white-space và text-overflow.

Tôi thêm code CSS cho phần Tên và ở thẻ p:

.card__content__start h3,
.card__content__start p {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Tuy nhiên, điều này không thể giải quyết vấn đề khi chúng ta đang sử dụng flexbox. Lưu ý kết quả sau khi áp dụng CSS ở trên:

Lý do là các flex items sẽ không thu nhỏ dưới kích thước nội dung tối thiểu của chúng. Để giải quyết vấn đề này, chúng ta cần đặt min-width: 0 trên các phần tử .card__content và card__content__start.

Phần thứ hai

Mỗi tin nhắn có một indicator (status) và chúng ta nên tính đến tất cả chúng. Đây là tất cả các indicator mà tôi biết. Có thể còn nhiều điều mà tôi không biết (Nếu có, vui lòng cho tôi biết).

Đối với phần này, chúng ta sẽ tập trung vào phần tử .card__content__end và nội dung bên trong của nó.

<div class="card__content">
  <div class="card__content__start">
    <!-- The name and message -->
  </div>
  <div class="card__content__end">
    <!-- The indicator (new message, seen, muted, sent) -->
  </div>
</div>

Bằng cách có một phần tử chung, bất kỳ component nào cũng có thể đặt trong nó. Phần tử .card__content__end không được có bất kỳ styles nào như color hoặc font, nó sẽ chỉ đóng vai trò là ngôi nhà cho một component cụ thể.

Tin nhắn mới

Trong khi kiểm tra cách Facebook thực hiện chỉ báo (indicator) tin nhắn mới, hóa ra đó là một button có nhãn “Mark as read”.

<div role="button" aria-label="Mark as read" tabindex="0"></div>

Tôi không hiểu bối cảnh tại sao nhóm tại Facebook lại chọn một phần tử div thay vì một phần tử button thực tế. Với button, chúng ta không cần sử dụng role, aria-label và tabindex. Thay vào đó, tất cả những thứ đó đều có sẵn miễn phí.

Hình đại diện Seen

Tương tự như hình đại diện của người dùng, hình đại diện Seen không có gì khác biệt. Nó sử dụng phần tử svg cho hình đại diện có nhãn aria-label cho biết tên của người dùng.

<svg aria-label="Ahmad Shadeed" role="img">
  <!-- Mask and image -->
</svg>

Nhiều hình đại diện Seen

Thành thật mà nói, đây là một trong những yêu thích của tôi. Tôi thực sự thích cách team tại Facebook thực hiện nó.

Bạn có nhận thấy đường viền giữa hai hình đại diện không? Ngay từ cái nhìn đầu tiên, bạn có thể nghĩ rằng đây là đường viền bởi CSS cho hình đại diện đầu tiên. Nếu bạn nghĩ như vậy, rất tiếc phải thông báo cho bạn biết rằng bạn đã sai (đúng như suy nghĩ ban đầu của tôi).

Điều này có được do áp dụng SVG mask.

<svg role="none">
  <mask id="circle">
    <circle cx="8" cy="8" fill="white" r="8"></circle>
    <circle cx="-4" cy="8" fill="black" r="10"></circle>
  </mask>

  <g mask="url(#circle)">
    <image></image>
    <circle class="border" cx="28" cy="28" r="28"></circle>
  </g>
</svg>

Đây là hình ảnh về cách hoạt động của nó.

Thật đáng kinh ngạc. Phải không? Tôi thực sự thích sử dụng SVG cho trường hợp cụ thể như này.

Hết phần 3

Nghệ thuật dựng component trong thực tế-Phần 2

mikebui — Wed, 11 May 2022 07:46:12 +0000

Bài viết được dịch từ:
https://ishadeed.com/article/building-real-life-components/

Các khu vực của component

Để triển khai một component chuẩn, trước tiên chúng ta cần suy nghĩ kỹ về HTML trước. Trong trường hợp này, chúng ta có hai khu vực của component có nhiều biến thể đó là hình đại diện và khu vực nội dung.

Ảnh đại diện

Để code HTML cho phần avatar, trước tiên chúng ta cần hiểu các trạng thái của nó. Dưới đây là các biến thể có thể có:

Hình đại diện duy nhất
Hình đại diện duy nhất có trạng thái trực tuyến
Nhiều hình đại diện cho trò chuyện nhóm
Nhiều hình đại diện có trạng thái trực tuyến

Xem xét đoạn HTML sau, chúng ta muốn đảm bảo rằng .card__avatar có thể xử lý tất cả các biến thể ở trên.

<div class="card">
  <div class="card__avatar"></div>
  <div class="card__content">
    <!-- Name, message, badge.. -->
  </div>
</div>

Hình đại diện duy nhất

Hãy tập trung vào biến thể đầu tiên, đó là một hình đại diện duy nhất. Hình đại diện phải có đường viền bên trong (hoặc bóng trong) để làm cho nó trông giống như một vòng tròn ngay cả khi hình đại diện được sử dụng toàn màu trắng.

Trong CSS, không thể áp dụng box-shadow (inner) cho phần tử img. Chúng ta có hai lựa chọn:

Sử dụng thêm một thẻ div có đường viền trong suốt.
Sử dụng thẻ svg.

Mục tiêu nếu đường viền bên trong là hiển thị đường viền xung quanh hình đại diện trong các trường hợp:

hình đại diện toàn màu trắng ở chế độ ánh sáng
hình đại diện toàn màu đen ở chế độ tối

Không có đường viền bên trong, sử dụng hình đại diện toàn màu trắng sẽ làm cho nó hòa trộn với nền gốc của nó. Điều tương tự cũng áp dụng cho chế độ tối. Đây là hình ảnh trực quan về những gì sẽ xảy ra có và không có đường viền bên trong.

Sử dụng thẻ div cho đường viền bên trong

Đối với giải pháp này, một phần tử bổ sung (chính là thẻ div) được đặt hoàn toàn phía trên hình ảnh với độ mờ là 0,1.

<div class="card__avatar">
  <img src="assets/shadeed.jpg" alt="" />
  <div class="border"></div>
</div>

.card__avatar {
  position: relative;
}

.card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.border {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid #000;
  border-radius: 50%;
  opacity: 0.1;
}

Giải pháp này đúng, nhưng có một số hạn chế mà tôi sẽ giải thích sau đây.

Sử dụng thẻ svg

Đối với giải pháp này, chúng tôi sẽ sử dụng một thẻ svg. Ý tưởng là sử dụng mặt nạ hình tròn cho hình đại diện và phần tử circle cho đường viền bên trong. SVG hoạt động tuyệt vời cho điều này.

<svg role="none" style="height: 56px; width: 56px">
  <mask id="circle">
    <circle cx="28" cy="28" fill="white" r="28"></circle>
  </mask>
  <g mask="url(#circle)">
    <image
      x="0"
      y="0"
      height="100%"
      preserveAspectRatio="xMidYMid slice"
      width="100%"
      xlink:href="/assets/shadeed.jpg"
      style="height: 56px; width: 56px"
    ></image>
    <circle class="border" cx="28" cy="28" r="28"></circle>
  </g>
</svg>

.border {
  stroke-width: 3;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

Cả hai giải pháp đều hoạt động được khi chỉ xây dựng với ví dụ hình đại diện duy nhất. Tuy nhiên, mọi thứ bắt đầu trở nên thú vị hơn khi chúng ta thêm yếu tố trực tuyến.

Hình đại diện duy nhất có trạng thái trực tuyến

Ở chế độ ánh sáng, hình tròn màu xanh lục có viền trắng. Tuy nhiên, ở chế độ tối, điều này nên được bị khỏi chính hình đại diện. Nói cách khác, nên sử dụng mặt nạ.

Làm thế nào chúng ta có thể làm điều đó? Nếu chúng ta sử dụng giải pháp svg cho hình đại diện duy nhất, điều này có thể được giải quyết dễ dàng bằng cách sử dụng mặt nạ SVG.

<svg role="none" style="height: 56px; width: 56px">
  <mask id="circle">
    <!-- [1] -->
    <circle cx="28" cy="28" fill="white" r="28"></circle>
    <!-- [2] -->
    <circle cx="48" cy="48" fill="black" r="7"></circle>
  </mask>
  <!-- [3] -->
  <g mask="url(#circle)">
    <image
      x="0"
      y="0"
      height="100%"
      preserveAspectRatio="xMidYMid slice"
      width="100%"
      xlink:href="/assets/shadeed.jpg"
      style="height: 56px; width: 56px"
    ></image>
    <circle class="border" cx="28" cy="28" r="28"></circle>
  </g>
</svg>

Hãy để tôi chia nhỏ đoạn code SVG trên:

Một vòng tròn để che hình đại diện thực tế.
Một hình tròn nhỏ để cắt từ góc dưới bên phải của hình đại diện.
Một group chứa image và circle cho đường viền bên trong trong suốt.

Dưới đây là hình ảnh giải thích cách hoạt động:

Cùng với đó, đây là đoạn code HTML.

<div class="card__avatar">
  <svg role="none" style="height: 56px; width: 56px">
    <mask id="circle">
      <circle cx="28" cy="28" fill="white" r="28"></circle>
      <circle cx="48" cy="48" fill="black" r="7"></circle>
    </mask>
    <g mask="url(#circle)">
      <image
        x="0"
        y="0"
        height="100%"
        preserveAspectRatio="xMidYMid slice"
        width="100%"
        xlink:href="/assets/shadeed.jpg"
        style="height: 56px; width: 56px"
      ></image>
      <circle class="border" cx="28" cy="28" r="28"></circle>
    </g>
  </svg>
  <div class="badge"></div>
</div>

.card__avatar {
  position: relative;
  display: flex;
  margin-right: 12px;
}

.badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 10px;
  height: 10px;
  background: #5ad539;
  border-radius: 50%;
}

Khi một component như thế này cần phải thích ứng với cả bố cục sáng và tối, bạn nên sử dụng các biến CSS để xử lý nhằm lưu trữ các giá trị của màu cần thay đổi.

:root {
  --primary-text: #050505;
  --secondary-text: #65676b;
  --bg-color: #fff;
}

html.is-dark {
  --primary-text: #e4e6eb;
  --secondary-text: #b0b3b8;
  --bg-color: #242526;
}

.card {
  background-color: var(--bg-color);
}

.card__title {
  color: var(--primary-text);
}

.card__subtitle {
  color: var(--secondary-text);
}

Hết phần 2

Nghệ thuật dựng component trong thực tế-Phần 1

mikebui — Tue, 10 May 2022 16:07:58 +0000

Bài viết được dịch từ:
https://ishadeed.com/article/building-real-life-components/

Dễ dàng đánh giá một component và triển khai trong HTML và CSS. Tôi đồng ý, thật sự dễ dàng khi bạn chỉ làm cho mục đích thực hành, nhưng đối với một dự án thực, điều đó hoàn toàn khác. Component mà bạn vừa xây dựng sẽ nhanh chóng bị lỗi trong trường hợp nó được sử dụng cho một dự án thực với nội dung thực. Tại sao? Đó là bởi vì không bao quát được tất cả các khía cạnh khi xây component.

Trong bài viết này, tôi sẽ giới thiệu cho các bạn một component trông có vẻ đơn giản ngay từ cái nhìn đầu tiên, nhưng đằng sau nó là vô số công việc. Để thực tế hơn, tôi sẽ lấy một ví dụ từ Facebook Messenger.

Giới thiệu

Đối với bài viết này, tôi sẽ lấy một component rất đơn giản từ Facebook Messenger. Xem hình bên dưới:

Trong sidebar, có một CardList cho những người mà tôi đã nhắn tin trên Facebook. Trong bài viết này, tôi chỉ quan tâm đến component Card. Bạn sẽ triển khai điều này như thế nào trong HTML & CSS? Thật đơn giản đúng không? Rằng nó bao gồm một hình ảnh và một thẻ div bên cạnh nó. Đây là điều đầu tiên bạn có thể nghĩ đến.

Có thể làm theo như trên nếu chỉ dành cho mục đích học tập. Tuy nhiên, nếu bạn muốn xây dựng một thứ gì đó vững chắc và linh hoạt, nó có thể thất bại nhanh chóng. Hãy cùng khám phá cách cơ bản để triển khai điều này trong HTML & CSS.

<div class="card">
  <img class="card__image" src="assets/shadeed.jpg" alt="" />
  <div>
    <h3>Ahmad Shadeed</h3>
    <p>You: Thanks, sounds good! . 8hr</p>
    <img class="card__seen" src="assets/shadeed.jpg" alt="" />
  </div>
</div>

.card {
  position: relative;
  display: flex; /* [1] */
  align-items: center; /* [2] */
  background-color: #fff;
  padding: 8px;
  border-radius: 7px;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.05);
}

.card h3 {
  font-size: 15px;
}

.card p {
  font-size: 13px;
  color: #65676b;
}

.card__image {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-right: 12px;
}

.card__seen {
  position: absolute; /* [3] */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

Tôi đã đánh dấu một số dòng ở trên và muốn giải thích chúng một chút:

Tôi đã sử dụng flexbox vì phù hợp với thiết kế.
Các mục con cần được căn giữa theo chiều dọc.
Seen sign được đặt hoàn toàn ở bên phải và căn giữa theo chiều dọc.

Hãy để component lỗi

Việc triển khai ở trên không có gì sai, nhưng nó không thể mở rộng. Tôi sẽ hiển thị một biến thể khác cho component.

Hình tròn màu xanh ở bên phải cho biết rằng đây là một tin nhắn mới mà tôi chưa mở. Trong khi màu xanh lục trên hình đại diện cho biết người dùng hiện đang trực tuyến.

Lưu ý cách chúng ta có hai hình tròn trên. Cách tốt nhất để thêm chúng là gì? Nếu bạn tham khảo CSS tôi đã viết cho thành phần ban đầu, bạn sẽ nhận thấy rằng chúng ta có lớp .card__seen cho hình đại diện người dùng nhỏ ở bên phải. Trong biến thể này, .card__seen nên được thay thế bằng hình tròn màu xanh lam.

Với HTML & CSS được viết, việc triển khai biến thể này sẽ không thể thực hiện được cho đến khi chúng ta thay đổi HTML.

Nói rõ hơn thì, biến thể trên chỉ là một phần rất nhỏ. Component này thực ra rất nhiều biến thể và trường hợp khác nữa.

Tất cả các biến thể

Đây là hình ảnh trực quan cho các biến thể của component này.

Không chỉ vậy, chúng ta cũng cần style cho dark mode.

Trong bài viết này, tôi sẽ cùng bạn khám phá cách tốt nhất để triển khai một component vững chắc có thể xử lý tất cả các biến thể và thay đổi mà nó không bị hỏng.

The Spacing (khoảng trống)

Trước khi làm bất cứ điều gì khác, tôi đã xem xét cẩn thận khoảng cách giữa mỗi phần tử UI và liệt kê ra những con số sau. Lưu ý rằng có rất nhiều khoảng cách và kích thước trong component đơn giản này.

Khi thiết kế giao diện người dùng và triển khai nó trong HTML & CSS, một trong những điều quan trọng cần quan tâm là khoảng cách. Đánh giá thấp điều đó có thể dẫn đến giao diện người dùng sai khác theo thời gian.

Hết phần 1

Dependency arrays trong React?

mikebui — Tue, 10 May 2022 13:30:21 +0000

Bài viết được dịch từ:
https://devtrium.com/posts/dependency-arrays

Dependency Array là gì?

Dependency arrays được dùng với React hook

Một số hook, như useEffect và useCallback có 2 đối số. Đối số đầu tiên là callback và cái thứ hai là dependency array. Nó có dạng một mảng các biến.

Trong ví dụ sau, [counter] là dependency array của hook useEffect:

useEffect(() => {
  console.log('Counter has value: ', counter);
}, [counter]);

Những Reac hook có dependency array là:

useEffect
useLayoutEffect
useCallback
useMemo
useImperativeHandle (hầu như không dùng)

Dependency array (Mảng phụ thuộc) được sử dụng để làm gì?

Mảng phụ thuộc về cơ bản cho hook biết "chỉ kích hoạt khi mảng phụ thuộc thay đổi". Trong ví dụ trên, nó có nghĩa là "chạy callback mỗi khi biến counter thay đổi".

Nếu bạn có nhiều phần tử trong một mảng phụ thuộc, hook sẽ kích hoạt nếu bất kỳ phần tử nào của mảng phụ thuộc thay đổi:

useEffect(() => {
  // chỉ chạy nếu `counter1` hoặc `counter2` thay đổi
  console.log('Either counter1 or counter2 changed (or both');
}, [counter1, counter2]);

Bạn có thể hỏi, nghĩa là gì khi hook "kích hoạt" mỗi khi một phần tử của mảng phụ thuộc thay đổi?

Điều đó phụ thuộc vào hook. Đối với hook useEffect, nó có nghĩa là chạy callback. Đối với hook useCallback, nó có nghĩa là thay đổi hàm được trả về bởi hook. Tương tự cho useMemo, là trả về giá trị.

Mảng phụ thuộc rỗng

Như tôi đã nói, mảng phụ thuộc điều khiển khi hook kích hoạt. Vậy điều gì sẽ xảy ra khi mảng phụ thuộc rỗng?

Đơn giản có nghĩa là hook sẽ chỉ kích hoạt một lần khi component được render lần đầu tiên. Vì vậy, đối với useEffect, nó có nghĩa là callback sẽ chạy một lần duy nhất trong vòng đời của component và không bao giờ chạy nữa.

useEffect(() => {
  console.log('I will run only once');
}, []);

Đây là một pattern rất phổ biến khi bạn muốn làm điều gì đó ở đầu vòng đời của component, chẳng hạn như thực hiện việc lấy data.

useEffect(() => {
  // chỉ chạy lần đầu tiên khi được mount vào DOM lần đầu
  fetch('https://yourapi.com');
}, []);

Mình có đoạn code mẫu ở trên để làm rõ ý của tác giả. Ở trong đoạn code trên có button update lại state. Khi state thay đổi thì sẽ render lại nhưng các bạn nhìn console.log thì chỉ có 1 lần render và lý do là mảng phụ thuộc là rỗng. Các bạn có thể bỏ mảng phụ thuộc để test thêm để thấy được sự khác nhau.

Nên cho gì vào mảng phụ thuộc?

Quy tắc khá là đơn giản, một số ngoại lệ sẽ làm quy tắc khó hơn một chút.

Quy tắc là: nếu bất kỳ biến nào được sử dụng bên trong hook nhưng được định nghĩa bên ngoài nó, thì nó sẽ nằm trong mảng phụ thuộc. Điều đó đúng với cả biến cũng như hàm.

import { useEffect } from 'react';

const ExampleComponent = () => {
  const width = 200;

  const printToConsole = (value) => {
    console.log(value);
  };

  useEffect(() => {
    printToConsole(width);
  }, [width, printToConsole]);

  return <p>Hello World!</p>;
};

CHÚ Ý
Ví dụ trên thực sự sẽ dẫn đến lỗi, 
vì hàm printToConsole không được bao bọc trong useCallback. 
Điều đó sẽ dẫn đến việc kích hoạt useEffect trên 
mỗi lần render của ExampleComponent! 
Tôi sẽ chỉ ra một cách tốt hơn để làm điều này 
trong phần tiếp theo.

Như bạn có thể thấy trong ví dụ trên, cả biến width và hàm printToConsole đều được sử dụng trong hook useEffect, và do đó cần phải cho vào trong mảng.

Vì vậy, quy tắc khá là đơn giản, nhưng như tôi đã nói, có một số trường hợp ngoại lệ.

Biến được định nghĩa ngoài component

Nếu một giá trị được xác định bên ngoài một component, thì giá trị đó sẽ được cố định và sẽ không thay đổi khi ứng dụng đang chạy. Vì vậy, React không cần bạn thêm nó vào mảng phụ thuộc.
(Giờ thì mình mới hiểu cách khai báo biến khi dùng styled-component. Bạn nào dùng styled-component thì nhớ điều trên nhé 🥰)

import { useEffect } from 'react';

const width = 200;

const printToConsole = (value) => {
  console.log(value);
};

const ExampleComponent = () => {
  useEffect(() => {
    printToConsole(width);
  }, []);

  return <p>Hello World!</p>;
};

Sẽ là tốt hơn khi đặt mọi thứ có thể bên ngoài một component. các biến (như width) và các hàm tiện ích (như printToConsole) không nhất thiết là cần định nghĩa bên trong component.

Những hàm đã được tối ưu hóa rồi

Như chúng ta đã thấy, mục tiêu của mảng phụ thuộc là làm cho hook kích hoạt khi một trong các giá trị thay đổi. Không có ích gì khi đặt vào đó những thứ mà không thay đổi.

Và có một số giá trị mà React biết chắc chắn sẽ không thay đổi, bởi vì chính React đảm bảo điều đó. Một ví dụ về hành vi này là hàm setter được trả về bởi một hook useState:

const [counter, setCounter] = useState(0);

Hàm setCounter được React tối ưu hóa và sẽ không thay đổi. Vì vậy, ngay cả khi nó được sử dụng trong một hook với một mảng phụ thuộc, bạn không cần phải thêm nó vào mảng phụ thuộc.

import { useState, useEffect } from 'react';

const ExampleComponent = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    setCounter(10);
  }, []);

  return <p>Counter is: {counter}</p>;
};

Điều này cũng đúng với hàm dispatch được trả về bởi hook useReducer.

CHÚ Ý

Nếu `setCounter` được truyền vào như một props từ HOC, 
bạn phải đưa nó vào mảng phụ thuộc vì 
React không biết nó đến từ đâu. 
Mặc dù vậy, nó sẽ không kích hoạt hook, 
vì vậy sẽ an toàn khi làm như vậy.

Refs

Refs khá khó khăn để hiểu, và có lẽ cần một bài viết riêng về Refs.

Nhưng liên quan đến mảng phụ thuộc, hãy lưu ý rằng việc đặt một ref vào một mảng phụ thuộc là vô ích. Không đi quá nhiều vào chi tiết, bởi vì giá trị thay đổi của ref sẽ không kích hoạt việc component re-render, vì vậy hook sẽ không kích hoạt, bất kể mảng phụ thuộc của nó là gì (mảng phụ thuộc chỉ được kiểm tra khi component re-render).

CHÚ Ý
Mặc dù việc đặt ref vào mảng phụ thuộc là vô ích, 
nhưng đừng đặt `ref.current` bên trong mảng phụ thuộc! 
Điều này sẽ dẫn đến lỗi!

Sử dụng es-lint để giúp bạn

Có rất nhiều trường hợp ngoại lệ, rất khó để nhớ hết. Nhưng đừng lo, ESLint luôn sẵn sàng trợ giúp bạn (Bạn đang sử dụng linter đúng không? Nếu không, bạn thực sự nên làm như vậy!).

Quy tắc react-hooks / expustive-deps sẽ cảnh báo bạn khi bạn đang làm sai với mảng phụ thuộc của mình. Nếu bạn muốn biết thêm thông tin, bạn có thể xem tài liệu chính thức của React!

Cẩn thận với những gì bạn đặt trong mảng phụ thuộc

Khi có sự thay đổi trong mảng phụ thuộc có nghĩa là hook sẽ được kích hoạt, bạn phải cẩn thận với những gì bạn đưa vào mảng phụ thuộc của mình. Đặc biệt, các hàm được định nghĩa bên trong component phải được bọc bằng useCallback và các giá trị bọc bằng useMemo!

Khi nào dùng useMemo và useCallback - Phần 3

mikebui — Tue, 10 May 2022 08:41:26 +0000

Bài dịch từ trang:
https://kentcdodds.com/blog/usememo-and-usecallback
của tác giả Kent C. Dodds.

React.memo (và những người bạn)

Xem đoạn code sau:

function CountButton({onClick, count}) {
  return <button onClick={onClick}>{count}</button>
}

function DualCounter() {
  const [count1, setCount1] = React.useState(0)
  const increment1 = () => setCount1(c => c + 1)

  const [count2, setCount2] = React.useState(0)
  const increment2 = () => setCount2(c => c + 1)

  return (
    <>
      <CountButton count={count1} onClick={increment1} />
      <CountButton count={count2} onClick={increment2} />
    </>
  )
}

Mỗi khi bạn click vào một trong các button, state của DualCounter sẽ thay đổi và do đó sẽ re-render, và re-render lại luôn cả 2 button CountButtons.

Tuy nhiên, button thực sự cần render lại là button đã được click có phải không? Vì vậy, nếu bạn click vào button đầu tiên, cái thứ hai sẽ được re-render, nhưng không có gì thay đổi. Chúng tôi gọi đây là một "re-render không cần thiết."

BẠN KHÔNG NÊN TỐI ƯU HÓA CÁC RE-RENDER KHÔNG CẦN THIẾT.

React RẤT nhanh và tôi nghĩ rằng có rất nhiều thứ để bạn làm với thời gian của mình hơn là tối ưu hóa những thứ như thế này. Trên thực tế, nhu cầu tối ưu hóa với những gì tôi sắp cho bạn thấy là rất hiếm đến mức tôi thực sự chưa bao giờ cần phải làm điều đó trong 3 năm tôi làm việc trên các sản phẩm PayPal.

Tuy nhiên, có những tình huống khi việc render có thể mất một lượng thời gian đáng kể (hãy nghĩ đến Đồ thị / Biểu đồ / Hoạt ảnh / v.v.) có tính tương tác cao. Nhờ bản chất thực dụng của React, thế nên có 1 cách giải quyết:

const CountButton = React.memo(function CountButton({onClick, count}) {
  return <button onClick={onClick}>{count}</button>
})

Bây giờ React sẽ chỉ re-render CountButton khi props của CountButton thay đổi! Nhưng chúng ta vẫn chưa xong. Hãy nhớ tới bình đẳng tham chiếu? Trong component của DualCounter, chúng ta đang định nghĩa các hàm increment1 và increment2 trong function của component (chính là function DualCounter()) , có nghĩa là mỗi khi DualCounter được re-render, các hàm đó sẽ là mới và do đó React sẽ re-render cả hai CountButtons.

Vì vậy, đây là một tình huống khác mà useCallback và useMemo thực sự có ích:

const CountButton = React.memo(function CountButton({onClick, count}) {
  return <button onClick={onClick}>{count}</button>
})

function DualCounter() {
  const [count1, setCount1] = React.useState(0)
  // đoạn này
  const increment1 = React.useCallback(() => setCount1(c => c + 1), [])

  const [count2, setCount2] = React.useState(0)
  // đoạn này
  const increment2 = React.useCallback(() => setCount2(c => c + 1), [])

  return (
    <>
      <CountButton count={count1} onClick={increment1} />
      <CountButton count={count2} onClick={increment2} />
    </>
  )
}

Bây giờ chúng ta có thể tránh được cái gọi là "re-render không cần thiết" của CountButton.

Tôi muốn nhắc lại rằng tôi thực sự khuyên bạn không nên sử dụng React.memo (hoặc là PureComponent và shouldComponentUpdate) mà không có sự tính toán bởi vì những tối ưu hóa đó đi kèm với chi phí và bạn cần đảm bảo rằng bạn biết chi phí đó sẽ không đáng kể so với lợi ích bạn nhận được (điều này khó xảy ra :D)

Tính toán phức tạp

Đây là lý do khác mà useMemo là một hook tích hợp cho React (lưu ý rằng cái này không áp dụng cho useCallback). Lợi ích của useMemo là bạn có thể nhận một giá trị như:

const a = {b: props.b}

Thay đổi như sau:

const a = React.useMemo(() => ({b: props.b}), [props.b])

Điều này không thực sự hữu ích cho trường hợp ở trên, nhưng hãy tưởng tượng rằng bạn có một hàm tính toán đồng bộ một giá trị mà việc tính toán rất mất thời gian:

function RenderPrimes({iterations, multiplier}) {
  const primes = calculatePrimes(iterations, multiplier)
  return <div>Primes! {primes}</div>
}

Điều đó có thể khá chậm với iterations hoặc multiplier. Bạn không thể làm cho phần cứng của người dùng nhanh hơn. Nhưng bạn có thể để function RenderPrimes không bao giờ phải tính cùng một giá trị hai lần liên tiếp, đó là những gì useMemo sẽ làm cho bạn:

function RenderPrimes({iterations, multiplier}) {
  const primes = React.useMemo(
    () => calculatePrimes(iterations, multiplier),
    [iterations, multiplier],
  )
  return <div>Primes! {primes}</div>
}

Kết luận

Cần xem xét kĩ giữa chi phí và lợi ích nhận được khi sử dụng việc tối ưu hóa.

P.S Có thể nói việc tối ưu hóa đang là trend khi công ty nào cũng phỏng vấn điều này. Nhưng bạn có thực sự biết cách sử dụng nó.

Dự án mình làm 80% các function con đều bọc useMemo hoặc useCallback (của người khác)và mình là người duy nhất không sử dụng bất kì useMemo hay useCallback trong đoạn code của mình. Đừng theo trend khi bạn chưa hiểu cách sử dụng.

Forem: mikebui

Dùng Profile để kiểm tra hiệu suất của React App

Cài đặt Extension

Khởi động app

Profiler

Khám phá dữ liệu hồ sơ

Cạm bẫy: đo lường ở chế độ phát triển

Build và đo trên môi trường production

Cập nhật cấu hình webpack để tạo hồ sơ trên môi trường production

Lập hồ sơ cho bản build ở môi trường production

Tắt chức năng name mangling

Cạm bẫy: Lập hồ sơ bằng máy tính nhanh

Giải thích đơn giản về React.useEffect ()

1. useEffect () dành cho side-effect

2. Đối số Dependencies

A) Không có: Side effect chạy sau mỗi lần rendering

B) Array rỗng []: side-effect chạy một lần sau lần hiển thị đầu tiên.

C) Có props hoặc state [prop1, prop2, ..., state1, state2]: side-effect chỉ chạy khi bất kỳ giá trị phụ thuộc nào thay đổi.

3. Vòng đời của component

3.1 ComponentDidMount

3.2 Component did update

5, Xóa Side-effect

6. Ứng dụng của useEffect

6.1 Fetching data

7. Kết luận

Error Boundaries

Giới thiệu Error Boundaries

Demo

Nơi đặt Error Boundaries

Hành vi mới cho các lỗi chưa xảy ra

Component Stack Traces

Thế còn try/catch

Thế còn Event Handlers

Cách đặt khoảng thời gian trong React (setInterval)(có ví dụ)

Code

Cách hoạt động của setInterval

1. Tại sao setInterval được gọi bên trong hook useEffect?

2. Tại sao gọi hàm setInterval lại trông như vậy?

3. Tại sao chúng ta trả lại một cái gì đó từ hook useEffect?

Hướng dẫn hoàn chỉnh để sử dụngRef () và Refs trong React

1. Mutable values

1.1 Trường hợp sử dụng: ghi nhật ký button khi click

Khác biệt giữa tham chiếu và state

1.2 Trường hợp sử dụng: triển khai đồng hồ bấm giờ

2. Truy cập các phần tử DOM

Tham chiếu không có giá trị khi hiển thị ban đầu

3. Hạn chế cập nhật refs

4. Tóm tắt

Nghệ thuật dựng component trong thực tế-Phần 4

Nội dung từ phải sang trái

Lật component

Chi tiết về khả năng tiếp cận

Sử dụng bàn phím

Danh sách cards

Nhiều hình đại diện

Kết luận

Cách sử dụng Chrome Dev Tools để tìm các nút thắt về hiệu suất

Giới thiệu

Điều kiện tiên quyết

Bước 1 - Chuẩn bị trình duyệt

Bước 2 - Thực hiện Kiểm tra

Thiết bị

Kiểm tra (Audits)

Throttling

Xóa Lưu trữ

Bước 3 - Phân tích Báo cáo đánh giá

Bước 4 - Giải quyết vấn đề trong phần Metrics

First Meaningful Paint

Speed Index

First CPU Idle

Time to Interactive

Estimated Input Latency

Bước 5 - Giải quyết các vấn đề trong phần Opportunities

Nghệ thuật dựng component trong thực tế-Phần 3

Nhiều hình đại diện trong trò chuyện nhóm

Nội dung

Phần đầu tiên

Phần thứ hai

Tin nhắn mới

Hình đại diện Seen

Cách hoạt động của `setInterval`

1. Tại sao `setInterval` được gọi bên trong hook `useEffect`?

2. Tại sao gọi hàm `setInterval` lại trông như vậy?

3. Tại sao chúng ta trả lại một cái gì đó từ hook `useEffect`?