goidle / goidle.github.io

0 stars 0 forks source link

react/in-depth-react18-lane/ #15

Open utterances-bot opened 6 months ago

utterances-bot commented 6 months ago

React 18 톺아보기 - 02. Lane 모델 | Deep Dive Magic Code

Lane은 렌더링에서 동시성을 가져감에 있어 기존의 한계를 해결하기 위해 새롭게 도입된 모델입니다. Lane 이전에는 Expiration Time 모델을 통해서 관리가 되었는데, 해당 모델에 어떠한 한계가 있었는지 먼저 짚어보고 Lane 모델로 넘어가겠습니다. Expiration Time의 정의는 이전 포스터에서 확인하세요. Expiration Tim

https://goidle.github.io/react/in-depth-react18-lane/

JoonDong2 commented 6 months ago

안녕하세요. 좋은 정보 감사합니다. 올려주신 포스트를 보면서 리액트18 이전버전 내부 코드도 분석해 보고 있는데요. ensureRootIsScheduled 함수를 보면 Expiration Time 섹션에서 switch 문에 도달하지 못한다고 하셨는데, switch 문에 접근은 하는데 ImmediatePriority로 분기되는 것이 아닐까합니다. 이게 맞을까용?? https://github.com/facebook/react/blob/v16.12.0/packages/react-reconciler/src/ReactFiberWorkLoop.js#L557

goidle commented 6 months ago

@JoonDong2 18 이전에는 Mode를 변경하지 않은 경우에는 항상 Expiration Time가 Sync로 설정되면서 렌더링은 항상 동기적으로 동작합니다. 요 내용은 Expiraiton Time 섹션에서 코드로 확인을 하였고, 링크 걸어주신 코드는 16 톺아보기에서 다루었습니다.

해당 로직은 Concurrent Render가 다른 요인(우선순위 등)으로 인해 렌더링이 계속 완료되지 못하는 경우(기아현상), 만료 처리 하여 Sync로 변경하고 렌더링을 마무리하기 위한 로직입니다. 하지만 요 내용 또한 18 이전에는 Mode를 Concurrent로 쓰지 않았기 때문에 도달하지 못할 로직이지 않을까 생각합니다.

JoonDong2 commented 6 months ago

@goidle 아하 리액트18 이전에는 기본 모드가 Legacy Mode라서 & Blocking Mode === NoMode에서 걸리겠군요. 감사합니다 .^^