React + useState () + beforeState

Sep 11 2020

Tôi còn khá mới để phản ứng và gặp vấn đề trong việc hiểu useState Hook - hay cụ thể hơn là khía cạnh củaState trước đó .

Một cách sử dụng bình thường State Hook, và có lẽ là ví dụ phổ biến nhất, trông như thế này:

import React, { useState} from 'react';

export default function CounterHooks({ initialCount }){
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <button onClick={() => setCount(count -1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

Những gì tôi đang hiểu cho đến nay, là:

Tôi gọi hàm useState () / Hook? và chuyển vào đối số của State ban đầu (InitialCount)
Tôi lấy lại một mảng mà tôi ngay lập tức hủy thành các biến count và setCount (là hàm)
Với setCount (), tôi có thể cập nhật trạng thái và do đó biến đếm

Cho đến nay rất tốt, tôi nghĩ ...;)

Đôi khi tôi thấy cùng một ví dụ về bộ đếm với Giá trị ưu tiên (presCount) mà tôi không hiểu:

<button onClick={() => setCount(prevCount => prevCount -1)}>-</button>

chuyện gì xảy ra ở đây thế? Phần này tôi không hiểu. Suy nghĩ của tôi cho đến nay:

Trong trường hợp này, bằng cách nào đó tôi truy cập giá trị đếm trước đó.
setCount mong đợi bây giờ là một hàm
setCount hiện đang chạy asynchron
Chức năng này đến từ đâu?
Số tiền chiếm đoạt đến từ đâu?
Khi tôi chạy cái này, cái gì được đưa vào Số tiền hiện tại?

Bạn có hiểu sự bối rối của tôi không? Tôi không chắc mình nên định khung nó theo cách khác ...

Cảm ơn bạn rất nhiều vì đã giúp đỡ của bạn.

Trả lời

6 devserkan Sep 11 2020 at 19:15

Trước hết, bạn có thể xem giải thích chính thức tại đây .

Trong trường hợp này, bằng cách nào đó tôi truy cập giá trị đếm trước đó.

Bạn không bằng cách nào đó đang truy cập giá trị đếm trước đó. Nếu bạn sử dụng bản cập nhật chức năng và cung cấp một hàm gọi lại cho bộ thiết lập, nó sẽ trả về trạng thái trước đó cho bạn và bạn sử dụng giá trị này trong hàm gọi lại của mình.

setCount mong đợi bây giờ là một hàm

Vì bạn cung cấp một chức năng, nó có thể sử dụng nó.

setCount hiện đang chạy asynchron

Trên thực tế, không. Nó không phải là một hàm không đồng bộ. Nó chỉ cung cấp trạng thái trước đó và bạn sử dụng nó. Bộ thiết lập trạng thái không phải là không đồng bộ, cập nhật trạng thái.

Chức năng này đến từ đâu?

Số tiền chiếm đoạt đến từ đâu?

Sẵn sàng trả lời.

Khi tôi chạy cái này, cái gì được đưa vào Số tiền hiện tại?

Bạn cung cấp những gì bạn muốn được thiết lập trạng thái mới ở đó. Trong ví dụ của bạn, bạn muốn tăng lên count1, vì vậy bạn đang cung cấp+ 1

Đây là một lời giải thích ngây thơ cho logic này. Chỉ là một người ngây thơ. Tôi thêm điều này để minh họa logic gọi lại, điều này không liên quan đến React'ssetState.

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    return val(state);
  }

  return val;
}

const stateWithFunctionalUpdate = setState(prev => prev + 1);
const stateWithNormalUpdate = setState(9);
console.log(stateWithFunctionalUpdate);
console.log(stateWithNormalUpdate);

Có thể ví dụ này sẽ phù hợp để bắt chước logic thiết lập trạng thái của React. Một lần nữa, chỉ là một cách tiếp cận ngây thơ.

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    state = val(state);
  } else {
    state = val;
  }

}

setState(9);
setState(prev => prev + 1);

console.log("state", state);

Hãy xem việc triển khai thực tế của useState(không có đánh máy):

export function useState(initialState) {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    initialState
  );
}

Chà, nó chỉ sử dụng useReducerphía sau rèm cửa. Nó thiết lập trạng thái ban đầu và sử dụng basicStateReducer là:

function basicStateReducer(state, action) {
  return typeof action === "function" ? action(state) : action;
}

Giống như cách tiếp cận ngây thơ của chúng tôi, nó tìm kiếm loại của actionvà hành xử theo đó. Cuối cùng, đây là những gì useReducer trả về :

return [workInProgressHook.memoizedState, dispatch];

Vì vậy, vào cuối ngày, nếu chúng ta cung cấp một hàm useState, nó sẽ nhận nó và sau đó chạy nó ở trạng thái của chúng ta và trả về giá trị.

1 VietDinh Sep 11 2020 at 19:10

Đây là ý kiến của tôi cách tôi hiểu:

Trong trường hợp này, bằng cách nào đó tôi truy cập giá trị đếm trước đó. -> setCount sẽ kiểm tra param, nếu param là callback nó sẽ gọi lại call đó và chuyển trạng thái trước đó cho param. Kết quả gọi lại sẽ có trạng thái tiếp theo.

setCount mong đợi bây giờ một hàm -> vâng, hàm xử lý bạn logic và trả về trạng thái tiếp theo.

setCount bây giờ được chạy asynchron -> hàm này là synchron nhưng sau khi nó trả về kết quả. Móc cho setCount sẽ gửi sự kiện để cập nhật trạng thái tiếp theo

Chức năng này đến từ đâu? -> bạn có thể làm bất cứ điều gì trong chức năng miễn là param sẽ là trạng thái hiện tại và trả về trạng thái tiếp theo.

Số tiền chiếm đoạt đến từ đâu? -> sẽ được chuyển khi gọi setCount (nó lấy từ trạng thái hiện tại).

Khi tôi chạy cái này, cái gì được đưa vào Số tiền hiện tại? -> trạng thái hiện tại của setCount.

=> Ví dụ về cách truyền một giá trị hoặc một lệnh gọi lại setCount ở đây: useState hook, setState function. Truy cập giá trị trạng thái trước đó