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

nammegai đã nói:

Hơi lạc đề một chút nhưng mà em mới học, các thím cho em hỏi, bây giờ 1 dự án FE bằng React và BE bằng Node. FE xong UI và BE xong API thì fetch từ API vào UI do bên nào làm ạ. Em thường chỉ làm FE là thiết kế UI/UX, bây giờ ông BE trong dự án đưa em cái API kêu em fetch vào, rồi handle form, xử lý session đăng nhập các thứ theo cái API có sẵn đấy nên em bị ngợp (. Với các thím có thể cho em biết trong 1 dự án thực tế thì FE và BE làm những gì không ạ, lần đầu làm dự án thực tế lóng nga lóng ngóng ...

Nhấp để mở rộng...

nammegai đã nói:

Hơi lạc đề một chút nhưng mà em mới học, các thím cho em hỏi, bây giờ 1 dự án FE bằng React và BE bằng Node. FE xong UI và BE xong API thì fetch từ API vào UI do bên nào làm ạ. Em thường chỉ làm FE là thiết kế UI/UX, bây giờ ông BE trong dự án đưa em cái API kêu em fetch vào, rồi handle form, xử lý session đăng nhập các thứ theo cái API có sẵn đấy nên em bị ngợp (. Với các thím có thể cho em biết trong 1 dự án thực tế thì FE và BE làm những gì không ạ, lần đầu làm dự án thực tế lóng nga lóng ngóng ...

Nhấp để mở rộng...

thanbaiks đã nói:

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

Nhấp để mở rộng...

    import { fetchData } from './data.js';

    // Note: this component is written using an experimental API

    // that's not yet available in stable versions of React.

    // For a realistic example you can follow today, try a framework

    // that's integrated with Suspense, like Relay or Next.js.

    export default function Albums({ artistId }) {

      const albums = use(fetchData([ICODE]/${artistId}/albums[/ICODE]));

      return (

        <ul>

          {albums.map(album => (

            <li key={album.id}>

              {album.title} ({album.year})

            </li>

          ))}

        </ul>

      );

    }

    // This is a workaround for a bug to get the demo running.

    // TODO: replace with real implementation when the bug is fixed.

    function use(promise) {

      if (promise.status === 'fulfilled') {

        return promise.value;

      } else if (promise.status === 'rejected') {

        throw promise.reason;

      } else if (promise.status === 'pending') {

        throw promise;

      } else {

        promise.status = 'pending';

        promise.then(

          result => {

            promise.status = 'fulfilled';

            promise.value = result;

          },

          reason => {

            promise.status = 'rejected';

            promise.reason = reason;

          },  

        );

        throw promise;

      }

    }

nntgwww đã nói:

Cái suspense với cái function có promise thấy bựa vl. Túm váy function mà promise thì trig

JavaScript:

    import { fetchData } from './data.js';

    // Note: this component is written using an experimental API

    // that's not yet available in stable versions of React.

    // For a realistic example you can follow today, try a framework

    // that's integrated with Suspense, like Relay or Next.js.

    export default function Albums({ artistId }) {

      const albums = use(fetchData([ICODE]/${artistId}/albums[/ICODE]));

      return (

        <ul>

          {albums.map(album => (

            <li key={album.id}>

              {album.title} ({album.year})

            </li>

          ))}

        </ul>

      );

    }

    // This is a workaround for a bug to get the demo running.

    // TODO: replace with real implementation when the bug is fixed.

    function use(promise) {

      if (promise.status === 'fulfilled') {

        return promise.value;

      } else if (promise.status === 'rejected') {

        throw promise.reason;

      } else if (promise.status === 'pending') {

        throw promise;

      } else {

        promise.status = 'pending';

        promise.then(

          result => {

            promise.status = 'fulfilled';

            promise.value = result;

          },

          reason => {

            promise.status = 'rejected';

            promise.reason = reason;

          },  

        );

        throw promise;

      }

    }

ngoài ra thì xài useTransition cũng khá hay. Tuy nhiên vì mới nên chưa có xài thử.

Nhấp để mở rộng...

Hello.World đã nói:

S e thấy th suspend th react trước warning là k nên dùng, sắp bỏ nhỉ nhưng sang th nextjs thì dùng th dynamic thì nó gần như th suspend + fallback, mà dynamic lại rất qtrong trong nextjs

via theNEXTvoz for iPhone

Nhấp để mở rộng...

Đấng Tối Cao đã nói:

Thấy docs vẫn nói dùng bthg mà, không thấy có vấn đề gì

Nhấp để mở rộng...

nammegai đã nói:

Hơi lạc đề một chút nhưng mà em mới học, các thím cho em hỏi, bây giờ 1 dự án FE bằng React và BE bằng Node. FE xong UI và BE xong API thì fetch từ API vào UI do bên nào làm ạ. Em thường chỉ làm FE là thiết kế UI/UX, bây giờ ông BE trong dự án đưa em cái API kêu em fetch vào, rồi handle form, xử lý session đăng nhập các thứ theo cái API có sẵn đấy nên em bị ngợp (. Với các thím có thể cho em biết trong 1 dự án thực tế thì FE và BE làm những gì không ạ, lần đầu làm dự án thực tế lóng nga lóng ngóng ...

Nhấp để mở rộng...

randomA đã nói:

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

Nhấp để mở rộng...

Hello.World đã nói:

S e thấy th suspend th react trước warning là k nên dùng, sắp bỏ nhỉ nhưng sang th nextjs thì dùng th dynamic thì nó gần như th suspend + fallback, mà dynamic lại rất qtrong trong nextjs

via theNEXTvoz for iPhone

Nhấp để mở rộng...

Render-as-you-fetch​

darkrose đã nói:

biết mấy cái này hạn chế thằng con re render nhưng lướt nhiều diễn đàn thì nó bảo spam nhiều quá thì lại tốn memory ảnh hưởng performance nên lên voz hỏi xem những case nào xài là hợp lý tối ưu nhất ấy bác

Nhấp để mở rộng...

darkrose đã nói:

biết mấy cái này hạn chế thằng con re render nhưng lướt nhiều diễn đàn thì nó bảo spam nhiều quá thì lại tốn memory ảnh hưởng performance nên lên voz hỏi xem những case nào xài là hợp lý tối ưu nhất ấy bác

Nhấp để mở rộng...

darkrose đã nói:

biết mấy cái này hạn chế thằng con re render nhưng lướt nhiều diễn đàn thì nó bảo spam nhiều quá thì lại tốn memory ảnh hưởng performance nên lên voz hỏi xem những case nào xài là hợp lý tối ưu nhất ấy bác

Nhấp để mở rộng...

nntgwww đã nói:

Cái suspense với cái function có promise thấy bựa vl. Túm váy function mà promise thì trig

JavaScript:

    import { fetchData } from './data.js';

    // Note: this component is written using an experimental API

    // that's not yet available in stable versions of React.

    // For a realistic example you can follow today, try a framework

    // that's integrated with Suspense, like Relay or Next.js.

    export default function Albums({ artistId }) {

      const albums = use(fetchData([ICODE]/${artistId}/albums[/ICODE]));

      return (

        <ul>

          {albums.map(album => (

            <li key={album.id}>

              {album.title} ({album.year})

            </li>

          ))}

        </ul>

      );

    }

    // This is a workaround for a bug to get the demo running.

    // TODO: replace with real implementation when the bug is fixed.

    function use(promise) {

      if (promise.status === 'fulfilled') {

        return promise.value;

      } else if (promise.status === 'rejected') {

        throw promise.reason;

      } else if (promise.status === 'pending') {

        throw promise;

      } else {

        promise.status = 'pending';

        promise.then(

          result => {

            promise.status = 'fulfilled';

            promise.value = result;

          },

          reason => {

            promise.status = 'rejected';

            promise.reason = reason;

          }, 

        );

        throw promise;

      }

    }

ngoài ra thì xài useTransition cũng khá hay. Tuy nhiên vì mới nên chưa có xài thử.

Nhấp để mở rộng...

randomA đã nói:

nói lung tung đó, mấy cái func obj tốn ít mem lắm. Mà tốn mem còn hơn tốn compute time

Nhấp để mở rộng...

WolfWarrior đã nói:

cứ gọi ra 1 cái hook là đã tốn memory + deps comparison time rồi nên tối ưu là phải biết hạn chế lúc nào cần lúc nào ko cần dùng hook.
Ko phải cứ function inside là wrap hết bằng useCallback hoặc ko phải cứ có computed value là lại bê useMemo ra để wrap.

Nhấp để mở rộng...

nntgwww đã nói:

nguyên tắc thế này thôi.

Nếu 1 function là pure ko có side effect thì move ra ngoài component => ko cần useCallback làm gì.
1 function return từ 1 cái hook ví dụ useCheckData => {calcWithState, ...} nếu calcWithState có side

Effect liên quan đến state, props thì sẽ dùng useCallback. Lý do 1 phần ko rõ component sẽ sử dụng hook ntn. Có thể ném vố dep array của useEffect nên tốt nhất memo.

Tương tự nếu function ơ trong 1 component có side effect và có xài trong 1 cái dep array thì xài.

Nhấp để mở rộng...

thanbaiks đã nói:

Ko hiểu gì luôn. Source của fetchData là gì? Một function return promise hay gì khác.
Bro thử ném vào codesandbox hoặc gì đó xem thử

Nhấp để mở rộng...

monster_hunter đã nói:

Mấy bác có xài React.lazy chưa
Hôm bữa em thử xài caid này. Thấy page load nhanh hơn hẳn

Sent from Xiaomi 2201117TG using vozFApp

Nhấp để mở rộng...

nntgwww đã nói:

https://codesandbox.io/s/w7zhrn?file=/data.js&utm_medium=sandpack

Có video keynote với sandbox

Nhấp để mở rộng...