주요 useMemo 및 useCallback - Phần 1

Bài dịch từ trang:
https://kentcdodds.com/blog/usememo-and-usecallback
Kent C. Dodds의 전언입니다.

Có đoạn 코드 như sau:

function CandyDispenser() {
  const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']
  const [candies, setCandies] = React.useState(initialCandies)
  const dispense = candy => {
    setCandies(allCandies => allCandies.filter(c => c !== candy))
  }
  return (
    <div>
      <h1>Candy Dispenser</h1>
      <div>
        <div>Available Candy</div>
        {candies.length === 0 ? (
          <button onClick={() => setCandies(initialCandies)}>refill</button>
        ) : (
          <ul>
            {candies.map(candy => (
              <li key={candy}>
                <button onClick={() => dispense(candy)}>grab</button> {candy}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}

Giờ tôi muốn hỏi bạn và tôi muốn bạn nghĩ thật kĩ trước khi đi tiếp. Tôi sẽ thay đổi đoạn code trên và tôi muốn bạn nói cho tôi cái nào sẽ có performance tốt hơn.

React.useCallback을 사용할 때 사용할 수 있는 리소스가 없습니다.

const dispense = React.useCallback(candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}, [])

Và đây la đoạn 코드 gốc:

const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}

Sau đây là câu hỏi của tôi, ở trong trường hợp này, đoạn code nào có performance tốt hơn? Tiếp tục nghĩ và chọn câu trả lời của bạn:

đoạn code gốc

사용콜백

콜백을 사용하려면 어떻게 해야 할까요?!

React.useCallback은 성능과 '인라인 함수의 성능 비교'를 모두 포함하고 있습니다.

Hãy quay lại từ ví dụ trên, và thậm chí từ React và hãy suy ngẫm điều này: Mỗi dòng code khi đợc thực thi đều đi kèm với cái giá của nó . Hãy để tôi đổi lại đoạn code của phần useCallback một chút (chỉ di chuyển dòng code chứ không thay đổi gì cả) để có thể thấy rõ hơn:

const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}
const dispenseCallback = React.useCallback(dispense, [])

Và đây la đoạn 코드 gốc:

const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}

무엇을 할 수 있습니까? Hãy nhìn sự khác biệt:

const dispense = candy => {
  setCandies(allCandies => allCandies.filter(c => c !== candy))
}

// Dòng dưới này đây
const dispenseCallback = React.useCallback(dispense, [])

Đúng vậy, đoạn 코드 giống nhau trừ phiên bản useCallback thì làm thêm nhiều việc hơn. chúng ta không chỉ định nghĩa thêm function mà còn phải ³ ịnh nghĩa ra m ảang ([]) và rồi gọi hàm react.usecallback mà chính nó đang thiết llập các tính, v.

Trong 2 trường hợp trên, Javascript phải phân bổ vùng nhớ cho hàm được định nghĩa cho mỗi lần render và phụ thuộc vào việc useCallback được thực thi, bạn có thể có thể nhận được nhiều phân bổ hơn cho việc định nghĩa hàm (thực tế không phải vậy nhưng vấn đề vẫn còn)

tôi c gng muốn ³ c ập tới vấi vấn ³ the land ở l ở lần thứ 2 render của component, ³lo hàm dispense của b ảng g ố g thu dọn (giải phóng vùng của b ộ nhớ) và sau  s ẽ có hom m m m ới <. 당신은 useCallback, hàm dispens của bản gốc sẽ không cần thu dọn 및 hàm mới được tạo, và rồi bạn sẽ gặp vấn đề về bộ nhớ.

대부분의 경우 React đang dựa vào các tham chiếu đến các hàm trước đó에 종속성이 있습니다. Bởi vì 암기 thường có nghĩa là lưu giữ các giá trị cũ để trả lại trong trong trong trong trong trong trong trong trong trong hợp nhận được các 종속성 giống như đã cho từ trước(종속성 không thai đ).

Điều đó có nghĩa là React cũng đang dựa vào các tham chiếu tới các 종속성 cho việc 동등성 검사(điều này có thể tình cờ xảy ra do closure, nhưng dù sao cũng đáng để đửề c).

Hết phần 1 :)