thắc mắc Tại sao ReactJS lại hot đến vậy ạ?

nntgwww · 9/4/23

Hello.World đã nói:
tks bác, còn vấn đề này k lquan lắm nhưng cũng liên quan đến react e xin hỏi luôn. Tại sao bây giờ nhiều người nói dùng SWR/React-query có thể thay thế th Redux ạ? Điều này có thực sự đúng, nếu vậy khi có 1 data (có liên quan đến api) muốn share nhiều component thì ở mỗi component đó ta dùng swr/react-query gọi lại api là được vì th swr/react-query có cache đúng k ạ?

redux chỉ là 1 cái generic store thôi. Còn handle cache, retry, error, fetch data , fetching state đó là chuyện của react query, swr. 2 thằng này nó tự có 1 cái store của riêng nó.

Còn redux muốn làm dc như react query, swr thì sau này redux có thêm pkg rtk query. Nhưng mà phải hiểu là redux cơ bản nó là 1 cái store generic. Muốn nhét gì vô cũng dc.

Còn thay thế thì lý do đơn giản ko xài hết feature của redux, cần code nhanh ít rườm ra. Chứ redux + rtk query cũng làm tương tự dc swr react query.

nntgwww · 9/4/23

havorx đã nói:
React query có support server-side https://tanstack.com/query/v4/docs/react/guides/ssr

JavaScript:

export async function getStaticProps() {
  const posts = await getPosts()
  return { props: { posts } }
}

function Posts(props) {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    initialData: props.posts,
  })

  // ...
}

fen thấy cái khúc initialData không. react query vẫn chỉ xài dưới client side thôi. Cái khác ở đây là nó nhận data init từ server nên khi mới render ko có kiểu ko có data sẵn.

havorx · 9/4/23

Hello.World đã nói:
tks bác, còn vấn đề này k lquan lắm nhưng cũng liên quan đến react e xin hỏi luôn. Tại sao bây giờ nhiều người nói dùng SWR/React-query có thể thay thế th Redux ạ? Điều này có thực sự đúng, nếu vậy khi có 1 data (có liên quan đến api) muốn share nhiều component thì ở mỗi component đó ta dùng swr/react-query gọi lại api là được vì th swr/react-query có cache đúng k ạ?

Redux vẫn dùng cho client state management

nntgwww đã nói:
JavaScript:

export async function getStaticProps() { const posts = await getPosts() return { props: { posts } } } function Posts(props) { const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts, initialData: props.posts, }) // ... }

fen thấy cái khúc initialData không. react query vẫn chỉ xài dưới client side thôi. Cái khác ở đây là nó nhận data init từ server nên khi mới render ko có kiểu ko có data sẵn.

À không mình tưởng fen nói ko có dùng ở nextjs thôi chứ đúng là thằng react-query chỉ là quản lý server-state mà ko có cache server-side

Xiao_man_tau · 9/4/23

teeeeeeeee đã nói:
vậy ý fence khác gì ý tôi
chẳng phải autofill full deps là bad pratice hay sao

via theNEXTvoz for iPhone

Sai nhé, nó là good practice, khi dùng đúng thì phải includes tất cả những gì rules gợi ý.

Trường hợp 1% là có thể trừ một số đi cho gọn, ví dụ những deps nào mà nó đảm bảo func không thay đổi như useState, useDispatch... Chỉ là nhìn code ngắn hơn thôi chứ ném thêm vào deps cũng vẫn vậy.

teeeeeeeee · 9/4/23

Xiao_man_tau đã nói:
Sai nhé, nó là good practice, khi dùng đúng thì phải includes tất cả những gì rules gợi ý.
h
Trường hợp 1% là có thể trừ một số đi cho gọn, ví dụ những deps nào mà nó đảm bảo func không thay đổi như useState, useDispatch... Chỉ là nhìn code ngắn hơn thôi chứ ném thêm vào deps cũng vẫn vậy.

Oke nếu fence nghĩ vậy là tốt thì cứ giữ suy nghĩ đó
từng thứ mà included vào trong deps array đều phải đc React compare trước khi đưa ra quyết định
chỉ là chưa tới lúc nó thành bottleneck th

via theNEXTvoz for iPhone

nntgwww · 9/4/23

teeeeeeeee đã nói:
Oke nếu fence nghĩ vậy là tốt thì cứ giữ suy nghĩ đó
từng thứ mà included vào trong deps array đều phải đc React compare trước khi đưa ra quyết định
chỉ là chưa tới lúc nó thành bottleneck th

via theNEXTvoz for iPhone

Shallow compare chứ có deep compare đâu nhỉ? Chưa hiểu bottleneck thế nào?. Như fen nói thì react nó đã lưu ý vấn đề hiệu năng rồi. so sanh compare a === b thì chậm thế nào nhỉ?

Còn hiện tại ai đang ko làm theo document của React thì biết rồi. Fen cũng chả đưa ra được dẫn chứng nào chứng minh của fen nói cả. Tại sao phải tin lời của fen so với cái document nói? Ko lẽ mấy thằng core team nó dốt hơn fen?
Còn mấy cái lưu ý này trong document đều có nói đến, thậm chí còn tốn sức tạo ra cái eslint rule cho mấy thằng dev xài, mà hóa ra cơ số mấy anh giỏi trên đây ignore ko thèm xài luôn :go:

KeBatDungThu · 9/4/23

Hôm trước mới tìm được cái blog này có nhiều bài về react khá hay, ai có thêm các tài liệu về react (blog, sách, youtube) thì chia sẻ với
https://www.developerway.com/

telbook · 9/4/23

document có thể outdate, chứ eslint thì nên tin :byebye:

. Vì tụi nó thảo luận rfc chán chê mới làm được cái rule.

KeBatDungThu · 9/4/23

Hồi trước doc của react đúng là sơ sài thật, bản mới làm lại tốt hơn nhiều lần r, ít nhất mỗi cái hook đều có chục cái ví dụ, cùng với đấy là các lưu ý. May mà hồi mới học thẳng khóa của maxx trên udemy chứ học theo doc chắc thất nghiệp quá

người anh hùng bp · 9/4/23

Xưa trường tôi dạy 3 môn web.
Môn 1 là web cơ bản, chủ yếu là dùng các file html thuần link qua lại vs nhau tạo thành 1 trang web, ko xài bất kì framework nào, chỉ xài html/css/js và php cho query data.
Môn 2 là web server side renderer, dạy cách dựng web server, dùng ngôn ngữ bất kì để dựng cũng dc (nhưng tôi chủ yếu dc dạy asp.net và nodejs, có dạy 1, chút java), sau đó dùng chính cái web server đó bắn ra file html tới browser của ng dùng.
Môn thứ 3 mới là dạy client side renderer, tách biệt giữa web server và client, lúc này client sẽ gọi http request tới server thông qua 1 api để lấy data. Môn này thì t dc học bằng reactJS( trong kì đó có 1 môn nữa có dính vueJS), còn server thì viết = Nodejs(express framework).

Ông thầy dạy t ngày đó ổng có nói là khi cho các b sv học web thẳng lên client side renderer thì thường điểm các b ấy rất thấp và ko hiểu dc bản chất, ổng rút kn nên dạy server side renderer( multipage app) trc r ms dạy client side renderer( single page app)

H t ra trg lâu r nhưng không làm bên web, mà thấy học xong mấy cái kiến thức này thì học ngôn ngữ nào cũng ok mà nhỉ, đâu cần lăn tăn. Tới h t vẫn nhớ ổng dạy gì, h học lại chắc 2-3 tháng là ổn đủ đi apply fresher.

INHT · 9/4/23

Do mấy công ty tuyển nhiều. FE thì job react gấp chục lần job khác. Do cộng đồng nó mạnh, làm oursource nhanh.
Nhưng mà số lượng job chả là gì so với số lượng người học đông như kiến bây giờ. Làm web react không cần base IT nhiều (data struct, algo, oop,..). Js thì code kiểu quần gì cũng chạy được (tất nhiên hầu hết dự án outsource react hiện giờ code toàn như đống rác).
Sinh viên thì cứ tập trung base cho cứng (Oop, algo, data struct,..). Theo FE thì tập trung reponsive, canvas, render performance, state management, architect,...
Ngôn ngữ chỉ là công cụ. Đưa đẩy làm cái gì thì code cái đó. Chủ yếu là là cái base chứ syntax người ta train tầm 1 tháng là code ngon lành. Tuyển intern thì chỉ mấy chỗ đang cần người làm task mới yêu cầu ngôn ngữ cụ thể. Còn cty lớn người ta quan tâm kiến thức nền để traning. 1 ngôn ngữ mới train tầm 2 tháng là làm task ngon lành nếu base IT cứng
Chứ đóng đinh 1 ngôn ngữ, làm ra cái web chỉ có html, css với gọi api. BE CRUD thuần thì tầm này chỉ có móm ngồi ngáp

WolfWarrior · 10/4/23

Có gì mà phải đội mấy cái rule eslint lên bàn thờ thế nhỉ? Nếu nó tối ưu đến 99% 1% thế thì sao React nó ko enforce, auto run effect đi còn cho truyền vào deps array làm gì?
Eslint là hỗ trợ dev tránh bug, chứ ko phải là 1 cái định lý định luật gì phải theo. Nói theo ông kia là bad practice cũng ko đúng.
Deps array là những điều kiện trigger effect, dev có toàn quyền chọn dep nào để trigger tùy ý mình, miễn là phù hợp với bài toán và kiểm soát được các bug có thể xảy ra.

randomA · 10/4/23

nntgwww đã nói:
Shallow compare chứ có deep compare đâu nhỉ? Chưa hiểu bottleneck thế nào?. Như fen nói thì react nó đã lưu ý vấn đề hiệu năng rồi. so sanh compare a === b thì chậm thế nào nhỉ?

Còn hiện tại ai đang ko làm theo document của React thì biết rồi. Fen cũng chả đưa ra được dẫn chứng nào chứng minh của fen nói cả. Tại sao phải tin lời của fen so với cái document nói? Ko lẽ mấy thằng core team nó dốt hơn fen?
Còn mấy cái lưu ý này trong document đều có nói đến, thậm chí còn tốn sức tạo ra cái eslint rule cho mấy thằng dev xài, mà hóa ra cơ số mấy anh giỏi trên đây ignore ko thèm xài luôn

Chú nói đúng rồi. Nên để dep array là full như linting báo.
Nhưng mà chú nên hiểu đa số dân dev React trình độ còi lắm, code rất rác và hay code cho nó chạy được là được rồi không quan tâm bad practice (avoid hacky solution etc) nên chú có tranh luận thế nào nữa cũng không lại được bọn nó "cãi" đâu.

nntgwww · 10/4/23

randomA đã nói:
Chú nói đúng rồi. Nên để dep array là full như linting báo.
Nhưng mà chú nên hiểu đa số dân dev React trình độ còi lắm, code rất rác và hay code cho nó chạy được là được rồi không quan tâm bad practice (avoid hacky solution etc) nên chú có tranh luận thế nào nữa cũng không lại được bọn nó "cãi" đâu.

Cũng mang tiếng tôi chuyên dev react quá :shame:

Chuyến này phải sang hẳn fullstack or BE :shame:

Nói chứ cái vụ này cũng mât khoảng vài tháng khi hook mới ra tôi mới quen dc. Nhưng giờ hook nó ra mấy năm rồi mà mấy bác trên này chưa nhuần nữa, qua cách nói chuyện thì k phải newbie dc...

thanbaiks · 10/4/23

Anh em đã ai tìm hiểu mấy cái concurrence hooks của React v18 chưa nhỉ. Đọc thấy ù đầu vãi

voz cham vn · 10/4/23

giờ đám công nhân React nhan nhản nhỉ

night.melancholy · 10/4/23

voz cham vn đã nói:
giờ đám công nhân React nhan nhản nhỉ

Nhiều thật sự , nhưng đa phần thấy bùa chú từ các trung tâm để câu kéo người học là chính. Output ra nhiều nhưng "chất lượng" thì ít, công ty mình vẫn đăng tuyển ầm ầm, vào phỏng vấn hỏi những câu rất cơ bản như useMemo, memo useCallback, redux .... những thứ được sử dụng rất nhiều nhưng trả lời sai rất nhiều, mà nhiều người làm 1~3 năm kinh nghiệm không ấy :beated:

darkrose · 10/4/23

những case như nào thì xài useCallback các bác nhỉ

night.melancholy · 10/4/23

darkrose đã nói:
những case như nào thì xài useCallback các bác nhỉ

https://react.dev/reference/react/useCallback doc mới đã viết rất tốt rồi, nhớ làm các practice nó nêu cuối doc + đừng bao giờ bỏ qua phần "deep dive"

randomA · 10/4/23

darkrose đã nói:
những case như nào thì xài useCallback các bác nhỉ

Ôi, lạy chúa tôi

thắc mắc Tại sao ReactJS lại hot đến vậy ạ?

Member

Member

Senior Member

Senior Member

Senior Member

Member

Junior Member

Senior Member

Junior Member

Senior Member

Senior Member

Member

Member

Member

Senior Member

Member

Senior Member

Member

Senior Member

Member

Chủ đề tương tự

Thống kê chủ đề

Chia sẻ trang này