React Redux – hooks trong phản ứng js

API> Hooks: hooks `useSelector` và` useDispatch“

Bạn đang xem: hooks trong react js

Hooks

Các API mới ” hooks “ của React cung cấp cho các thành phần hàm khả năng sử dụng cục bộ trạng thái thành phần, thực hiện các hiệu ứng phụ và hơn thế nữa. React cũng cho phép chúng tôi viết các hook tùy chỉnh , cho phép chúng tôi trích xuất các hook có thể tái sử dụng để thêm hành vi của riêng mình vào đầu các hook tích hợp của React.

React Redux bao gồm các API móc tùy chỉnh của riêng nó, cho phép các thành phần React của bạn đăng ký vào cửa hàng Redux và gửi các hành động.

mẹo

Chúng tôi khuyên bạn nên sử dụng API móc React-Redux làm phương pháp tiếp cận mặc định trong các thành phần React của bạn.

< p> API connect hiện có vẫn hoạt động và sẽ tiếp tục được hỗ trợ, nhưng API hooks đơn giản hơn và hoạt động tốt hơn với TypeScript.

Các hook này lần đầu tiên được thêm vào v7.1.0 .

Cũng như với connect () , bạn nên bắt đầu bằng cách gói toàn bộ ứng dụng của mình trong thành phần & lt; Nhà cung cấp & gt; để làm cho cửa hàng có sẵn trong suốt cây thành phần:

  

const

cửa hàng

=

createStore

(< / p>

rootReducer

)




const

gốc

=

ReactDOM

.

createRoot

(

tài liệu

.

getElementById

(

'gốc'

)

)


gốc

.

kết xuất

(


< / p>

& lt;

Nhà cung cấp

< p class = "token tag attr-name"> lưu trữ

=

{

lưu trữ

}

& gt;


& lt;

Ứng dụng

/ & gt;


& lt; /

Nhà cung cấp

& gt;


)


Từ đó, bạn có thể nhập bất kỳ API móc React Redux nào được liệt kê và sử dụng chúng trong các thành phần chức năng của bạn.

  

< p class = "từ khóa mã thông báo"> const

kết quả

:

bất kỳ

=

useSelector

(

bộ chọn

:

Hàm

,

EqualFn

< p class = "token operator">?

:

Hàm

)


Cho phép bạn trích xuất dữ liệu từ trạng thái cửa hàng Redux, sử dụng chức năng bộ chọn.

info

Hàm selector phải là pure vì nó có khả năng được thực thi nhiều lần và tại các thời điểm tùy ý.

Bộ chọn gần tương đương với đối số mapStateToProps thành connect về mặt khái niệm. Bộ chọn sẽ được gọi với toàn bộ trạng thái cửa hàng Redux làm đối số duy nhất của nó. Bộ chọn sẽ được chạy bất cứ khi nào thành phần hàm hiển thị (trừ khi tham chiếu của nó không thay đổi kể từ lần hiển thị trước đó của thành phần để kết quả được lưu trong bộ nhớ cache có thể được hook trả về mà không cần chạy lại bộ chọn). useSelector () cũng sẽ đăng ký vào cửa hàng Redux và chạy bộ chọn của bạn bất cứ khi nào thực hiện một hành động.

Tuy nhiên, có một số khác biệt giữa các bộ chọn được chuyển đến useSelector () và hàm mapState :

  • Kết quả là bộ chọn có thể trả về bất kỳ giá trị nào, không chỉ một đối tượng. Giá trị trả về của bộ chọn sẽ được sử dụng làm giá trị trả về của móc câu useSelector () .
  • Khi một hành động được thực hiện, useSelector () sẽ thực hiện so sánh tham chiếu giữa giá trị kết quả của bộ chọn trước đó và giá trị kết quả hiện tại. Nếu chúng khác nhau, thành phần sẽ bị buộc phải kết xuất lại. Nếu chúng giống nhau, thành phần sẽ không hiển thị lại.
  • Hàm bộ chọn không nhận đối số ownProps . Tuy nhiên, bạn có thể sử dụng các đạo cụ thông qua việc đóng (xem các ví dụ bên dưới) hoặc bằng cách sử dụng bộ chọn cà ri.
  • Cần phải cẩn thận hơn khi sử dụng bộ chọn ghi nhớ (xem ví dụ bên dưới để biết thêm chi tiết).
  • useSelector () sử dụng === kiểm tra bình đẳng tham chiếu nghiêm ngặt theo mặc định, không kiểm tra bình đẳng nông (xem phần sau để biết thêm chi tiết).
  • thông tin

    Có những trường hợp tiềm năng khi sử dụng đạo cụ trong bộ chọn có thể gây ra sự cố. Xem phần Cảnh báo Sử dụng trên trang này để biết thêm chi tiết.

    Bạn có thể gọi useSelector () nhiều lần trong một thành phần chức năng. Mỗi cuộc gọi đến useSelector () sẽ tạo ra một đăng ký riêng lẻ vào cửa hàng Redux. Do hành vi theo đợt cập nhật React được sử dụng trong React Redux v7, một hành động đã gửi khiến nhiều useSelector () trong cùng một thành phần trả về các giá trị mới sẽ chỉ dẫn đến một lần hiển thị lại duy nhất.

    Khi thành phần hàm hiển thị, hàm bộ chọn đã cung cấp sẽ được gọi và kết quả của nó sẽ được trả về
    từ móc useSelector () . (Kết quả được lưu trong bộ nhớ cache có thể được hook trả về mà không cần chạy lại bộ chọn nếu đó là tham chiếu hàm giống như trên kết xuất trước đó của thành phần.)

    Tuy nhiên, khi một hành động được gửi đến cửa hàng Redux , useSelector () chỉ buộc kết xuất lại nếu bộ chọn kết quả
    có vẻ khác với kết quả cuối cùng. So sánh mặc định là tham chiếu === nghiêm ngặt
    sự so sánh. Điều này khác với connect () , sử dụng kiểm tra bình đẳng nông trên kết quả của các lệnh gọi mapState
    để xác định xem có cần kết xuất lại hay không. Điều này có một số hàm ý về cách bạn nên sử dụng useSelector () .

    Với mapState , tất cả các trường riêng lẻ được trả về trong một đối tượng kết hợp. Không quan trọng nếu đối tượng trả về là
    tham chiếu mới hay không – connect () chỉ so sánh các trường riêng lẻ. Với useSelector () , trả về một đối tượng mới
    mọi lúc sẽ luôn buộc hiển thị lại theo mặc định. Nếu muốn truy xuất nhiều giá trị từ cửa hàng, bạn có thể:

    • Gọi useSelector () nhiều lần, mỗi lần gọi trả về một giá trị trường duy nhất
    • Sử dụng Chọn lại hoặc một thư viện tương tự để tạo một bộ chọn được ghi nhớ trả về nhiều giá trị trong một đối tượng, nhưng
      chỉ trả về một đối tượng mới khi một trong các giá trị đã thay đổi.
    • Sử dụng hàm AgriculturalEqual từ React-Redux làm đối số EqualFn cho useSelector () , như:
      

    nhập

    {

    nôngEqual

    ,

    useSelector

    }

    từ

    'react-redux'


    < p class = "token trơn">



    const

    Dữ liệu được chọn

    =

    < p class = "mã thông báo đồng bằng">

    useSelector

    (

    selectorReturningObject

    ,

    nôngEqual

    )


    Chức năng so sánh tùy chọn cũng cho phép sử dụng tính năng so sánh như _.isEqual () của Lodash hoặc khả năng so sánh của Immutable.js.

    Cách sử dụng cơ bản:

      

    nhập

    Phản ứng

    từ

    < / p>

    'phản ứng'

    nhập

    {

    useSelector

    }

    < p class = "token same">

    từ

    'react -redux '



    xuất

    const

    CounterComponent < / p>

    =

    (

    )

    = & gt;

    {


    const

    bộ đếm

    =

    useSelector

    (

    (

    trạng thái

    ) < / p>

    = & gt;

    trạng thái

    .

    bộ đếm

    )


    trả về

    & lt;

    div

    & gt ;

    {

    bộ đếm

    }

    & lt; /

    div

    & gt;


    }


    Sử dụng đạo cụ thông qua đóng để xác định nội dung cần trích xuất :

      

    nhập

    Phản ứng

    từ

    'react'


    nhập

    {

    useSelector

    }

    từ

    'react-redux'



    xuất

    const

    TodoListItem

    =

    < p class = "dấu chấm câu"> (

    đạo cụ

    )

    = & gt;

    {


    const

    todo

    =

    useSelector

    (

    (

    trạng thái

    )

    = & gt;

    trạng thái

    .

    việc làm

    [

    đạo cụ

    .

    id

    ]

    )


    trả về

    & lt;

    div

    & gt;

    {

    việc làm

    .

    text

    }

    & lt; /

    div

    & gt;


    }


    Khi sử dụng useSelector với bộ chọn nội tuyến như được hiển thị ở trên, một phiên bản mới của bộ chọn được tạo bất cứ khi nào thành phần được hiển thị. Điều này hoạt động miễn là bộ chọn không duy trì bất kỳ trạng thái nào. Tuy nhiên, các bộ chọn ghi nhớ (ví dụ: được tạo qua createSelector từ reselect ) có trạng thái bên trong và do đó cần phải cẩn thận khi sử dụng chúng. Dưới đây, bạn có thể tìm thấy các trường hợp sử dụng điển hình cho bộ chọn ghi nhớ.

     

    nhập

    Phản ứng

    từ

    'react'


    < p class = "mã thông báo đồng bằng">

    nhập

    {< / p>

    useSelector

    }

    từ

    'react-redux'


    nhập

    {

    < p p class = "token trơn"> createSelector

    }

    từ

    'chọn lại'



    const

    selectNumCompletedAll

    =

    createSelector

    (


    (

    state

    )

    = & gt;

    trạng thái

    .

    tất cả

    ,


    (

    tất cả

    )

    = & gt;

    todos

    .

    bộ lọc

    (

    (

    việc làm

    )

    = & gt;

    việc làm

    . < / p>

    đã hoàn thành

    )

    .

    chiều dài


    )



    xuất

    const

    CompletedAllCounter

    =

    < p p class = "dấu chấm câu mã thông báo"> (

    )

    = & gt;

    {


    const

    numCompletedAll

    =

    useSelector

    (

    selectNumCompletedAll

    )


    trả về

    & lt;

    div

    & gt;

    {

    numCompletedAll

    }

    & lt; /

    div

    & gt;


    }



    < p p class = "từ khóa mã thông báo"> xuất

    const

    Ứng dụng

    =

    (

    )

    >

    = & gt;

    {

    < p class = "token

    return p>

    (


    & lt;

    & gt;


    & lt;

    span

    & gt;

    Số lượng

    trong tổng số

    đã hoàn thành tất cả

    :

    & lt; /

    span

    & gt;


    & lt;

    CompletedTodosCounter

    / & gt ;


    < p class = "dấu chấm câu thẻ mã thông báo"> & lt; /

    & gt;


    < / p>

    )

    < / p>

    }


    Điều này cũng đúng nếu bộ chọn phụ thuộc vào đạo cụ của thành phần, nhưng sẽ chỉ được sử dụng

     

    nhập

    Phản ứng

    từ

    'react'

    nhập

    {

    useSelector

    }

    từ

    'react-redux'


    nhập

    {

    createSelector

    }

    từ

    'chọn lại'

    'chọn lại">


    const

    selectCompletedAllCount

    =

    createSelector

    (

    (

    trạng thái

    )

    = & gt;

    trạng thái

    .

    tất cả

    ,


    (

    _

    ,

    đã hoàn thành

    )

    = & gt;

    đã hoàn thành

    ,

    < br />

    (

    todos

    ,

    hoàn thành

    )

    = & gt;


    todos

    .

    bộ lọc

    (

    (

    việc làm

    )

    < p class = "token operator"> = & gt;

    todo

    "> đã hoàn thành

    ===

    đã hoàn thành

    )

    . < / p>

    length


    )



    xuất

    const

    Hoàn thành class = "dấu chấm câu mã thông báo"> (

    {

    đã hoàn thành

    }

    )

    = & gt;

    {


    const

    Số lượng phù hợp

    =

    useSelector

    (

    (

    < p class = "thông số mã thông báo"> trạng thái

    )

    = & gt;


    selectCompletedTodosCount

    (

    trạng thái

    ,

    đã hoàn thành

    < p class = "dấu chấm câu mã thông báo">)


    )



    trả về

    & lt;

    div < / p>

    & gt;

    {

    matchCount

    }

    & lt; /

    div

    & gt;


    < / p>

    }



    xuất

    const

    Ứng dụng

    =

    (

    )

    = & gt;

    < p class = "mã thông báo đồng bằng">

    {

    trả lại

    (


    & lt;

    & gt;


    & lt;

    span

    & gt;

    Số

    của

    đã hoàn thành tất cả

    :

    & lt; /

    span

    & gt;


    & lt;

    CompletedTodosCount

    hoàn thành >

    =

    {

    true

    }

    / & gt;

    / & gt;

    / & gt;

    & lt; /

    & gt;


    )


    }


    Tuy nhiên, khi bộ chọn được sử dụng trong nhiều trường hợp thành phần và phụ thuộc vào đạo cụ của thành phần, bạn cần đảm bảo rằng mỗi phiên bản thành phần đều có phiên bản bộ chọn riêng (xem tại đây để được giải thích kỹ lưỡng hơn về lý do tại sao điều này là cần thiết):

    < pre class = "prism-code language-jsx codeBlock_23N8 thin-scrollbar" tabindex = "0">

    nhập

    Phản ứng

    ,

    {

    useMemo

    }

    từ

    'phản ứng'

    nhập

    {

    useSelector

    }

    < / p>

    from 'react-redux' class = "token same">

    nhập

    {

    createSelector

    }

    từ

    'chọn lại'

    const

    makeSelectCompletedTodosCount

    < p class = "token operator"> =

    (

    )

    = & gt;

    createSelector

    (

    < p p class = "dấu chấm câu mã thông báo"> (

    trạng thái

    )

    = & gt;

    trạng thái

    class = "token clear" > tất cả

    ,

    (

    _

    ,

    đã hoàn thành

    )

    = & gt;

    đã hoàn thành

    ,

    (

    todos

    ,

    đã hoàn thành

    )

    = & gt;

    todos < / p>

    .

    bộ lọc

    (

    (

    việc làm

    )

    = & gt;

    tất cả

    .

    đã hoàn thành

    ===

    đã hoàn thành

    )

    .

    length

    < p p class = "dấu chấm câu mã thông báo">)

    xuất < / p>

    const

    Số tiền hoàn thành

    =

    (

    {

    đã hoàn thành

    }

    )

    = & gt;

    {< / p>

    const

    selectCompletedAllCount

    =

    p>

    useMemo

    (

    makeSelectCompletedAllCount

    < p class = "dấu chấm câu mã thông báo">,

    [

    ]

    )

    < p class = "mã thông báo đồng bằng">

    const

    matchCount

    =

    useSelector

    (

    (

    trạng thái

    )

    < / p>

    = & gt;

    selectCompletedAllCount

    (

    trạng thái

    ,

    đã hoàn thành

    )

    )

    < p br />

    trả về

    & lt;

    div

    & gt;

    {

    Số lượng đối sánh

    }

    & lt; /

    div

    & gt;

    }

    xuất

    const

    < p class = "mã thông báo function-biến chức năng"> Ứng dụng

    =

    p>

    (

    )

    = & gt;

    {

    trả lại

    (

    < p class = "mã thông báo đồng bằng">

    & lt;

    & gt;

    & lt;

    span

    & gt;

    Số

    của

    đã hoàn thành tất cả

    :

    & lt; /

    span

    & gt;

    & lt;

    CompletedTodosCount

    đã hoàn thành

    =

    {

    true

    }

    / & gt;

    & lt;

    span

    & gt;

    Số

    của

    công việc chưa hoàn thành

    :

    & lt; /

    span

    & gt;

    & lt;

    CompletedTodosCount

    đã hoàn thành

    =

    {

    sai < / p>

    }

    / & gt;

    & lt; /

    & gt;

    )

    }

    < br />

     

    < p class = "từ khóa mã thông báo"> const

    công văn

    =

    useDispatch

    (

    ) < / p>

    hook này trả về một tham chiếu đến hàm send từ Redux store. Bạn có thể sử dụng nó để thực hiện các hành động khi cần thiết.

     

    import

    Phản ứng

    từ

    'phản ứng'

    nhập

    {

    useDispatch

    < p class = "dấu chấm câu mã thông báo">}

    từ

    < / p>

    'react-redux'



    xuất

    const

    CounterComponent

    =

    (

    {

    giá trị

    }

    )

    = & gt;

    {

    < / p>

    const

    công văn

    =

    useDispatch < / p>

    (

    )



    trả lại

    (


    & lt;

    div

    & gt;


    & lt;

    span

    & gt;

    {

    giá trị

    }

    & lt; /

    span

    & gt;

    < / p>

    Nút

    & lt;

    onClick

    =

    {

    (

    )

    = & gt;

    điều phối

    (

    {

    loại

    :

    'increment-counter'

    }

    < p class = "dấu câu mã thông báo ngôn ngữ-javascript">)

    }

    & gt; < / p>


    Bộ đếm tăng

    < br />

    & lt; /

    nút

    & gt;


    & lt; /

    div

    & gt;


    < p class = "mã thông báo đồng bằng">

    )


    }


    Khi chuyển một lệnh gọi lại bằng < code> gửi đến một thành phần con, đôi khi bạn có thể muốn ghi nhớ nó bằng useCallback . Nếu thành phần con đang cố gắng tối ưu hóa hành vi hiển thị bằng cách sử dụng React.memo () hoặc tương tự, điều này sẽ tránh hiển thị không cần thiết các thành phần con do tham chiếu gọi lại đã thay đổi.

      

    nhập

    Phản ứng

    ,

    {< / p>

    useCallback

    }

    từ

    'phản ứng'


    nhập

    {

    useDispatch

    }

    từ

    'react-redux'



    xuất

    const

    CounterComponent

    =

    (

    {

    giá trị

    }

    )

    = & gt;

    {< / p>


    const

    công văn

    =

    useDispatch

    (

    < p class = "dấu chấm câu mã thông báo">)


    const

    incrementCounter

    =

    < p class = "mã thông báo đồng bằng">

    useCallback

    (

    < / p>

    (

    )

    = & gt;

    công văn

    (

    {

    loại

    :

    'increment-counter'

    }

    )

    ,


    [

    công văn

    ]


    )



    trả về

    (


    & lt;

    div

    & gt;


    & lt;

    span

    & gt;

    {

    giá trị

    }

    & lt; / < / p>

    span

    & gt;


    & lt;

    MyIncrementButton

    onIncrement

    =

    {

    incr ementCounter

    }

    / & gt;


    & lt; /

    div

    & gt;


    ) < / p>


    }



    xuất

    const

    MyIncrementButton

    =

    Phản ứng

    .

    m emo

    (

    (

    {

    onIncrement

    }

    )

    = & gt;

    (


    Nút & lt;

    onClick

    =

    {

    onIncrement

    }

    & gt;

    Bộ đếm tăng dần

    & lt; /

    nút

    & gt;


    < p class = "token-line">

    )

    )


    thông tin

    Tham chiếu hàm send sẽ ổn định miễn là phiên bản cửa hàng tương tự được chuyển tới & lt; Provider & gt; .
    Thông thường, phiên bản store đó không bao giờ thay đổi trong một ứng dụng.

    Tuy nhiên, các quy tắc của React hooks lint không biết rằng send phải ổn định và sẽ cảnh báo rằng send biến
    nên được thêm vào các mảng phụ thuộc cho useEffect useCallback . Giải pháp đơn giản nhất là làm điều đó:

      

    xuất

    const

    Tất cả

    =

    (

    )

    = & gt;

    {


    const

    công văn

    =

    useDispatch

    (

    )



    useEffect

    (

    (

    )

    < / p>

    = & gt;

    {


    điều phối

    (

    fetchAll

    (

    )



    }

    ,

    [

    công văn

    ]

    )


    < p p class = "dấu chấm câu">}


     

    const

    cửa hàng

    =

    useStore

    (< / p>

    )


    hook này trả về một tham chiếu đến cùng một cửa hàng Redux đã được chuyển vào thành phần & lt; Provider & gt; .

    Có thể không nên sử dụng hook này thường xuyên. Ưu tiên useSelector () làm lựa chọn chính của bạn. Tuy nhiên, điều này có thể hữu ích cho các trường hợp ít phổ biến hơn yêu cầu quyền truy cập vào cửa hàng, chẳng hạn như thay thế mã giảm bớt class = “codeBlockLines_39YC”>

    nhập < / p>

    Phản ứng

    từ

    ‘phản ứng’

    nhập

    {

    useStore

    }

    từ

    ‘react-redux’

    xuất < / p>

    const

    CounterComponent

    =

    (

    {

    giá trị

    }

    )

    = & gt;

    {


    const

    lưu trữ

    =

    useStore

    (

    )

    trả về

    & lt;

    div

    & gt;

    {

    lưu trữ

    .

    getState

    (

    )

    }

    & lt;

    /

    div

    & gt;

    }

    < br />

    Thành phần & lt; Provider & gt; cho phép bạn chỉ định ngữ cảnh thay thế thông qua context prop. Điều này rất hữu ích nếu bạn đang xây dựng một thành phần phức tạp có thể tái sử dụng và bạn không muốn cửa hàng của mình va chạm với bất kỳ cửa hàng Redux nào mà ứng dụng của người tiêu dùng của bạn có thể sử dụng.

    Để truy cập ngữ cảnh thay thế thông qua API hooks , sử dụng các chức năng của trình tạo móc:

      

    nhập

    Phản ứng

    từ

    'phản ứng '


    < p class = "mô-đun từ khóa mã thông báo"> nhập

    {


    Nhà cung cấp

    ,


    createStoreHook

    ,


    createDispatchHook

    ,


    createSelectorHook

    ,

    < / p>

    }

    < p class = "mã thông báo đồng bằng">

    từ

    ' phản ứng-redux '



    const

    MyContext

    =

    React

    .

    createContext

    (

    null

    )


    < / p>



    xuất

    const

    useStore

    =

    createStoreHook

    (

    MyContext

    )


    xuất

    const

    < p class = "mã thông báo"> useDispatch

    =

    createDispatchHook

    (

    MyContext

    )


    xuất

    const

    useSelector

    =

    createSelectorHook

    (

    MyContext

    )



    < p class = "mã thông báo đồng bằng">

    khuyết điểm t

    myStore

    =

    createStore

    (

    rootReducer

    )



    xuất

    chức năng

    MyProvider

    (

    {

    con

    }

    )

    {


    trả về

    (


    & lt;

    Nhà cung cấp

    ngữ cảnh

    = < / p>

    {

    MyContext

    }

    < p class = "token trơn"> lưu trữ

    =

    {

    myStore

    }

    & gt;


    {

    trẻ em

    }


    & lt;

    /

    Nhà cung cấp

    & gt;


    )


    }


    thông tin < / h5>

    API móc React-Redux đã sẵn sàng sản xuất kể từ khi chúng tôi phát hành nó trong v7.1.0 và chúng tôi khuyên bạn nên sử dụng API hooks làm phương pháp tiếp cận mặc định trong các thành phần của bạn . Tuy nhiên, có một số trường hợp nguy hiểm có thể xảy ra và chúng tôi đang ghi lại những trường hợp đó để bạn có thể biết về chúng .

    Trên thực tế, đây là một mối quan tâm hiếm hoi – chúng tôi đã nhận được nhiều nhận xét về những điều này trong tài liệu hơn là các báo cáo thực tế về việc những điều này là một vấn đề thực sự trong một ứng dụng.

    Một trong những khía cạnh khó khăn nhất khi triển khai React Redux là đảm bảo rằng nếu < code> mapStateToProps hàm được định nghĩa là (state, ownProps) , nó sẽ được gọi với các đạo cụ “mới nhất” mỗi lần. Cho đến hết phiên bản 4, có các lỗi lặp lại được báo cáo liên quan đến các tình huống biên, chẳng hạn như lỗi được đưa ra từ hàm mapState cho một mục danh sách có dữ liệu vừa bị xóa.

    Bắt đầu với phiên bản 5, React Redux đã cố gắng đảm bảo tính nhất quán đó với ownProps . Trong phiên bản 7, điều đó được triển khai bằng cách sử dụng lớp Đăng ký tùy chỉnh nội bộ trong connect () , tạo thành một hệ thống phân cấp lồng nhau. Điều này đảm bảo rằng các thành phần được kết nối thấp hơn trong cây sẽ chỉ nhận được thông báo cập nhật cửa hàng sau khi cập nhật tổ tiên được kết nối gần nhất. Tuy nhiên, điều này phụ thuộc vào mỗi phiên bản connect () ghi đè một phần của ngữ cảnh React nội bộ, cung cấp phiên bản Đăng ký duy nhất của riêng nó để tạo thành lồng ghép đó và hiển thị & lt ; ReactReduxContext.Provider & gt; với giá trị ngữ cảnh mới đó.

    Với hook, không có cách nào để hiển thị trình cung cấp ngữ cảnh, điều đó có nghĩa là cũng không có hệ thống phân cấp đăng ký lồng nhau. Do đó, vấn đề “đạo cụ cũ” và “con zombie” có thể tái diễn trong một ứng dụng dựa vào việc sử dụng hook thay vì connect () .

    Cụ thể, “props cũ” có nghĩa là bất kỳ trường hợp nào trong đó:

    • một hàm bộ chọn dựa vào các props của thành phần này để trích xuất dữ liệu
    • một thành phần chính sẽ hiển thị lại và chuyển các props mới dưới dạng kết quả của một hành động
    • nhưng chức năng bộ chọn của thành phần này thực thi trước khi thành phần này có cơ hội hiển thị lại với những đạo cụ mới đó

    Tùy thuộc vào những đạo cụ đã được sử dụng và trạng thái cửa hàng hiện tại là gì, điều này có thể dẫn đến dữ liệu được trả về từ bộ chọn không chính xác hoặc thậm chí là lỗi được đưa ra.

    “Zombie child” đề cập cụ thể đến trường hợp:

    < ul>

  • Nhiều thành phần được kết nối lồng nhau được gắn trong một lần vượt qua đầu tiên, khiến một thành phần con đăng ký vào cửa hàng trước thành phần chính của nó
  • Một hành động được thực hiện sẽ xóa dữ liệu khỏi cửa hàng, chẳng hạn như một món đồ cần làm
  • Do đó, thành phần chính sẽ ngừng hiển thị phần tử con đó
  • Tuy nhiên, vì trẻ đã đăng ký đầu tiên, đăng ký của nó chạy trước khi cha mẹ ngừng hiển thị nó. Khi nó đọc một giá trị từ cửa hàng dựa trên các đạo cụ, dữ liệu đó sẽ không còn tồn tại và nếu logic trích xuất không cẩn thận, điều này có thể dẫn đến lỗi được tạo ra.

useSelector () cố gắng giải quyết vấn đề này bằng cách bắt tất cả các lỗi được đưa ra khi bộ chọn được thực thi do cập nhật cửa hàng (nhưng không phải khi nó được thực thi trong quá trình hiển thị). Khi xảy ra lỗi, thành phần sẽ buộc phải kết xuất, lúc này bộ chọn được thực thi lại. Điều này hoạt động miễn là bộ chọn là một chức năng thuần túy và bạn không phụ thuộc vào lỗi tạo ra bộ chọn.

Nếu bạn muốn tự mình giải quyết vấn đề này, đây là một số tùy chọn khả thi để tránh những vấn đề này hoàn toàn với useSelector () :

  • Không dựa vào đạo cụ trong chức năng bộ chọn của bạn để trích xuất dữ liệu
  • Trong trường hợp bạn dựa vào đạo cụ trong chức năng bộ chọn của bạn và các đạo cụ đó có thể thay đổi theo thời gian hoặc dữ liệu bạn đang trích xuất có thể dựa trên các mục có thể bị xóa, hãy thử viết các hàm bộ chọn một cách phòng thủ. Đừng chỉ truy cập thẳng vào state.todos [props.id] .name – trước tiên hãy đọc state.todos [props.id] và xác minh rằng nó tồn tại trước khi thử để đọc todo.name .
  • connect thêm Đăng ký cần thiết vào trình cung cấp ngữ cảnh và việc đánh giá các đăng ký con sẽ bị trì hoãn cho đến khi thành phần được kết nối đã được kết xuất lại, việc đặt một thành phần được kết nối trong cây thành phần ngay phía trên thành phần bằng cách sử dụng useSelector sẽ ngăn chặn những vấn đề này miễn là thành phần được kết nối được hiển thị lại do cùng một bản cập nhật cửa hàng như thành phần hooks.

Như đã đề cập trước đó, theo mặc định, useSelector () sẽ thực hiện so sánh bình đẳng tham chiếu của giá trị đã chọn khi chạy hàm selector sau một hành động được gửi đi và sẽ chỉ khiến thành phần hiển thị lại nếu giá trị đã chọn thay đổi. Tuy nhiên, không giống như connect () , useSelector () không ngăn thành phần hiển thị lại do kết xuất gốc của nó, ngay cả khi đạo cụ của thành phần không thay đổi.

Nếu cần tối ưu hóa hiệu suất hơn nữa, bạn có thể cân nhắc gói thành phần chức năng của mình trong React.memo () :

  

const

CounterComponent

=

(

{

tên

}

)

= & gt;

{


const

bộ đếm

=

useSelector

(

(

trạng thái

)

= & gt;

trạng thái

.

bộ đếm

)


trả về

(


& lt;

div

& gt;


{

tên

}

:

{

bộ đếm

}


& lt; /

div

& gt;


)


}



xuất

const

MemoizedCounterComponent

=

Phản ứng

.

ghi nhớ

(

CounterComponent

)


Chúng tôi đã giảm bớt API hooks của chúng tôi từ bản phát hành alpha ban đầu, tập trung vào một bộ nguyên thủy API tối thiểu hơn.
Tuy nhiên, bạn có thể vẫn muốn sử dụng một số phương pháp mà chúng tôi đã thử trong ứng dụng của riêng bạn. Những ví dụ này đã sẵn sàng
để sao chép và dán vào codebase của riêng bạn.

hook này nằm trong bản phát hành alpha ban đầu của chúng tôi, nhưng đã bị xóa trong v7.1.0-alpha.4 , dựa trên Đề xuất của Dan Abramov .
Đề xuất đó dựa trên “người tạo hành động ràng buộc” không hữu ích trong trường hợp sử dụng dựa trên hooks và cũng gây ra
nhiều khái niệm phức tạp và phức tạp về cú pháp.

Có lẽ bạn nên gọi móc nối useDispatch trong các thành phần của mình để truy xuất tham chiếu đến send < / code>,
và gọi thủ công send (someActionCreator ()) trong các lệnh gọi lại và hiệu ứng nếu cần. Bạn cũng có thể sử dụng Redux
bindActionCreators hoạt động trong mã của riêng bạn để ràng buộc những người tạo hành động,
hoặc "thủ công" ràng buộc chúng như const bindAddTodo = (text) = & gt; điều phối (addTodo (text)) .

Tuy nhiên, nếu bạn vẫn muốn tự mình sử dụng hook này, thì đây là phiên bản có thể sao chép hỗ trợ chuyển trong hành động
trình tạo dưới dạng một hàm, một mảng hoặc một đối tượng.

  

nhập

{

bindActionCreators

}

từ

'redux'

< br />

nhập

{

useDispatch

}

từ

'react-redux'


nhập

{

useMemo

}

từ

'phản ứng'



xuất

chức năng

useActions

(< / p>

hành động

,

cảnh báo

)

{


const

điều phối

=

useDispatch

(

)


trả về

useMemo

(< / p>


(

)

= & gt ; < / p>

nếu

(

Mảng

.

isArray

(

hành động

)

)

{


return

hành động

.

map

(

(

a

)

= & gt;

bindActionCreators

(< / p>

a

,

công văn

)

)


}


trả về

bindActionCreators

(

hành động

,

công văn

)


}

,


deps

? < / p>

[

công văn

,

...

deps

]

: < / p>

]


)


}


< pre class = "prism-code language-js codeBlock_23N8 thin-scrollbar" tabindex = "0">

nhập

{

useSelector

,

nôngEqual

}

< / p>

từ

'react-redux'

< p class = "mã thông báo đồng bằng">

xuất

chức năng < / p>

useShallowEqualSelector

(

bộ chọn

)

{

< p class = "mã thông báo đồng bằng">

return

useSelector

(

bộ chọn

,

cạnEqual

)

}

Họ e là một số đánh đổi kiến ​​trúc cần cân nhắc khi quyết định có sử dụng hooks hay không. Mark Erikson đã tóm tắt những điều này một cách độc đáo trong hai bài đăng trên blog của anh ấy Suy nghĩ về React Hooks, Redux và Phân tách mối quan tâm Hooks, HOC và Tradeoffs .


Xem thêm những thông tin liên quan đến chủ đề hooks trong phản ứng js

Learn Custom Hooks In 10 Minutes

  • Tác giả: Web Dev Simplified
  • Ngày đăng: 2020-07-14
  • Đánh giá: 4 ⭐ ( 6474 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🚨 IMPORTANT:

    Full React Course: https://courses.webdevsimplified.com/learn-react-today

    In this video I cover everything you need to know about creating your own custom hooks. I go over all the main use cases for custom hooks as well as many common mistakes that developers make when creating custom hooks. In this video I will cover two different examples of how custom hooks can best be used. This is part of a series of React videos where I cover all the important hooks in React.

    📚 Materials/References:

    Custom Hooks Blog Article: https://blog.webdevsimplified.com/2019-11/how-to-write-custom-hooks
    React Hooks Playlist: https://www.youtube.com/playlist?list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h

    🧠 Concepts Covered:

    - How to use custom hooks in React
    - How to create custom hooks in React
    - Best practices for custom hooks in React

    🌎 Find Me Here:

    My Blog: https://blog.webdevsimplified.com
    My Courses: https://courses.webdevsimplified.com
    Patreon: https://www.patreon.com/WebDevSimplified
    Twitter: https://twitter.com/DevSimplified
    Discord: https://discord.gg/7StTjnR
    GitHub: https://github.com/WebDevSimplified
    CodePen: https://codepen.io/WebDevSimplified

    ReactJs WDS CustomHooks

Tìm hiểu về vòng đời thực thể trong Vue.js

  • Tác giả: allaravel.com
  • Đánh giá: 4 ⭐ ( 1961 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiểu chi tiết các Hook trong vòng đời thực thể Vue giúp bạn thiết kế ứng dụng chính xác và thực hiện chạy ngay khi lần đầu viết mã nguồn.

Cách thức hoạt động trong ReactJS Hooks

  • Tác giả: mvt-blog.com
  • Đánh giá: 5 ⭐ ( 5496 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thức hoạt động trong ReactJS Hooks

Tạo và xuất bản Gói NPM cho Hooks tùy chỉnh trong React JS

  • Tác giả: vncodeblog.com
  • Đánh giá: 5 ⭐ ( 8963 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nguyên tắc sử dụng Hook – React

  • Tác giả: vi.reactjs.org
  • Đánh giá: 4 ⭐ ( 5851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Introducing Hooks – React

  • Tác giả: reactjs.org
  • Đánh giá: 5 ⭐ ( 5139 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Giới thiệu Hooks trong React JS

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 1599 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Hooks trong React JS, giới thiệu các React hooks hay được sử dụng trong quá trình làm việc với React.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách chuyển chuỗi thành số trong JavaScript - chuỗi thành num js