Hãy cùng khám phá React useContext Hook bằng cách xây dựng một trình phát nhạc. Tôi cũng sẽ chỉ cho bạn cách một React Hook tùy chỉnh có thể làm cho useContext Hook dễ sử dụng hơn.

Bạn đang xem : usecontext hook in react

Hãy khám phá React useContext Hook bằng cách xây dựng một trình phát nhạc! Tôi cũng sẽ chỉ cho bạn cách một React Hook tùy chỉnh có thể làm cho Hook useContext dễ sử dụng hơn.

Những gì chúng tôi đang xây dựng trong hướng dẫn này.

Trước khi chúng tôi chuyển sang trình chỉnh sửa mã của mình , chúng ta hãy hiểu thêm một chút về React Context API và cách Hook useContext giúp đơn giản hóa việc chia sẻ dữ liệu với nhiều thành phần React.

React Context là gì?

Hãy tưởng tượng trong giây lát rằng bạn có một ứng dụng React với một thành phần mẹ duy nhất chứa nhiều cấp độ của các thành phần con bên trong nó.

Bây giờ, hãy tưởng tượng truyền dữ liệu từ thành phần trên cùng xuống cuối cùng thành phần con.

Dữ liệu trong React được chuyển từ trên xuống từ thành phần này sang thành phần khác thông qua đạo cụ .

Bạn phải chuyển dữ liệu đó qua từng thành phần và mọi thành phần, thông qua các đạo cụ của chúng, cho đến khi bạn đạt đến thành phần con cuối cùng.

Quá trình này rất vất vả, mệt mỏi và dễ xảy ra sai sót. Đây là lúc Context có thể giải quyết được vấn đề.

API ngữ cảnh của React cho phép bạn dễ dàng truy cập dữ liệu ở các cấp độ khác nhau của thành phần cây, mà không cần phải chuyển dữ liệu xuống thông qua các đạo cụ.

Tôi khuyên bạn nên đọc lướt qua Tài liệu về React trên Context trước khi tiếp tục.

useContext Hook hoạt động như thế nào?

Hook useContext cung cấp tất cả cùng chức năng mà bạn mong đợi từ API ngữ cảnh, chỉ được đóng gói thành một Hook đơn giản để sử dụng mà bạn có thể sử dụng bên trong các thành phần chức năng.

Hãy so sánh sự khác biệt giữa việc sử dụng Ngữ cảnh bên trong thành phần Lớp với việc sử dụng nó bên trong thành phần chức năng có móc nối useContext .

Ví dụ dưới đây cho thấy Ngữ cảnh đang được sử dụng trong thành phần Lớp:

  

nhập

AppContext

từ

'./ appContext.js '

;

class

Ví dụ

mở rộng

React

.

Thành phần

{

static

context

=

AppContext

;

kết xuất

(

)

{

let

value

=

this

.

ngữ cảnh

;

...

}

}

Và bên dưới là cùng một đối tượng Ngữ cảnh bên trong một thành phần chức năng, sử dụng useContext mới < / strong> Hook:

  

import

AppContext

từ

'./ appContext.js'

;

const

Ví dụ

=

(

)

= & gt;

{< / p>

const

context

=

useContext

(

AppContext

)

;

trả về

(

...

)

;

}

Ngữ cảnh cung cấp cho cả người tiêu dùng và nhà cung cấp. Khi sử dụng Hook useContext trong React, bạn phải nhớ chuyển toàn bộ đối tượng ngữ cảnh, không chỉ người tiêu dùng hoặc nhà cung cấp.

Bạn tạo đối tượng ngữ cảnh trong React bằng cách sử dụng React.CreateContext , sau đó chuyển vào một giá trị ban đầu, như sau:

  

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

AppContext

=

React

.

createContext

(

{

foo

:

'thanh'

}

)

;

Đối tượng AppContext này là đối tượng sẽ được chuyển làm đối số vào Hook useContext . Như thế này:

  

const

context

=

useContext

(

AppContext

)

;

Những gì chúng tôi đang xây dựng

Hãy tìm hiểu cách chúng tôi có thể sử dụng useContext Hook trong React để giúp chúng tôi tạo bản sao Spotify đơn giản!

Tôi đang sử dụng thư viện Bulma CSS và FontAwesome trong ví dụ của tôi dưới đây. Tôi đã tạo một ứng dụng React mới bằng cách sử dụng Create React App. Bạn có thể làm điều tương tự hoặc sử dụng dự án React hiện có.

Xây dựng trình phát nhạc là một ví dụ tuyệt vời để chứng minh cách hoạt động của Hook useContext vì nó có hai các thành phần con có chung trạng thái ứng dụng:

  • Danh sách các bài hát có nút phát / tạm dừng cho từng bài hát.
  • Bộ điều khiển trình phát để phát / tạm dừng, bỏ qua sang bản nhạc tiếp theo và chuyển sang bản nhạc trước.

Hãy xem ảnh chụp màn hình phía trên về những gì chúng tôi đang xây dựng. Danh sách các bài hát và các nút điều khiển trình phát ở dưới cùng đều cần biết bản nhạc nào hiện đang phát và bản nhạc đó có đang phát hay bị tạm dừng.

Do đó, chúng tôi sẽ sử dụng API ngữ cảnh của React để lưu trữ thông tin này bên trong trạng thái của nó và sau đó chúng tôi sẽ sử dụng Hook useContext để làm cho nó ở trạng thái này khả dụng cho cả hai thành phần.

Tạo bối cảnh trình phát nhạc

Tạo một tệp mới có tên MusicPlayerContext.js . Đây sẽ là một thành phần React hoạt động như một trình bao bọc nơi chúng tôi thiết lập Ngữ cảnh, nhưng cũng trả lại Trình cung cấp ngữ cảnh đó để chúng tôi bao bọc hai thành phần khác của chúng tôi.

MusicPlayerContext.js

  

nhập

React

từ

'phản ứng'

;

const

MusicPlayerContext

=

React

.

createContext

(

)

;

const

MusicPlayerProvider

=

(

đạo cụ

)

= & gt;

{

trả về

(

& lt;

MusicPlayerContext

.

Giá trị của nhà cung cấp

=

{

}

& gt;

{

đạo cụ

.

con

}

& lt; /

MusicPlayerContext.Provider

& gt;

)

;

}

xuất

{

MusicPlayerContext

,

MusicPlayerProvider

}

;

Trong đoạn mã trên, chúng tôi tạo một Ngữ cảnh mới có tên là MusicPlayerContext mà không có đối số nào được truyền vào bên trong dấu ngoặc đơn, cho biết rằng không có giá trị mặc định cho Ngữ cảnh.

Chúng tôi cũng xác định một thành phần React mới có tên MusicPlayerProvider trả về Nhà cung cấp của MusicPlayerContext, một lần nữa, không có giá trị ban đầu.

MusicPlayerContext.Provider là thứ cho phép các thành phần con truy cập giá trị của Context. Nó cung cấp đối tượng Context để các thành phần khác sử dụng.

Cuối cùng, chúng tôi xuất cả thành phần MusicPlayerContext Context và MusicPlayerProvider . Tôi sẽ cho bạn biết lý do tại sao chúng tôi sẽ sớm xuất cả Ngữ cảnh cũng như thành phần chức năng.

Tạo một ngữ cảnh có trạng thái

Ngữ cảnh của chúng tôi chưa có giá trị. Thay vì cung cấp cho nó một giá trị tĩnh, chúng tôi muốn cung cấp cho nó khả năng thay đổi giá trị của nó. Do đó, chúng tôi cần cung cấp trạng thái Ngữ cảnh của mình.

Đối với điều này, chúng tôi sẽ sử dụng Hook useState .

MusicPlayerContext.js

  

nhập

React

,

{

useState

}

từ < / p>

'phản ứng'

;

const

MusicPlayerContext

=

React

.

createContext

(

[

{

}

,

(

)

= & gt;

{

}

]

)

;

const

MusicPlayerProvider

=

(

đạo cụ

)

= & gt;

{

const

[

bang

,

setState

]

=

useState

(

{

}

)

;

trả về

(

& lt;

MusicPlayerContext.Provider

giá trị

=

{

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

bang

,

setState

]

}

& gt;

{

đạo cụ

.

con

}

& lt; /

MusicPlayerContext.Provider

& gt;

)

;

}

xuất

{

MusicPlayerContext

,

MusicPlayerProvider

}

;

Hãy xem qua đoạn mã trên.

  

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

MusicPlayerContext

=

React

.

createContext

(

[

{

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

,

(

)

= & gt;

{

}

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

)

;

< / pre>

Dòng này tạo Ngữ cảnh, như trước đây, nhưng lần này chúng ta đang truyền vào một mảng có hai giá trị: một đối tượng trống và một hàm trống, làm giá trị ban đầu. Bạn sẽ biết lý do tại sao chỉ sau một giây.

  

const

[

bang

,

setState

]

=

useState

(

{

}

)

;

Tại đây, chúng tôi sử dụng Hook useState để cung cấp trạng thái cho chúng tôi. Chúng tôi đang lưu trữ nhiều giá trị bên trong trạng thái này, vì vậy chúng tôi đặt tên cho biến trạng thái đầu tiên và biến thứ hai là setState .

  

& lt;

MusicPlayerContext.Provider

< p class = "token attr-name"> giá trị

=

{

[

bang

,

setState

]

}

& gt;

{

đạo cụ

.

con

}

& lt; /

MusicPlayerContext.Provider

& gt;

Cuối cùng, ở đây chúng tôi đặt đối tượng trạng thái và hàm setter vào một mảng và chuyển nó vào Giá trị của Nhà cung cấp ngữ cảnh. Đây là lý do tại sao chúng tôi truyền vào một mảng với một đối tượng trống và một hàm trống khi tạo Ngữ cảnh.

Tất cả những gì chúng ta cần làm để truy cập trạng thái của Ngữ cảnh là nhập nó vào một thành phần và sử dụng useContext Kết nối trong React!

  

import

{

MusicPlayerContext

}

từ

" ./ MusicPlayerContext "

;

...

const

[

bang

,

setState

]

=

useContext

(

MusicPlayerContext

)

;

Điều đó tuyệt vời làm sao ?!

Cập nhật trạng thái của ngữ cảnh

Hãy cùng tìm hiểu về trạng thái mới của ngữ cảnh!

Chuyển đến App.js và nhập thành phần MusicPlayerProvider mới. Sau đó, bọc nó xung quanh một thành phần mới có tên là TrackList .

App.js

  

nhập

React

từ

'phản ứng'

;

nhập

TrackList

từ

"./ TrackList"

;

nhập

{

MusicPlayerProvider

}

từ

" ./ MusicPlayerContext "

;

const

Ứng dụng

=

(

)

= & gt;

{< / p>

trả về

(

& lt;

MusicPlayerProvider

& gt; < / p>

& lt;

div

className

=

"

vùng chứa

"

& gt;

& lt;

Danh sách theo dõi

/ & gt;

& lt; /

div

& gt;

& lt; /

MusicPlayerProvider

& gt;

)

;

}

xuất

default

Ứng dụng

;

Bạn sẽ phải tạo một tệp mới cho thành phần TrackList .

Sau khi thực hiện, hãy chuyển sang bên trong TrackList.js và nhập MusicPlayerContext. Hãy nhớ rằng vì chúng tôi đang xuất hai giá trị từ MusicPlayerContext, nên bạn cần sử dụng nhập có tên.

Để kiểm tra xem trạng thái Ngữ cảnh của chúng tôi có cập nhật hay không, hãy thêm một nút đơn giản với onClick gọi setState trong Ngữ cảnh của chúng tôi. Chúng tôi sẽ sử dụng Hook useContext để cung cấp điều này cho chúng tôi, như sau:

TrackList.js

  

nhập

React

,

{

useContext

}

từ

" phản ứng "

nhập

{

MusicPlayerContext

}

từ

" ./ MusicPlayerContext "

;

const

TrackList

=

(

)

= & gt;

{< / p>

const

[

bang

,

setState

]

=

useContext

(

MusicPlayerContext

)

;

return

(

& lt;

nút

onClick

=

{

(

)

= & gt;

setState

(

bang

= & gt;

(

{

...

trạng thái

, tên

:

'Đã nhấp!'

}

)

)

}

& gt;

{

bang

.

name

}

& lt; /

nút

& gt;

)

}

xuất

default

TrackList

Nếu bạn đã khám phá useState Hook trong React trước đây, bạn có thể nhận thấy điều gì đó khác biệt về hàm setState ở trên ...

  

setState

(< / p> trạng thái

= & gt;

(

{

...

trạng thái

,

tên

:

'đã nhấp vào!'

}

)

) < / p>

  • Chúng tôi không sử dụng móc useState cho mỗi giá trị mà chúng tôi muốn lưu trữ ở trạng thái. Thay vào đó, chúng tôi sử dụng một đối tượng trạng thái duy nhất và cập nhật các cặp khóa / giá trị, toàn bộ đối tượng sẽ bị ghi đè. Đó là những gì cú pháp ... state làm.

Hãy tiếp tục và lưu tệp, chuyển đến ứng dụng React đang chạy của bạn và nhấp vào nút. Bạn sẽ thấy nhãn nút thay đổi để đọc Đã nhấp!

Hiển thị danh sách các tuyến đường từ trạng thái ngữ cảnh

Thành phần phản ứng TrackList của chúng tôi hơi trống ... Tại sao chúng ta không chuyển một số tiêu đề bài hát ban đầu vào Context?

Mở MusicPlayerContext , tìm nơi chúng ta đang khởi tạo đối tượng trạng thái bằng useState Hook và thêm một mảng các bản nhạc đến giá trị ban đầu:

MusicPlayerContext.js

  

const

MusicPlayerProvider

=

(

đạo cụ

)

= & gt;

{

const

[

bang

,

setState

]

=

useState

(

{

theo dõi

:

[

{

tên

:

'Tắc kè hoa bị mất - Genesis'

,

}

,

{

tên

:

'The Hipsta - Shaken Soda'

,

}

,

{

tên

:

'Tobu - Thật thú vị'

,

}

,

]

,

}

)

;

return

(

& lt;

MusicPlayerContext.Provider

value

=

{

[

bang

,

setState

]

}

& gt;

{

đạo cụ

.

con

}

& lt; /

MusicPlayerContext.Provider

& gt;

)

;

}

;

Quay lại Danh sách theo dõi thành phần, hãy ánh xạ một loạt các bản nhạc mới đến từ trạng thái của ngữ cảnh:

TrackList.js

 

nhập

React

từ

" react "

;

nhập

{

MusicPlayerContext

}

từ

" ./ MusicPlayerContext "

;

const

TrackList

=

(

)

= & gt;

{< / p>

const

[

bang

,

setState

]

=

useContext

(

MusicPlayerContext

)

;

return

(

& lt;

& gt;

{

bang

.

theo dõi

.

bản đồ

(

theo dõi

= & gt;

(

& lt;

div

className

=

"

box

"

< / p>

& gt;

& lt;

div

className

=

"

tên bài hát

"

& gt;

{

theo dõi

.

name

}

& lt; /

div

& gt;

& lt; /

div

& gt;

)

)

}

& lt; /

& gt;

)

}

export

default

TrackList

Vì các bản nhạc là một mảng, tất cả những gì chúng ta cần làm để lặp lại một mảng trong React là sử dụng hàm bản đồ. Mỗi tuyến đường là một đối tượng với một khóa duy nhất được gọi là tên.

Việc hiển thị tên của tuyến đường dễ dàng như đặt track.name vào bên trong dấu ngoặc nhọn bên trong hàm bản đồ, như sau:

  

& lt;

div className

=

"song-title"

& gt;

{

theo dõi

.

tên

}

& lt;

/

div

& gt;

< / code>

Cập nhật ngữ cảnh trong React từ một nơi

Chúng tôi phải nhập ngữ cảnh bất cứ khi nào chúng tôi muốn sử dụng hoặc cập nhật trạng thái từ useContext Hook trong ứng dụng React của chúng tôi. < / p>

Điều này phù hợp để thực hiện các lệnh gọi đơn giản, một dòng như truy xuất và cập nhật trạng thái. Tuy nhiên, bất cứ khi nào chúng tôi giới thiệu logic bổ sung liên quan đến trạng thái, các thành phần của chúng tôi sẽ trở nên phức tạp hơn nhiều.

Để tôi cho bạn một ví dụ:

Khi bạn nhấp vào nút phát trên một bản nhạc, trước tiên bạn phải kiểm tra xem bản nhạc đó hiện có đang phát hay không trước khi bắt đầu chơi, nếu không, bạn sẽ muốn tạm dừng bản nhạc đó. Nếu nó không phát, bạn đặt bản nhạc đó để phát.

Logic của ví dụ này có thể giống như sau:

  

function

playTrack

(

chỉ mục

)

{

if

(

index

===

bang

.

currentTrackIndex

)

{

pauseTrack

(

)

;

}

khác

{

setState

(

state

= & gt;

(

{

...

bang

,

currentTrackIndex

:

index

,

is Phát

:

< p class = "token boolean"> true

}

)

)

;

}

}

Logic này có thể rất phổ biến bên trong ứng dụng trình phát nhạc và sẽ được nhiều thành phần sử dụng. < / p>

Do đó, hãy đặt tất cả logic chung này vào một nơi để tất cả các thành phần của chúng ta sử dụng!

Xin chào các bạn với React Hooks tùy chỉnh!

Sử dụng Custom React Hook để quản lý ngữ cảnh

Tạo một tệp mới có tên useMusicPlayer.js . Vì đây là một React Hook tùy chỉnh, chúng tôi sử dụng 'use' trước tên của Hook.

Nếu bạn muốn tìm hiểu cách hoạt động của React Hooks tùy chỉnh các thành phần của bạn gọn gàng hơn nhiều, hãy xem hướng dẫn của tôi về Đơn giản hóa biểu mẫu với các móc phản ứng tùy chỉnh .

Tiếp theo, hãy mang trong Ngữ cảnh của chúng tôi và có quyền truy cập vào các biến trạng thái và setState bằng cách sử dụng useContext Hook trong React Hook tùy chỉnh mới của chúng tôi.

useMusicPlayer.js < / p>

  

nhập

{

useContext

}

từ

'phản ứng'

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

nhập

{

MusicPlayerContext

}

từ

" ./ MusicPlayerContext "

;

const

useMusicPlayer

=

(

)

= & gt;

{< / p>

const

[

bang

,

setState

]

=

useContext

(

MusicPlayerContext

)

;

}

;

xuất

mặc định

useMusicPlayer

;

Cuối cùng, tạo một hàm mới, togglePlay cập nhật giá trị isPlaying bên trong trạng thái Ngữ cảnh thành true hoặc false, tùy thuộc vào việc nó đã phát hay chưa.

useMusicPlayer.js

  

nhập

{

useContext

}

từ

'phản ứng'

;

nhập

{

MusicPlayerContext

}

từ

" ./ MusicPlayerContext "

;

const

useMusicPlayer

=

(

)

= & gt;

{< / p>

const

[

bang

,

setState

]

=

useContext

(

MusicPlayerContext

)

;

function

togglePlay

(

)

{

setState

(

state

= & gt;

(

{

...

bang

,

isPhát

:

!

bang

.

is Phát < p class = "dấu chấm câu">}

)

)

;

}

trả về

{

chuyển đổi Phát

,

}

}

;

xuất

mặc định

useMusicPlayer

;

Trong khi chúng tôi ở đây, hãy tiếp tục và thêm các chức năng để phát một bản nhạc, phát bản nhạc trước và phát bản nhạc tiếp theo:

useMusicPlayer.js

  

import

{

useContext

}

từ

'phản ứng '

;

nhập

{

MusicPlayerContext

}

từ

" ./ MusicPlayerContext "

;

const

useMusicPlayer

=

(

)

= & gt;

{< / p>

const

[

bang

,

setState

]

=

useContext

(

MusicPlayerContext

)

;

function

playTrack

(

index

)

{

if

(

index

===

bang

.

currentTrackIndex

)

{

togglePlay

(

)

;

}

khác

{

setState

(

state

= & gt;

(

{

...

bang

,

currentTrackIndex

:

index

,

is Phát

:

true

}

)

)

;

}

}

function

togglePlay

(

)

{

setState

(

state

= & gt;

(

{

...

bang

,

isPhát

:

!

bang

.

is Phát < p class = "dấu chấm câu">}

)

)

;

}

function

playPreviousTrack

(

)

{

const

newIndex

=

(

(

bang

.

currentTrackIndex

+

-

1

)

%

bang

.

theo dõi

.

length

+

bang

. < / p> theo dõi

.

length

)

%

trạng thái

.

theo dõi

.

length

;

playTrack

(

newIndex

)

">;

}

chức năng

playNextTrack

(

)

{

const

newIndex

=

(

bang

.

currentTrackIndex

+

1

) >

%

state

.

theo dõi

.

length

;

playTrack

(

newIndex

)

">;

}

trả về

{

playTrack

,

chuyển đổi Phát

,

hiện tạiTrackName

:

bang

.

currentTrackIndex

! ==

null

& amp; & amp;

state

.

theo dõi

[

bang

.

currentTrackIndex

]

. p> tên

,

trackList

:

bang

.

theo dõi

,

is Phát

:

bang

.

is Phát

,

playPreviousTrack

,

playNextTrack

,

}

}

;

xuất

mặc định

useMusicPlayer

;

Hãy dành một chút thời gian để đọc qua đoạn mã trên và hiểu mỗi hàm mới này có tác dụng gì. Chúng tôi đang trả về tất cả các hàm cùng với một số biến hữu ích> và isPlaying , tất cả đều được lấy từ hook useContext mà React cung cấp cho chúng ta "Language-JavaScript"> return

{

playTrack

,

chuyển đổi Phát

,

hiện tạiTrackName

:

bang

.

currentTrackIndex

! ==

null

& amp; & amp;

bang

.

theo dõi

[

bang

.

currentTrackIndex

]

. tên

,

trackList

:

bang

.

theo dõi

,

is Phát

:

bang

.

is Phát

,

playPreviousTrack

,

playNextTrack

,

}

Phát một bản nhạc từ Thành phần TrackList

Bây giờ chúng ta đã có tất cả những thứ này các chức năng hữu ích trong React Hook tùy chỉnh của useMusicPlayer , hãy sửa đổi một chút thành phần TrackList :

TrackList.js < / p>

  

nhập

React

từ

"phản ứng"

;

nhập

{

FontAwesomeIcon

}

từ

" @ fortawesome / react-fontawesome "

;

nhập

{

fa Phát

,

faPause

}

từ

" @ fortawesome / free-solid-svg-icon "

;

nhập

useMusicPlayer

từ

"./ useMusicPlayer"

;

const

TrackList

=

(

)

= & gt;

{< / p>

const

{

trackList

,

currentTrackName

,

playTrack

,

is Phát

}

=

sử dụngMusicPlayer

(

)

;

trả về

(

& lt;

& gt;

{

trackList

.

bản đồ

(

(

track

,

index

)

= & gt;

(

& lt;

div

className

=

"

box

"

& gt;

& lt;

nút

className

=

"

nút

"

onClick

=

{

(

) < / p>

= & gt;

playTrack

(

index

)

}

& gt;

< p class = "mã thông báo văn bản thuần">

{

currentTrackName

===

theo dõi

.

name

& amp; & amp;

is Phát

?

& lt;

FontAwesomeIcon

biểu tượng

>

/ & gt;

:

biểu tượng

=

{

faPlay

}

/ & gt;

}

& lt; /

nút

& gt;

& lt;

div

className

=

"

tên bài hát

"

& gt;

{

theo dõi

.

name

}

& lt; /

div

& gt;

& lt; /

div

& gt;

)

)

}

& lt; /

& gt;

)

}

xuất

default

TrackList

Thay vì nhập ngữ cảnh trực tiếp vào thành phần của chúng tôi, chúng tôi đang sử dụng các hàm trợ giúp của useMusicPlayer Hook để tương tác với trạng thái ngữ cảnh Các thành phần React của chúng tôi gọn gàng hơn nhiều vì chúng tôi có thể đơn giản gọi các hàm đó từ trình xử lý sự kiện, như sau:

  

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

& lt;

nút

className

>

=

"

nút

"

< / p>

onClick

=

{

(

)

= & gt;

playTrack

(

index

)

}

& gt;

< / code>

Thiết lập điều khiển trình phát

Đối với thành phần React tiếp theo, trình điều khiển trình phát nhạc sẽ điều khiển!

Tạo một thành phần mới có tên là PlayerControls. js và thêm mã sau vào đó:

PlayerControls.js

  

nhập

React

từ

"react" < / p>

nhập

{

FontAwesomeIcon

}

từ

" @ fortawesome / react-fontawesome "

;

nhập

{

fa Tạm dừng

,

fa Phát

,

faStepBackward

,

faStepForward

}

từ p>

"@ fortawesome / free-solid-svg-icon"

;

nhập

useMusicPlayer

từ

"./ useMusicPlayer"

;

const

Điều khiển

=

(

)

= & gt;

{< / p>

const

{

is Phát

,

currentTrackName

,

toggle Phát

,

playPreviousTrack

,

playNextTrack

} < / p>

=

useMusicPlayer

(

)

;

return

(

& lt;

& gt;

& lt;

div

className

=

"

hộp điều khiển có-nền-xám-tối

"

& gt;

& lt;

div

className

=

"

current-track has-text-light

"

& gt;

& lt;

dấu chấm câu

& gt;

{

currentTrackName

}

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

& lt; /

dấu chấm câu

& gt;

& lt; /

div

& gt;

& lt;

div

& gt;

& lt;

nút

className

=

"

nút có-text-light has-background-grey- dark

"

onClick

=

{

playPreviousTrack

}

{

!

currentTrackName

}

& gt; < / p>

& lt;

FontAwesomeIcon

biểu tượng

=

{ faStepBackward

}

/ & gt;

& lt; /

nút

& gt;

& lt;

nút

className

=

"

nút có-text-light has-background-grey- dark

"

onClick

=

{

toggle Phát

}

{

!

currentTrackName

}

& gt; < / p>

{

is Phát

?

& lt;

FontAwesomeIcon

icon

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

{

fa Tạm dừng

}

< / p>

/ & gt;

:

& lt;

FontAwesomeIcon

biểu tượng

=

{

faPlay

} < / p>

/ & gt;

}

& lt; /

nút

& gt;

& lt;

nút

className

=

"

nút có- text-light has-background-grey-dark

"

onClick

=

{

playNextTrack

}

bị vô hiệu hóa

=

{

!

currentTrackName

}

& gt;

& lt;

FontAwesomeIcon

biểu tượng

=

{ faStepForward

}

/ & gt;

& lt; /

nút

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

& gt;

)

}

Điều khiển

xuất

mặc định

Bạn có nhận thấy những điểm tương đồng giữa thành phần này và thành phần trước không?

Chúng tôi đang nhập useMusicPlayer Custom Hook một lần nữa để cung cấp tất cả các chức năng trợ giúp hữu ích tương tác với trạng thái Ngữ cảnh.

Cuối cùng, chuyển đến App.js và đảm bảo rằng bạn đang nhập các thành phần con mới này và gói chúng trong MusicPlayerProvider . Nếu chúng không được bao bọc trong trình cung cấp Ngữ cảnh, chúng sẽ không thể truy cập trạng thái của Ngữ cảnh!

App.js

  

nhập

React

từ

'phản ứng'

;

nhập

TrackList

từ

"./ TrackList"

;

nhập

PlayerControls

từ

"./ PlayerControls"

;

nhập

{

MusicPlayerProvider

}

từ

" ./ MusicPlayerContext "

;

function

Ứng dụng

(

)

{

trả về

(

& lt;

MusicPlayerProvider

& gt; < / p>

& lt;

div

className

=

"

vùng chứa

"

& gt;

& lt;

Danh sách theo dõi

/ & gt;

& lt;

PlayerControls

/ & gt;

& lt; /

div

& gt;

& lt; /

MusicPlayerProvider

& gt;

)

;

}

xuất

default

Ứng dụng

;

Và cuối cùng nhưng không kém phần quan trọng, hãy đảm bảo rằng bạn đã thêm các giá trị mặc định vào trạng thái Ngữ cảnh, bên trong MusicPlayerContext.js : < / strong> p>

MusicPlayerContext.js

  

...

const

[

bang

,

setState

]

=

useState

(

{

theo dõi

:

[

{

tên

:

'Tắc kè hoa bị mất - Genesis'

,

}

,

{

tên

:

'The Hipsta - Shaken Soda'

,

}

,

{

tên

:

'Tobu - Thật thú vị'

,

}

,

]

,

currentTrackIndex

:

null

,

isPlaying

:

false

,

}

)

;

...

Tạo nhạc bằng âm thanh mới ()

Nếu bạn chuyển sang ứng dụng React đang chạy của bạn, bạn sẽ nhận thấy rằng còn thiếu một thứ ..... không có âm thanh!

Đó là vì chúng tôi không chơi bất kỳ ứng dụng nào! Để làm điều đó, bạn cần một số tệp âm thanh để phát. Có rất nhiều nơi để tìm các tệp âm thanh miễn phí trực tuyến, chỉ có Google. Bensound.com là trang web tải xuống trực tuyến miễn phí cung cấp tuyển chọn nhạc miễn phí bản quyền cho thư mục / src của dự án của bạn. < / p>

Bây giờ, chúng tôi cần sửa đổi MusicPlayerContext để khởi tạo đối tượng Audio () mới và nhập các tệp âm thanh mới của chúng tôi:

  

...

import

nhập

'./ LostChameleon.mp3'

;

nhập

Rock

từ

'./ TheHipsta.mp3'

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

nhập

Tobu

từ

'./ Tobu.mp3'

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

const

MusicPlayerProvider

=

= & gt;

{

const

[

bang

,

setState

]

=

useState

(

{

audioPlayer

:

mới

Âm thanh

(

)

,

theo dõi

:

[

{

tên

:

'Tắc kè hoa bị mất - Genesis'

,

tệp

:

LostChameleon

,

}

,

{

tên

:

'The Hipsta - Shaken Soda'

,

tệp

:

Rock

,

}

,

{

tên

:

'Tobu - Thật thú vị'

,

tệp

:

Tobu

,

}

,

]

,

...

}

)

;

...

}

;

...

Chúng tôi có một đối tượng Âm thanh duy nhất được lưu trữ trong trạng thái Ngữ cảnh để phát âm thanh từ đó. Nhờ có Hook useContext trong React, bạn cũng rất dễ dàng truy cập nó trong Hook tùy chỉnh của chúng tôi, giống như trước đây!

Tất cả những gì còn lại là thay đổi React Hook tùy chỉnh của chúng tôi, < strong> useMusicPlayer , để tương tác với đối tượng Audio:

useMusicPlayer.js

  

...

function

PlayTrack

(

index

)

{

if

(

index

===

bang

.

currentTrackIndex

)

{

togglePlay

(

)

;

}

khác

{

trạng thái

.

audioPlayer

.

tạm dừng

(

)

;

trạng thái

.

audioPlayer

=

new

Âm thanh

(

bang

.

theo dõi

[

index

]

.

tệp

)

;

trạng thái

.

audioPlayer

.

phát

(

)

;

setState

(

state

= & gt;

(

{

...

bang

,

currentTrackIndex

:

index

,

is Phát

:

< p class = "token boolean"> true

}

)

)

;

}

}

function

togglePlay

(

)

{

if

(

bang

.

is Phát

)

{

trạng thái

.

audioPlayer

.

tạm dừng

(

)

;

}

khác

{

trạng thái

.

audioPlayer

.

phát

(

)

;

}

setState

(

state

= & gt;

(

{

...

bang

,

isPhát

:

!

bang

.

is Phát < p class = "dấu chấm câu">}

)

)

;

}

...

Kết thúc

Vậy là bạn đã có nó. Sau khi đọc hướng dẫn này, bạn sẽ biết được:

  • Lợi ích của việc sử dụng React Context trong các cây thành phần dài.
  • Cách tạo một Context mới trong React bằng cách sử dụng React.createContext.
  • Cách sử dụng Hook useContext trong React để cung cấp cho chúng tôi quyền truy cập vào đối tượng Context gần nhất trong các thành phần chức năng của chúng tôi.
  • < li> Khi nào thì thêm trạng thái vào Ngữ cảnh và việc truy xuất và cập nhật trạng thái dễ dàng như thế nào.

  • Lợi ích của việc trừu tượng hóa logic thông thường thành một React Hook tùy chỉnh.
  • Cách để phát bằng đối tượng Audio () .

Phew! Chúng tôi đã đề cập rất nhiều trong một hướng dẫn duy nhất. Tôi hy vọng tất cả đều thích đọc nó như tôi đã viết nó.

Như mọi khi, vui lòng để lại bình luận bên dưới nếu bạn có câu hỏi, vấn đề hoặc nếu bạn thích đọc!

👋 Xin chào, tôi là James Dietrich

Tôi làm việc toàn thời gian tại một công ty khởi nghiệp dựa trên AI ở San Francisco, CA. Niềm đam mê thực sự của tôi là giúp đỡ người khác. Các hướng dẫn của tôi giúp hơn 150.000 nhà phát triển học React và JavaScript mỗi tháng. Tiếp tục

Tôi làm việc toàn thời gian tại một công ty khởi nghiệp dựa trên AI ở San Francisco, CA. Niềm đam mê thực sự của tôi là giúp đỡ người khác. Các hướng dẫn của tôi giúp hơn 150.000 nhà phát triển học React và JavaScript mỗi tháng. Theo dõi trên Twitter hoặc Github


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

React State Management using Context API (useContext + useReducer Hooks = Magic 💥)

  • Tác giả: The Full Stack Junkie
  • Ngày đăng: 2020-08-18
  • Đánh giá: 4 ⭐ ( 6327 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Let's look at how to use the useReducer and useContext hooks in React.js
    to handle global state management in a clean and easy way. In this video I explain both of these hooks in simple examples and then show how we use them together to create a very easy global state workflow.

    I hope y'all had a great day and I hope you found this video helpful.
    If you did please remember to LIKE and SUBSCRIBE🤓

    React Hooks Docs:
    https://reactjs.org/docs/hooks-reference.html

    Timestamps:
    0:00 Intro
    0:13 Why we use global state
    3:00 useReducer Explained
    11:38 useContext Explained
    24:54 useReducer + useContext
    49:41 Outro

    My personal website
    =================
    https://www.thefullstackjunkie.com

Cách sử dụng hook useContext React

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 3312 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phản ứng useContext với “setState”

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

useContext trong React Native

  • Tác giả: vie.delavaio.com
  • Đánh giá: 4 ⭐ ( 6750 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã cố gắng sử dụng ngữ cảnh hook trong React Native, nhưng nó dường như không hoạt động, nó trả về không xác định. Tuy nhiên, khi tôi sử dụng nó hoạt động tốt, bạn có biết nếu useContex ...

Trong mỗi cặp phản ứng sau, phản ứng nào có tốc độ lớn hơn ? Nhiệt

  • Tác giả: khoahoc.vietjack.com
  • Đánh giá: 3 ⭐ ( 4608 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong mỗi cặp phản ứng sau, phản ứng nào có tốc độ lớn hơn ? Nhiệt phân riêng và nhiệt phân hỗn hợp KClO3 với MnO2

useContext trong React Hook

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 2846 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về useContext trong React Hooks, đây là bài viết tiếp nối các bài viết về React Hooks trước đó, xem thêm bài viết React Context API trước khi đọc.

context-api

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 3900 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Helpex - Trao Đổi & Giúp Đỡ - chia sẻ, hỏi đáp kiến thức các lĩnh vực, gặp gỡ các chuyên gia kế toán, it...

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 đặt màu nền bằng HTML và CSS - làm thế nào để css màu nền

By ads_php