React: 빠른 새로 고침이 react-hot-loader를 대체하므로 HMR 용 앱을 어떻게 설정해야합니까?

약간의 혼란이 있습니다. 새로운 DevTools는 핫 리로딩을 활성화하지 않습니다 (또는 리로딩과 관련이 없음). 오히려 Dan이 작업하고있는 핫 리로딩 변경은 DevTools와 React가 통신에 사용하는 "후크"를 사용합니다. 다시로드 할 수 있도록 중간에 추가됩니다.

DevTools에 대한 언급을 제거하기 위해 제목을 편집했습니다 (혼란을 일으킬 수 있으므로).

새로운 HMR을 어떻게 사용해야하는지에 대한 질문에 대해서는 거기에서 최신 생각을 알지 못하는 것 같습니다. @gaearon 이 CRA repo에 대한 PR을 가지고 있음을
https://github.com/facebook/create-react-app/pull/5958

새로운 HMR을 어떻게 사용해야하는지에 대한 질문에 대해서는 거기에서 최신 생각을 알지 못하는 것 같습니다. @gaearon 이 CRA repo에 대한 PR을 가지고 있음을

독자를 위해 명확히하기 위해 PR은 매우 구식이며 더 이상 관련이 없습니다.

Fast Refresh의 작동 방식과 통합 방법에 대해 적어야합니다. 아직 시간이 없었습니다.

좋아, 간다.

빠른 새로 고침이란 무엇입니까?

React의 완전한 지원과 함께 "hot reloading"의 재 구현입니다. 원래 React Native 용으로 제공 되었지만 대부분의 구현은 플랫폼 독립적입니다. 계획은 순전히 사용자 영역 솔루션 (예 react-hot-loader )을 대체하기 위해 전체적으로 사용하는 것입니다.

웹에서 빠른 새로 고침을 사용할 수 있습니까?

이론적으로 네, 그게 계획입니다. 실제로 누군가는 웹에서 일반적인 번 들러 (예 : Webpack, Parcel)와 통합해야합니다. 나는 아직 그 일을하지 않았습니다. 누군가가 그것을 집어 들고 싶어 할 수도 있습니다. 이 의견은 어떻게 할 것인지에 대한 대략적인 가이드입니다.

무엇으로 구성됩니까?

빠른 새로 고침은 함께 작동하는 여러 부분에 의존합니다.

• 모듈 시스템의 "핫 모듈 교체"메커니즘.
  
  
  
  • 일반적으로 번 들러에서도 제공됩니다.
  
  
  • 예를 들어 웹팩에서 module.hot API를 사용하면이 작업을 수행 할 수 있습니다.
  
  
• React 렌더러 16.9.0+ (예 : React DOM 16.9)
  
  
  
  • 또는 맞춤형 렌더러의 경우 [email protected] 이상
  
  
• react-refresh/runtime 진입 점
• react-refresh/babel Babel 플러그인

통합 부분에서 작업하고 싶을 것입니다. 즉, react-refresh/runtime 를 Webpack "핫 모듈 교체"메커니즘과 통합합니다.

통합은 어떤 모습일까요?

⚠️⚠️⚠️ 명확하게하기 위해이 문서는 통합 테마를 구현하려는 사람들을위한 가이드입니다. 자신의주의에 따라 진행하십시오!

최소한으로하고 싶은 몇 가지 작업이 있습니다.

• 번 들러에서 HMR 활성화 (예 : 웹팩)
• React가 16.9.0 이상인지 확인하십시오.
• Babel 플러그인에 react-refresh/babel 추가

이 시점에서 앱이 충돌해야합니다. 정의되지 않은 $RefreshReg$ 및 $RefreshSig$ 함수에 대한 호출이 포함되어야합니다.

그런 다음 react-dom (!)를 포함 하여 앱의 코드보다 먼저 실행해야하는 새 JS 진입 점을 react-dom 이후에 실행되면 아무것도 작동하지 않습니다. 해당 진입 점은 다음과 같이해야합니다.

if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
  const runtime = require('react-refresh/runtime');
  runtime.injectIntoGlobalHook(window);
  window.$RefreshReg$ = () => {};
  window.$RefreshSig$ = () => type => type;
}

이렇게하면 충돌이 해결됩니다. 그러나 이러한 $RefreshReg$ 및 $RefreshSig$ 구현은 noops이므로 여전히 아무 작업도 수행하지 않습니다. 이들을 연결하는 것이 통합 작업의 핵심입니다.

이를 수행하는 방법은 번 들러에 따라 다릅니다. 웹팩을 사용하면 모든 모듈이 실행되기 전후에 일부 코드를 추가하는 로더를 작성할 수 있다고 가정합니다. 또는 모듈 템플릿에 무언가를 주입하는 후크가있을 수 있습니다. 그럼에도 불구하고 달성하려는 것은 모든 모듈이 다음과 같이 보이는 것입니다.

// BEFORE EVERY MODULE EXECUTES

var prevRefreshReg = window.$RefreshReg$;
var prevRefreshSig = window.$RefreshSig$;
var RefreshRuntime = require('react-refresh/runtime');

window.$RefreshReg$ = (type, id) => {
  // Note module.id is webpack-specific, this may vary in other bundlers
  const fullId = module.id + ' ' + id;
  RefreshRuntime.register(type, fullId);
}
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

try {

  // !!!
  // ...ACTUAL MODULE SOURCE CODE...
  // !!!

} finally {
  window.$RefreshReg$ = prevRefreshReg;
  window.$RefreshSig$ = prevRefreshSig;
}

여기서 아이디어는 Babel 플러그인이이 함수에 대한 호출을 내 보낸 다음 위의 통합이 해당 호출을 모듈 ID에 연결한다는 것입니다. 따라서 런타임은 구성 요소가 등록 될 때 "path/to/Button.js Button" 와 같은 문자열을 수신합니다. (또는 웹팩의 경우 ID는 숫자입니다.) Babel 변환과이 래핑은 모두 개발 모드 에서만 발생해야한다는 것을 잊지 마십시오.

모듈 코드를 래핑하는 대신 번 들러가 실제로 모듈 팩토리를 초기화하는 위치에 이와 같은 try / finally를 추가하는 방법이있을 수 있습니다. 여기 Metro (RN 번 들러)에서하는 것처럼. 우리는 포장 할 때 예를 들어, 부정한 구문의 도입에 대해 모든 모듈 또는 걱정을 부풀게 할 필요가 없습니다 때문에 이것은 아마 더 좋을 것이다 import 에서로 try / finally .

이것을 연결하면 마지막 문제가 하나 있습니다. 번 들러는 업데이트를 처리하고 있다는 사실을 모르기 때문에 어쨌든 페이지를 다시로드 할 것입니다. 하지 말라고해야합니다. 이것은 다시 번 들러에 따라 다르지만 내가 제안하는 접근 방식은 모든 내보내기가 React 구성 요소 인지 확인

// ...ALL MODULE CODE...

const myExports = module.exports; 
// Note: I think with ES6 exports you might also have to look at .__proto__, at least in webpack

if (isReactRefreshBoundary(myExports)) {
  module.hot.accept(); // Depends on your bundler
  enqueueUpdate();
}

isReactRefreshBoundary 무엇입니까? 오버 익스포트를 얕게 열거하고 React 컴포넌트 만 익스포트할지 여부를 결정하는 것입니다. 이것이 업데이트 수락 여부를 결정하는 방법입니다. 여기에 붙여 넣지는 않았지만 이 구현 이 좋은 시작 Refresh 는 react-refresh/runtime 내보내기를 나타냅니다.)

Babel 변환은 함수에 대해 $RefreshReg$ 만 호출하므로 모든 내보내기 를

마지막으로 enqueueUpdate() 함수는 실제 React 업데이트를 디 바운스하고 수행하는 모듈간에 공유되는 기능입니다.

const runtime = require('react-refresh/runtime');

let enqueueUpdate = debounce(runtime.performReactRefresh, 30);

이 시점에서 당신은 뭔가 작동해야합니다.

뉘앙스

"빠른 새로 고침"브랜딩에 관심이있는 몇 가지 기본 경험 기대치가 있습니다. 구문 오류, 모듈 초기화 오류 또는 렌더링 오류에서 정상적으로 복구 할 수 있어야합니다. 이러한 메커니즘에 대해 자세히 설명하지는 않겠지 만 이러한 경우를 잘 처리 할 때까지 실험을 "Fast Refresh"라고 부르지 말아야한다고 매우 강력하게 느낍니다.

안타깝게도 웹팩이이 모든 것을 지원할 수 있는지는 모르겠지만, 어느 정도 작동 상태에 이르렀다가 막히면 도움을 요청할 수 있습니다. 예를 들어, 웹팩의 accept() API가 오류 복구를 더 어렵게 만든다는 것을 알았습니다 (오류 후 모듈의 _previous_ 버전을 수락해야 함). 다시 돌아 가야 할 또 다른 사항은 Babel 플러그인에서 찾은 것뿐만 아니라 모든 내보내기를 자동으로 "등록"하는 것입니다. 지금은 이것을 무시해 봅시다. 예를 들어 webpack에서 작동하는 것이 있다면 그것을 다듬을 수 있습니다.

마찬가지로 Create React App에있는 react-error-overlay 와 유사한 "오류 상자"환경과 통합해야합니다. 오류를 수정하면 오류 상자가 사라지는 것과 같은 약간의 뉘앙스가 있습니다. 재단이 마련되면 우리가 할 수있는 추가 작업도 필요합니다.

궁금한 점이 있으면 알려주세요!

구문 오류 / 초기화 오류는 React에게 렌더링을 시작하도록 지시하기 전에 어떤 방식 으로든 처리하기에 "충분히 쉬울 것"이어야하지만 렌더링 오류는 오류 경계와 어떻게 상호 작용할까요?

렌더링 오류가 발생하면 가장 가까운 오류 경계가 트리거되어 자체적으로 오류 상태로 스냅 샷이 생성되며, 실시간 새로 고침 후 자식이 마술처럼 _ 가능하게 _ 수정되었음을 오류 경계에 알리는 일반적인 방법은 없습니다. 모든 새로 고침 가능한 구성 요소가 무료로 자체 오류 경계를 가져야합니까? 아니면 초기화시 런타임 지원이 감지되면 조정자에서 오류 처리가 다르게 작동합니까?

모든 내보내기는 React 구성 요소이며이 경우 업데이트를 "수락"합니다.

이러한 구성 요소를 감지하는 방법이 있습니까? 내가 이해하는 한-아니요. export.toString().indexOf('React')>0 제외하고 적용되는 모든 HOC로 작동이 중지됩니다.
또한 파일 끝에있는 _self accepting_은 오류가 발생하기 쉽지 않습니다. 새로운 수락 핸들이 설정되지 않고 다음 업데이트가 더 높은 경계로 버블 링되므로 require("react-hot-loader/root").hot 가 생성되었습니다.

어쨌든- react-hot-loader 에서 모든 반응 관련 코드를 던져 외부 API를 그대로 유지한다면 충분하고 기존의 모든 설치에 적용 할 수있는 것 같습니다.

react-refresh/babel 0.4.0을 사용하면 많은 파일에서이 오류가 발생합니다.

ERROR in ../orbit-app/src/hooks/useStores.ts
Module build failed (from ../node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property '0' of undefined
    at Function.get (/Users/nw/projects/motion/orbit/node_modules/@babel/traverse/lib/path/index.js:115:33)
    at NodePath.unshiftContainer (/Users/nw/projects/motion/orbit/node_modules/@babel/traverse/lib/path/modification.js:191:31)
    at PluginPass.exit (/Users/nw/projects/motion/orbit/node_modules/react-refresh/cjs/react-refresh-babel.development.js:546:28)

그 파일을 원인이되는 가장 간단한 것으로 좁혔습니다.

import { useContext } from 'react'

export default () => useContext()

렌더링 오류가 발생하면 가장 가까운 오류 경계가 트리거되어 자체적으로 오류 상태로 스냅 샷이 생성되며, 실시간 새로 고침 후 자식이 마술처럼 수정 될 수 있음을 오류 경계에 알리는 일반적인 방법은 없습니다.

React 내부의 Fast Refresh 코드는 현재 실패한 경계를 기억합니다. 빠른 새로 고침 업데이트가 예약 될 때마다 항상 다시 마운트됩니다.

경계가 없지만 루트가 업데이트에 실패한 경우 Fast Refresh는 해당 루트를 마지막 요소로 다시 렌더링합니다.

마운트에서 루트가 실패하면 runtime.hasUnrecoverableErrors() 알려줍니다. 그런 다음 강제로 재장 전해야합니다. 나중에 그 사건을 처리 할 수 ​​있었지만 아직 고칠 시간이 없었습니다.

react-refresh / babel 0.4.0을 사용하면 많은 파일에서이 오류가 발생합니다.

새로운 문제 pls를 제출 하시겠습니까?

이러한 구성 요소를 감지하는 방법이 있습니까?

자체적으로 Runtime.isLikelyAReactComponent() 사용하는 내 구현에 연결했습니다. 완벽하지는 않지만 충분합니다.

새로운 수락 핸들이 설정되지 않고 다음 업데이트가 더 높은 경계로 버블 링됩니다.

모범을 보일 수 있습니까? 나는 따르지 않는다. 어쨌든 그것은 번 들러에 특정한 것입니다. 내가 원하는대로 Metro를 만들었습니다. API가 누락 된 경우 webpack에 추가를 요청할 수 있습니다.

여기서의 목표는 일관성을 보장하면서 가능한 한 적은 수의 모듈을 다시 실행하는 것입니다. 대부분의 편집에 대해 루트에 대한 버블 업데이트를 원하지 않습니다 .

react-hot-loader에서 모든 반응 특정 코드를 던져 외부 API를 그대로 유지하는 것 같습니다.

최상위 컨테이너도 제거하고 싶지만 아마도. 또한 오류 상자와 더 긴밀하게 통합되기를 원합니다. 여전히 react-hot-loader 라고 할 수 있습니다.

그런데 내가 잊은 부분 인 performReactRefresh 전화를 포함하도록 가이드를 편집했습니다. 그것이 실제로 업데이트를 예약하는 것입니다.

isLikelyComponentType(type) {
   return typeof type === 'function' && /^[A-Z]/.test(type.name);
},

그런 논리로는 안전하지 않을 것입니다. 모든 CapitalizedFunctions가 거의 항상 React 구성 요소 인 경우에도-많은 모듈 (내)에는 다른 내보내기도 있습니다. 예 : _exports-for-tests_. 그것은 문제가되지 않지만 어떤 _unpredictability_를 생성합니다.-핫 바운더리는 어느 시점에서든 생성 될 수 있습니다 ... 또는 한 줄 변경 후에 생성되지 않습니다.
isLikelyComponentType 테스트를 중단 할 수있는 요소 :

• 내 보낸 mapStateToProps (테스트 용, 프로덕션 코드에서 사용되지 않음)
• hook 내보냈습니다. (괜찮습니다)
• 리 액트 클래스가 아닐 수도있는 Class 내보냄 (안되지만 그래야 함)

따라서-핫 바운더리가 설정되지만 그렇지 않은 경우가 있으며 핫 바운더리가 설정되지만 그렇지 않은 경우가 있습니다. 우리 둘 다 좋아하지 않는 오래되고 불안정한 핫 리로딩처럼 들립니다. :)

핫 바운더리를 적용하는 것이 그렇게 예측할 수없고 예상 할 수있는 한 곳이 있습니다. thing 또는 domain 바운더리 또는 디렉토리 인덱스, 즉 index.js 내보내기 동일한 디렉토리에있는 Component.js 의 "공용 API"(Facebook 스타일 afaik 아님).

즉, Metro에서했던 것과 같은 모든 것이지만 더 많은 제한이 적용됩니다. 지연로드 된 구성 요소에 대해 이러한 경계를 설정하는 linting 규칙과 같은 다른 모든 것은 올바른 동작을 적용하는 데 사용될 수 있습니다.

말하면 핫 빠른 새로 고침이 Lazy를 처리할까요? import 의 다른 쪽에서 경계가있을 것으로 예상됩니까?

브라우저에서 마법을 확인하기 위해 재빨리 시도해 보았습니다. 정말 멋집니다. :) 가능한 가장 간단한 일을했습니다. 즉, 모든 계측 코드를 하드 코딩 했으므로 아직 웹팩 플러그인이 없습니다.

여기 Repo : https://github.com/pekala/react-refresh-test

호기심이 많지만 webpack의 경우 try / finally를 래핑하는 babel 플러그인을 가질 수 없습니까? 시도하기 전에 내가 뭔가를 놓치고 있지 않은지 확인하고 싶을뿐입니다.

Babel 플러그인은 특정 환경이 아닙니다. 나는 그것을 유지하고 싶다. 모듈이나 업데이트 전파 메커니즘에 대해 전혀 알지 못합니다. 번 들러에 따라 다릅니다.

예를 들어 Metro에는 try / finally 래핑 변환이 전혀 없습니다. 대신 모듈 팩토리를 호출하는 번 들러 런타임 자체에 try / finally를 넣었습니다. 그것은 webpack에서도 이상적이지만 그렇게 런타임에 연결할 수 있는지 모르겠습니다.

물론 래핑을 위해 다른 Babel 플러그인을 만들 수 있습니다. 그러나 그것은 webpack을 통해 그렇게하는 것보다 아무것도 사지 않습니다. 어쨌든 webpack 특정이기 때문에. 그리고 그것이 의미가없는 다른 환경 (웹팩이 아닌)에서 실수로 그 Babel 플러그인을 실행할 수 있다는 것은 혼란 스러울 수 있습니다.

compilation.mainTemplate.hooks.require 폭포 후크에 연결하면됩니다. 이전 호출은 __webpack_require__ 함수의 기본 본문이므로 후크를 탭하여 콘텐츠를 try/finally 블록으로 래핑 할 수 있습니다.

문제는 __webpack_require__ 내부에서 React에 대한 참조를 얻는 것입니다. 가능하지만 어느 정도의 재진입 및 재귀 보호가 필요할 수 있습니다.

자세한 내용은 웹팩 소스 코드에서 MainTemplate.js 및 web/JsonpMainTemplatePlugin.js 를 확인하세요. JsonpMainTemplatePlugin 자체는 MainTemplate.js 에서 여러 개의 후크를 사용하므로 아마도 이것이 당신이 해결해야 할 "고기"일 것입니다.

여기 Dan이 위에서 설명한 것을 효과적으로 수행하는 해킹 된 프로토 타입이 있습니다. 매우 불완전하지만 웹팩에서 lo-fi 구현을 증명합니다 : https://gist.github.com/maisano/441a4bc6b2954205803d68deac04a716

몇 가지 참고 사항 :

• react-dom 은 여기에 하드 코딩되어 있으므로 사용자 정의 렌더러 또는 하위 패키지 (예 : react-dom/profiling )에서는 작동하지 않습니다.
• 웹팩의 모든 템플릿 변형이 어떻게 작동하는지 너무 깊이 들여다 보지는 않았지만 모듈 실행을 래핑하는 방식은 상당히 엉망입니다. 예를 들어 umd 라이브러리 대상을 사용하는 경우이 예제가 작동하는지 확실하지 않습니다.

문제는 __webpack_require__ 내부에서 React에 대한 참조를 얻는 것입니다. 가능하지만 어느 정도의 재진입 및 재귀 보호가 필요할 수 있습니다.

Refresh Runtime에 대한 참조를 얻는 것을 의미한다고 가정합니다.

Metro에서는 가능한 한 빨리 require.Refresh = RefreshRuntime 를 수행하여이 문제를 해결했습니다. 그런 다음 require 구현 내에서 require 함수 자체에서 속성을 읽을 수 있습니다. 즉시 사용할 수는 없지만 충분히 일찍 설정해도 문제가되지 않습니다.

@maisano 여러 가지를 변경해야했는데 궁극적으로 webpack에서 호출하는 .accept 함수가 표시되지 않습니다. .accept(module.i, () => {}) 및 .accept(() => {}) 둘 다 시도했습니다 (웹팩에서 작동하지 않는 점을 제외하고는 자체 승인). hot 속성이 활성화되어 있으며 허용 된 모듈을 통해 실행됩니다.

그래서 나는 결국 자체 수용 모듈을 호출하기 위해 webpack을 패치했고 이것이 최종 수정이었습니다.

패치는 다음과 같습니다.

diff --git a/node_modules/webpack/lib/HotModuleReplacement.runtime.js b/node_modules/webpack/lib/HotModuleReplacement.runtime.js
index 5756623..7e0c681 100644
--- a/node_modules/webpack/lib/HotModuleReplacement.runtime.js
+++ b/node_modules/webpack/lib/HotModuleReplacement.runtime.js
@@ -301,7 +301,10 @@ module.exports = function() {
                var moduleId = queueItem.id;
                var chain = queueItem.chain;
                module = installedModules[moduleId];
-               if (!module || module.hot._selfAccepted) continue;
+               if (!module || module.hot._selfAccepted) {
+                   module && module.hot._selfAccepted()
+                   continue;
+               }
                if (module.hot._selfDeclined) {
                    return {
                        type: "self-declined",

저는 이것이 "errorCallback"이되기를 원하는 그들의 API에 위배된다는 것을 알고 있습니다. 저는 특히 수년 전에 내부 HMR에서 작업하면서이 문제를 겪었던 것을 기억합니다. 결국 우리는 자체 번 들러를 작성하게되었습니다. 나는 parcel이 "self-accepting"콜백 API를 지원한다고 믿습니다. 아마도 웹팩에서 이슈를 열어서 병합 할 수 있는지 살펴볼 가치가 있을까요? @sokra

그래서 ... @ maisano 의 작업을 기반으로 플러그인을 더욱
https://github.com/pmmmwh/react-refresh-webpack-plugin
(시작할 때 웹팩 내부를 조작하는 것을 믿지 않기 때문에 TypeScript로 작성했습니다. 일반 JS / Flow로 변환 할 수 있습니다.)

웹팩 Dependency 클래스로 핫 모듈 코드를 삽입하기위한 로더의 필요성을 제거하려고 시도했지만 모든 모듈을 다시 구문 분석해야하는 것 같습니다 (모든 함수가 인라인되어 있어도 여전히 어딘가에 react-refresh/runtime 참조).

또 다른 문제는 webpack에서 자바 스크립트와 유사한 파일을 감지하는 간단한 방법 (afaik)이 없다는 것입니다. 예를 들어 html-webpack-plugin 는 javascript/auto 유형도 사용하므로 보이는 것을 하드 코딩했습니다. 로더 주입에 허용되는 파일 마스크 (JS / TS / Flow)

또한이 5 년 된 스레드 에서 @gaearon의 주석을 기반으로 오류 복구 (최소한 구문 오류)를 추가했습니다. 다음은 반응 오류에서 복구하는 것입니다. 전역 오류 경계 ( AppWrapper of react-hot-loader 와 같은 종류)를 삽입하여이 작업을 수행 할 수 있다고 생각합니다.이 작업은 오류 상자 인터페이스도 다루지 만 그렇지 않습니다. 아직까지는 그것에 도달 할 시간이 있습니다.

@natew 에 의해 제기 된 문제도 피할 수 있습니다. enqueueUpdate 호출과 hot.accpet(errorHandler) 호출을 분리함으로써 달성됩니다.

@pmmmwh 무슨 타이밍! 요점에서 공유 한 작업의 일부를 기반으로 / 조정 한 저장소 를 방금 만들었습니다.

여기서 플러그인은 내가 취한 초기 접근 방식보다 약간 더 견고하지만 어떤 경우에도 오류 처리에 익숙하지 않았습니다.

다음은 반응 오류에서 복구하는 것입니다. 전역 오류 경계 (react-hot-loader의 AppWrapper와 비슷 함)를 삽입하여이 작업을 수행 할 수 있다고 생각합니다.이 작업은 오류 상자 인터페이스도 다루지 만 도달 할 시간이 없었습니다. 아직은.

그것은 이미 상자에서 작동합니다. 여기에 사용자 정의 오류 경계 또는 래핑이 필요하지 않습니다.

다음은 반응 오류에서 복구하는 것입니다. 전역 오류 경계 (react-hot-loader의 AppWrapper와 비슷 함)를 삽입하여이 작업을 수행 할 수 있다고 생각합니다.이 작업은 오류 상자 인터페이스도 다루지 만 도달 할 시간이 없었습니다. 아직은.

그것은 이미 상자에서 작동합니다. 여기에 사용자 정의 오류 경계 또는 래핑이 필요하지 않습니다.

@gaearon 이상한. 렌더링 함수 구성 요소에서 오류를 던졌습니다. return 에서 오류가 발생하면 HMR이 작동하지만 다른 곳에서 발생하면 때때로 작동하지 않습니다.

@pmmmwh 무슨 타이밍! 요점에서 공유 한 작업의 일부를 기반으로 / 조정 한 저장소 를 방금 만들었습니다.

여기서 플러그인은 내가 취한 초기 접근 방식보다 약간 더 견고하지만 어떤 경우에도 오류 처리에 익숙하지 않았습니다.

@maisano 무슨 말을해야합니까? 나는 실제로 이것에 대해 일하기 시작했고 지난 주말에 의존성 주입 문제에 갇혔습니다 ... 당신의 요지는 나에게 탈출구를 제공했습니다 : tada :

그 대가로 오류가 발생하면 HMR은 작동하지만 다른 곳에서 발생하면 작동하지 않는 경우가 있습니다.

정확히 무엇을 시도했는지, "작동 함"과 "작동하지 않음"이 의미하는 바에 대한 자세한 내용이 필요합니다.

모듈 번 들러 통합이 올바르게 구현되지 않은 경우 (주제 또는이 스레드) 잘못 될 수있는 많은 것들이 있습니다. 편집 중에 발생한 오류로부터 복구를 막는 React 자체에는 아무것도 없을 것으로 예상됩니다. React Native 0.61 RC3에서 작동하는지 확인할 수 있습니다.

@pmmmwh , @maisano 다음 검사는 명명 된 내보내기로 구성 요소가있는 모듈을 건너 뛰고 새로 고침 경계가 설정되지 않습니다.

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/master/src/loader/utils/isReactRefreshBoundary.ts#L23 -L27

const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
if (desc && desc.get) {
  // Don't invoke getters as they may have side effects.
  return false;
}

Metro 에서 왜 이것이 필요한지 모르겠지만 webpack getters에서는 명명 된 내보내기 만 반환하고 부작용이 없다는 것을 알 수 있습니다. 따라서 제거하는 것이 안전해야합니다.

@gaearon React.lazy 구성 요소 (예 : 코드 분할 경로)가 다시 렌더링되지 않습니다. 그것은 의도적 인 것입니까? 새로 고침 경계가 설정되었지만 performReactRefresh() 가 아무 작업도 수행하지 않는 것 같습니다. 게으른 아이들에 대한 변경 사항은 정상적으로 새로 고침되므로 큰 문제는 아니지만 우리가 뭔가 잘못하고 있는지 궁금합니다 ...

lazy 는 작은 상태 머신입니다. 이전 구성 요소에 대한 참조를 보유하고 있으며 해당 참조를 업데이트해야합니다.
이제 그것이 있다고 상상해 봅시다. 그리고 지금은 새로운 lazy 객체를 참조하고 있습니다)- loading 단계를 다시 생각해야 할 것이고, 그것은 아마도 모든 중첩 된 트리를 파괴 할 것입니다.

게으른 일을 기대합니다. 뭔가 고장 났을 수도 있습니다. 재현 사례를 확인해야합니다.

프로토 타입이 몇 개 있었는데 하나를 선택한 다음이 토론을 문제로 옮겨야할까요? 그리고 거기에서 반복하십시오.

다음이 있습니다.
https://github.com/maisano/react-refresh-plugin
과:
https://github.com/pmmmwh/react-refresh-webpack-plugin
[email protected] 와 함께 작동하는 pmmmwh 플러그인 포크를 설정했습니다 (내보내기 이름 수정도 포함).
https://github.com/WebHotelier/webpack-fast-refresh

react-hot-loader 어떻습니까?

react-hot-loader fast refresh 에서 거의 모든 기능을 백 포트했지만 모든 기능을 백 포트 할 수없는 역사적 및 통합적 순간이 거의 없으며 솔직히 "rhl"용어로 다시 구현할 의미가 없습니다. . 그러니 은퇴하자.

다른 하나 : https://github.com/yiminghe/react-refresh-loader

정확히 무엇을 시도했는지, "작동 함"과 "작동하지 않음"이 의미하는 바에 대한 자세한 내용이 필요합니다.

모듈 번 들러 통합이 올바르게 구현되지 않은 경우 (주제 또는이 스레드) 잘못 될 수있는 많은 것들이 있습니다. 편집 중에 발생한 오류로부터 복구를 막는 React 자체에는 아무것도 없을 것으로 예상됩니다. React Native 0.61 RC3에서 작동하는지 확인할 수 있습니다.

몇 가지 조정 후 작동하는지 확인할 수 있습니다.

그러나-babel 플러그인이 수업에서 작동하지 않는 것 같습니다. 모든 삽입 된 코드와 react-refresh/runtime 가 제대로 작동하기 때문에 확인한 결과 구현에 관계없이 발생하는 것 같습니다. 이것이 의도 된 것인지 아니면 웹팩에 특정한 것인지 확실하지 않습니다. 후자라면 내일 수정을 시도 할 수 있습니다. (나는 또한 메트로 프리셋으로 이것을 테스트했으며 여기에서 요점을 재현

나는 그것이 RN에서 작동한다고 확신하지만 현재의 컴퓨터에는 RN에서 테스트하기에 편리한 환경이 없으므로 메트로에서 바벨 플러그인 구현이나 정말 도움이 될 변환에 대해 알려줄 수 있다면.

프로토 타입이 몇 개 있었는데 하나를 선택한 다음이 토론을 문제로 옮겨야할까요? 그리고 거기에서 반복하십시오.

여기 갈 수 있을까요? 마지막 댓글 이후로 전체 프로젝트를 일반 JS로 이식하고 업데이트 대기열에 대한 몇 가지 수정 사항을 추가했습니다. 나는에 대한 플러그인 이식에 도착하지 않은 5 @ 웹팩을 하지만, @apostolos으로 포크와의 새로운 HMR 로직 읽은 후 웹팩 @ 다음을 , 수정은 솔직해야한다.

예, Babel 플러그인은 수업을 등록하지 않습니다. 의도는 이것이 모듈 시스템 수준에서 발생하는 것입니다. 각 내보내기는 React 컴포넌트가 될 가능성이 있는지 확인해야합니다. (런타임에서 확인 기능을 제공합니다.) 참이면 Babel 플러그인처럼 내보내기를 등록합니다. filename exports%export_name 와 같은 ID를 지정합니다. 이것이 바로 Babel 플러그인이 클래스를 찾지 못하기 때문에 Metro에서 클래스가 작동하게하는 이유입니다.

즉, 어쨌든 클래스 상태를 보존 할 수 없기 때문에 변환을 사용하여 소스 코드에서 인라인으로 찾는 대신 모듈 내보내기 경계에 "찾기"를 맡기는 것이 좋습니다. 내보내기는 플러그인으로 찾지 못한 구성 요소에 대한 "모두 잡기"역할을해야합니다.

Mailchimp는 마지막으로 공유 한 플러그인의 포크를 사용하기 시작했습니다. 그것은 조금 더 구체화되었고 그것을 사용하기로 선택한 사람들은 꽤 행복해 보입니다. 우리는 계속해서 로컬에서 반복 할 것입니다. 포크를 제거하고 조금 더 진행되면 업스트림 업데이트를 게시 할 계획입니다.

@gaearon 심볼을 추가하는

export default create({
  id: '100'
})

export const View = () => <div />

create 는 객체를 반환합니다. 지금은 패치를 적용했지만 기본 내보내기 개체에 안전한 파일임을 나타내는 기호를 쉽게 추가 할 수 있습니다. 최고의 패턴이 정확히 확실하지 않습니다.

편집 : 이것이 새로 고침 구현에 들어갈 수 있다는 것을 깨달았습니다! 나는 그것이 런타임에 더 좋을 것이라고 생각했지만 아마도 그렇지 않을 것입니다. 로더의 다양한 impls가 너무 많으면 표준 방식을 사용하는 것이 더 좋을 수 있습니다.

10 년을 앞으로 갑시다. 코드베이스는 어떻게 생겼습니까? 여기에서 허용하고 거기에서 허용하지 않습니까? 이 플래그를 최신 상태로 유지하는 방법은 무엇입니까? 추론하는 방법? _ 업데이트하기에 안전한 _ 위치와 _unsafe_가있는 것처럼, 보존해야하거나 어떤 이유로 든 적절하게 조정할 수 없습니다. 각 경우에 유효한 이유는 무엇입니까?

• symbols 더 가질 것-약 force allow reload 또는 force disallow reload
• 업데이트 전파 경계를 낮추거나 (즉, "이"모듈 경계에 대한 업데이트를 수락) 높이려는 이유 (예 : "해당"모듈 경계에 대한 업데이트를 수락)
• 경계가 설정되지 않으면 어떻게 될까요? 성능 문제 일 뿐입니 까, 아니면 더 심각한 일이 발생할 수 있습니까?

안녕하세요 여러분 👋 저는 여기에 도움을 드리고 싶습니다. 단일 리포 / 노력에 동의 했습니까?

@pmmmwh가 공유하는 저장소입니까?
https://github.com/pmmmwh/react-refresh-webpack-plugin

아니면 @maisano가 공유하는 저장소입니까?
https://github.com/maisano/react-refresh-plugin

@pmmmwh 가 더 최근에 약속 한 것

Parcel 2의 구현은 여기에서 시작되었습니다 : https://github.com/parcel-bundler/parcel/pull/3654

여름!

그것을 찾는 모든 사람을 위해 개발을 위해 Nollup을 사용하는 Rollup 프로젝트 용 React Refresh 구현 : https://github.com/PepsRyuu/rollup-plugin-react-refresh

아마도 가장 깨끗한 구현은 아니지만 작동합니다.

웹팩 솔루션의 경우 위 플러그인의 공식 릴리스가없는 것처럼 보이므로 반응을위한 최고의 HMR 솔루션은 여전히 ​​Dan의 라이브러리 인 것 같습니다 : https://github.com/gaearon/react-hot-loader

Fast Refresh를 지원하는 Parcel 2 alpha 3를 즉시 배송했습니다! 자유롭게 사용해보십시오. 😍 https://twitter.com/devongovett/status/1197187388985860096?s=20

🥳 RHL에 지원 중단 메모 추가 🥳

@pmmmwh 의 진행중인 작업 , react-app-rewired 및 customize-cra 사용하여 CRA 앱 에서이 작업 을 시도하는 데 사용한 레시피 :

npx create-react-app <project_dir> --typescript

npm install -D react-app-rewired customize-cra react-refresh babel-loader https://github.com/pmmmwh/react-refresh-webpack-plugin

./package.json :

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

./config-overrides.js 파일 추가 :

// eslint-disable-next-line
const { addBabelPlugin, addWebpackPlugin, override } = require('customize-cra');
// eslint-disable-next-line
const ReactRefreshPlugin = require('react-refresh-webpack-plugin');

/* config-overrides.js */
module.exports = override(
  process.env.NODE_ENV === 'development'
    ? addBabelPlugin('react-refresh/babel')
    : undefined,
  process.env.NODE_ENV === 'development'
    ? addWebpackPlugin(new ReactRefreshPlugin())
    : undefined,
);

지금까지 경험을 즐기고 있습니다. 관련된 모든 사람의 모든 작업에 감사드립니다!

감사합니다 @ drather19 !

귀하의 지침에 따라 저장소를 만들었습니다.https://github.com/jihchi/react-app-rewired-react-refresh누군가가 시도해보고 타이핑을 저장하고 싶다면 repo를 자유롭게 복제하십시오.

https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/master/examples/cra-kitchen-sink 를

그리고 ... v0.1.0 for Webpack이 방금 배송되었습니다 🎉

트윗 담아 가기
이 버전으로 전환하고 싶을 수도 있습니다.이 버전에는 초기 구현에 대한 많은 버그 수정뿐만 아니라보다 통합 된 경험이 포함되어 있습니다.

@pmmmwh 는 ts-loader + babel-loader 합니까?

@pmmmwh 는 ts-loader + babel-loader 합니까?

나는 Babel로만 TS에 대해 테스트했고 작동하므로 ts + babel 로더를 사용할 때 작동하지 않으면 문제를 제출하십시오. :)

@ drather19 저장소 복제 및 실행을 시도했지만 개발 서버가 시작되지 않습니다.

환경,
OS-OSX 10.14.6
노드-v12.13.0
원사 -1.19.2

@pmmmwh- 참고로

react-app-rewired-react-refresh on  master is 📦 v0.1.0 via ⬢ v12.13.0
❯ yarn start
yarn run v1.19.2
$ react-app-rewired start | cat
ℹ ｢wds｣: Project is running at http://192.168.1.178/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/seanmatheson/Development/temp/react-app-rewired-react-refresh/public
ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...

@ drather19 저장소 복제 및 실행을 시도했지만 개발 서버가 시작되지 않습니다.

환경,
OS-OSX 10.14.6
노드-v12.13.0
원사 -1.19.2

@pmmmwh- 참고로

react-app-rewired-react-refresh on  master is 📦 v0.1.0 via ⬢ v12.13.0
❯ yarn start
yarn run v1.19.2
$ react-app-rewired start | cat
ℹ ｢wds｣: Project is running at http://192.168.1.178/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/seanmatheson/Development/temp/react-app-rewired-react-refresh/public
ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...

이는 플러그인의 master 브랜치에서 수정되었으며 내일 출시 될 예정입니다.

나는 babel을 사용하여 TypeScript React 앱과 함께 작동하는 @pmmmwh의 webpack 플러그인을 얻었 습니다 . 그러나 증분 빌드는 ts-loader만으로 2 초가 아니라 12 초 정도 걸립니다. 성능을 더 가깝게 만드는 바벨 구성 측면에서 무언가가 누락되었는지 확인하기 위해 계속해서 재생할 것입니다.

@IronSean 해당 플러그인의 저장소에 신고 해주세요. 이것은 정상적이지 않습니다.

성능을 더 가깝게 만드는 바벨 구성 측면에서 무언가가 누락되었는지 확인하기 위해 계속해서 재생할 것입니다.

구성 / 설정을 거기에 게시 하시겠습니까? 더 많은 맥락 없이는 문제를 파악할 수 없습니다.

@pmmmwh 나는이 문제를 열어서 실제로 플러그인이 차이를 만드는 것을 확인한 후 토론을 저장소로 이동했습니다.
https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/20

react-refresh ( React Fast Refresh ?)이 (가) Preact와 함께 작동합니까, 아니면 react-hot-loader 가 Preact의 장기 솔루션입니까?

@Jumblemuddle 은

빠른 새로 고침으로 실행하려는 CRA 사람들을 위해 다음 craco.config.js 통해 craco (vs. react-app-rewired + customize-cra)를 사용하여 더 나은 행운을 얻었습니다.

// eslint-disable-next-line
const { whenDev } = require('@craco/craco');
// eslint-disable-next-line
const ReactRefreshPlugin = require('react-refresh-webpack-plugin');

module.exports = {
  webpack: {
    configure: webpackConfig => {
      if (process.env.NODE_ENV === 'development') {
        webpackConfig.module.rules.push({
          test: /BabelDetectComponent\.js/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: {
                plugins: [require.resolve('react-refresh/babel')],
              },
            },
          ],
        });
        webpackConfig.module.rules.push({
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: {
                presets: [
                  '@babel/react',
                  '@babel/typescript',
                  ['@babel/env', { modules: false }],
                ],
                plugins: [
                  '@babel/plugin-proposal-class-properties',
                  '@babel/plugin-proposal-optional-chaining',
                  '@babel/plugin-proposal-nullish-coalescing-operator',
                  'react-refresh/babel',
                ],
              },
            },
          ],
        });
      }
      return webpackConfig;
    },
    plugins: [
      ...whenDev(
        () => [new ReactRefreshPlugin({ disableRefreshCheck: false })],
        [],
      ),
    ],
  },
};

특히 webpackConfig.optimization.runtimeChunk = false; 을 추가하면 후크를 추가 / 제거 할 수 있으며 여전히 우아하고 빠른 새로 고침이 가능합니다.

이제 더욱 향상된 경험을 즐기십시오. https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/25 를 통해 팁을 주신 @ mmhand123 에게 감사드립니다 ! (<-해결되었습니다!)

@ drather19의 제안에 따라 더 쉽게 만들기 위해 customize-cra 플러그인을 게시했습니다. esetnik / customize-cra-react-refresh를 참조하십시오.

@ drather19 덕분에 이제 코드를 약간 수정하여 yarn 작업 공간 monorepo 설정에서 작동 할 수 있습니다.

먼저 빠른 새로 고침을 사용하려는 하위 패키지에 다음을 설치하십시오.

"@craco/craco": "^5.6.3", "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0", "webpack-hot-middleware": "^2.25.0"

그런 다음 craco.config.js .

;(function ForbidCRAClearConsole() {
    try {
        require('react-dev-utils/clearConsole')
        require.cache[require.resolve('react-dev-utils/clearConsole')].exports = () => {}
    } catch (e) {}
})()

const { whenDev } = require('@craco/craco')
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

module.exports = {
    webpack: {
        configure: webpackConfig => {
            whenDev(() => {
                // Work around monorepo setup when using yarn workspace hoisted packages
                // without the need to list 'babel-loader' and 'babel-preset-react-app' as
                // dependencies to avoid duplication since 'react-scripts' already has them.
                const reactLoaderConfig = webpackConfig.module.rules
                    .find(x => Array.isArray(x.oneOf))
                    .oneOf.find(
                        x =>
                            x.options &&
                            x.options.presets &&
                            x.options.presets.some(p => p.includes('babel-preset-react-app')) &&
                            x.loader &&
                            typeof x.loader.includes === 'function' &&
                            x.loader.includes('babel-loader') &&
                            x.test &&
                            typeof x.test.test === 'function' &&
                            x.test.test('x.tsx') &&
                            x.test.test('x.jsx'),
                    )

                if (reactLoaderConfig) {
                    webpackConfig.module.rules.push({
                        test: /BabelDetectComponent\.js/,
                        use: [
                            {
                                loader: reactLoaderConfig.loader,
                                options: {
                                    plugins: [require.resolve('react-refresh/babel')],
                                },
                            },
                        ],
                    })

                    webpackConfig.module.rules.push({
                        test: /\.[jt]sx?$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: reactLoaderConfig.loader,
                                options: {
                                    presets: reactLoaderConfig.options.presets,
                                    plugins: [require.resolve('react-refresh/babel')],
                                },
                            },
                        ],
                    })
                } else {
                    console.error('cannot find react app loader')
                }

                // console.debug(require('util').inspect(webpackConfig.module.rules, { colors: true, depth: null }))
            })

            return webpackConfig
        },
        plugins: [whenDev(() => new ReactRefreshPlugin({ disableRefreshCheck: false }))].filter(Boolean),
    },
}

@gaearon 특정 시점에서 기본적으로 CRA에서 Fast Refresh를 사용할 수있을 것으로 예상합니까?
그렇다면 그것에 필요한 것은 무엇입니까?

현재 수행중인 작업에는 약간의 작업이 필요합니다.

HMR 기능을 사용하면 호출됩니까? 예를 들어 componentDidMount.
react-proxy를 사용하고 componentDidMount가 호출됩니다.
반응 15.X는 빠른 새로 고침을 사용할 수 있습니까?

• componentDidMount 가 호출됩니다. 뿐만 아니라 unmount -클래스가 전체로 다시로드됩니다.
• react-proxy 사용을 중지하는 것이 좋습니다. 글쎄요, 아마 몇 년 전에 멈춰야 했어요.
• 15.X ? - 절대적으로하지. Fast Refresh __는 react의 일부이며, 따라서 최신 버전에만 존재합니다.

빠른 새로 고침 또는 react-hot-loader를 사용하여 react-proxy를 대체해야합니까?
HMR에서 함수 (componentDidMount)가 실행되는 것을 방지 할 수있는 방법이 있습니까? -새로운 데이터를 얻기 위해 메소드를 호출합니다.

JIT에서 react-hot-loader를 어떻게 사용해야합니까? -브라우저 실시간 컴파일

• 빠른 새로 고침 또는 react-hot-loader를 사용하여 react-proxy를 대체해야합니까?

  먼저 fast refresh 시도한 다음 RHL 시도

• HMR에서 함수 (componentDidMount)가 실행되는 것을 방지 할 수있는 방법이 있습니까? -새로운 데이터를 얻기 위해 메소드를 호출합니다.

  (후크 사용 ...), 구성 요소 lifeCycle에 의존하지 않고 필요할 때 데이터를 가져옵니다. react-query , swr 또는 다른 솔루션을 사용해보십시오.

새로운 HMR을 어떻게 사용해야하는지에 대한 질문에 대해서는 거기에서 최신 생각을 알지 못하는 것 같습니다. @gaearon 이 CRA repo에 대한 PR을 가지고 있음을

독자를 위해 명확히하기 위해 PR은 매우 구식이며 더 이상 관련이 없습니다.

Fast Refresh의 작동 방식과 통합 방법에 대해 적어야합니다. 아직 시간이 없었습니다.

오늘부터 그 PR은 아직 열려 있습니다. 더 나은 개요를 볼 수 있도록 아직 병합 할 기회가있는 관련 PR 만 열어두면 좋을 것입니다. 참조 용으로 보관하는 경우 항목을 브랜치, 태그 또는 다른 저장소로 이동하는 것이 좋습니다.

계속 Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly. 문서를 따랐지만 놓친 것 같습니까?

계속 오류가 발생합니다. [React Refresh] HMR (Hot Module Replacement)이 활성화되지 않았습니다! React Refresh가 제대로 작동하려면 HMR이 필요합니다. 문서를 따랐지만 놓친 것 같습니까?

@silkfire 나는 당신이 webpack 플러그인을 사용하고 있다고 가정하고 있습니다. 그렇다면 웹팩 플러그인 저장소 ( https://github.com/pmmmwh/react-refresh-webpack-plugin/)에 질문을 제출

오늘부터 그 PR은 아직 열려 있습니다. 더 나은 개요를 볼 수 있도록 아직 병합 할 기회가있는 관련 PR 만 열어두면 좋을 것입니다. 참조 용으로 보관하는 경우 항목을 브랜치, 태그 또는 다른 저장소로 이동하는 것이 좋습니다.

귀하의 제안에 감사 드리지만, 읽지 않은 수천 개의 알림으로 인해 이전 PR을 다시 방문하는 것을 기억하기 어려울 수 있습니다. Create React App 저장소 관리자가 올바른 일을하고 더 이상 유용하지 않다고 생각하면 닫을 것이라고 믿습니다.

이걸 닫겠습니다.

웹팩에 대한 참조 구현으로 https://github.com/pmmmwh/react-refresh-webpack-plugin/ 이
그리고 https://github.com/facebook/react/issues/16604#issuecomment -528663101에서는 사용자 지정 통합을 만드는 방법을 설명합니다.

계속 Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly. 문서를 따랐지만 놓친 것 같습니까?

webpack HMR을 활성화하지 않은 것 같습니다. 추가 도움이 필요하면 플러그인 저장소에 문제를 제출하세요.

Hot Replacement는 이제 React의 일부이므로 React 문서에 별도의 위치가 있어야하며 특정 번 들러 및 플랫폼에서 사용할 추가 라이브러리를 가리키고 자체 업데이트 CSS와 같은 일부 여전히 존재하는 문제점을 설명해야합니다. 모듈.

이와 같은 정보는 github 문제 및 블로그 게시물에 묻히면 안됩니다.

@theKashey 그것은 React에 있지만 react-dom 구현은 실험적입니다.
또한 create-react-app과 함께 번들로 제공되는 빠른 새로 고침 구현이 있지만 아직 출시되지 않았습니다 : pmmmwh / react-refresh-webpack-plugin # 7. 아마도 다음 반응 스크립트 버전에있을 것입니다.

따라서 아마도 React 팀은 아직이 실험 단계에서 react-dom에 대한 Fast Refresh에 대해 이야기하는 것이 옳지 않다고 생각합니다.

React에 있지만 react-dom 구현은 실험적 일뿐입니다.

명확하게 말하면 react-dom 자체의 구현은 React Native와 마찬가지로 안정적입니다. 통합 이 모두 안정적이지 않다는 것입니다.

React 문서에 별도의 위치가 있어야하며, 특정 번 들러 및 플랫폼에서 사용할 추가 라이브러리를 가리키고 자체 업데이트 CSS 모듈과 같은 일부 여전히 존재하는 문제를 설명합니다.

이것은 합리적으로 들립니다. 유사한 RN 페이지를 기반으로 고급 가이드 섹션에 PR을 추가하여 기쁘게 생각합니다.

@gaearon
내 반응 앱은 스타일이 지정된 일부 구성 요소 변경으로 문제없이 해당 변경 사항을 올바르게 적용합니다.
그러나 Redux의 감속기에서 일부 코드를 변경하면 전체 앱이 완전히 새로 고쳐지고 모든 redux 상태가 손실됩니다.
react-fast-refresh 와 함께 현재 상태를 저장하려면 redux-persist 와 같은 다른 라이브러리를 사용해야합니까?

우리는 완전한 원을 갔고 여기에 다시 간다 😅

이것이 저수준 HMR이 작동하는 방식이며 빠른 새로 고침 책임이 없습니다. redux 또는 webpack 문서를 참조하십시오.

우리는 완전한 원을 갔고 여기에 다시 간다 😅

이것이 저수준 HMR이 작동하는 방식이며 빠른 새로 고침 책임이 없습니다. redux 또는 webpack 문서를 참조하십시오.

전체 원 참조를 연결 하시겠습니까?

@ jwchang0206는 같은 코드가 있는지 확인 이 상점에서.

전체 원 참조를 연결 하시겠습니까?

React Hot Loader에 대해서도 동일한 질문이 제기되었습니다. 같은 대답이 주어졌습니다. 우리는 새로운주기의 시작에 있습니다.

@ jwchang0206 이 문제를 해결하기 위해 작성한 작은 라이브러리 인 redux-reducers-injector를 보십시오.
핫 리로딩으로 리로딩 리듀서를 지원할 수 있습니다.
감속기에서 불변성의 redux 원칙을 따르고 원활하게 작동하는지 확인하십시오 💯
sagas를 사용하는 경우 redux-sagas-injector를 사용할 수 있습니다.

@gaearon window 사용에 약간 혼란스러워합니다. 구현이 교체되어 정말 필요한 것처럼 보이지 않습니까? 그 요점은 무엇입니까?

var prevRefreshReg = window.$RefreshReg$; // these are dummies
var prevRefreshSig = window.$RefreshSig$; // these are dummies
var RefreshRuntime = require('react-refresh/runtime');

window.$RefreshReg$ = (type, id) =>{ /*...*/ }
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

try {
  // ...
} finally {
  window.$RefreshReg$ = prevRefreshReg; // these are dummies again
  window.$RefreshSig$ = prevRefreshSig; // these are dummies again
}

나는 내 사용자 정의 번 들러를 가지고 있으며 이것을 구현하는 과정이지만 그것이 절대적으로 필요한 이유 또는 그 요점이 무엇인지 알 수 없습니다 ... 처음에는 메모리 사용 / 누설 최적화를 의심했지만 이것들은 RefreshRuntime 착신 전환됩니다.

@leidegre 창 개체에 $ RefreshSig $를 설정하기로 한 결정에 대해서는 언급 할 수 없지만 브라우저 환경과의 결합으로 인해 React NativeScript에서 Fast Refresh를 사용할 때 문제가 발생했습니다. @pmmmwh 는 Fast Refresh의 브라우저에 대한 결합을 극복하기 위해 Fast Refresh Webpack 플러그인을 조정하여 구조했습니다 (이 스레드에서 발생하고 극복 한 문제에 대해 논의했습니다 : https://github.com/pmmmwh/react-refresh-webpack-plugin/). 문제 / 79). 사용 된 접근 방식이 사용자 지정 번 들러의 빠른 새로 고침 통합에 유용할지 궁금합니다.

내 번 들러는 대부분 TypeScript 컴파일러를 둘러싼 래퍼입니다. 구현은 대부분 react-refresh/babel 방문자로부터 조정 된 것입니다.

이것은 작동하는 간단한 일이지만 react-refresh/bable 방문자만큼 완전하지는 않습니다.

import ts = require("typescript")

import { IndexModule } from "./registry"

/** Enables the use of `react-refresh` for hot reloading of React components. */
export function hotTransform(m: IndexModule, hot: boolean) {
  // see https://github.com/facebook/react/issues/16604#issuecomment-528663101
  return (ctx: ts.TransformationContext) => {
    return (sourceFile: ts.SourceFile) => {
      const refreshRuntime = ts.createUniqueName("ReactRefreshRuntime")

      const createSignatureFunctionForTransform = ts.createPropertyAccess(
        refreshRuntime,
        "createSignatureFunctionForTransform"
      )

      const register = ts.createPropertyAccess(refreshRuntime, "register")

      let hasComponents = false

      function visitor(node: ts.Node): ts.VisitResult<ts.Node> {
        if (ts.isFunctionDeclaration(node)) {
          if (_hasModifier(node, ts.SyntaxKind.ExportKeyword)) {
            // assert component naming convention

            if (node.name === undefined) {
              console.warn("unsupported export of unnamed function in ...")
              return node
            }

            const name = node.name
            if (!_isComponentName(name.text)) {
              console.warn(
                `warning: unsupported export '${name.text}' in ${m.path} (${m.id}) does not look like a function component, component names start with a capital letter A-Z. TSX/JSX files should only export React components.`
              )
              return node
            }

            if (!hot) {
              return node // opt-out
            }

            hasComponents = true

            let hookSignatureString = ""

            function hookSignatureStringVisitor(
              node: ts.Node
            ): ts.VisitResult<ts.Node> {
              const hookSig = _getHookSignature(node)
              if (hookSig !== undefined) {
                if (0 < hookSignatureString.length) {
                  hookSignatureString += "\n"
                }
                hookSignatureString += hookSig
              }
              return node
            }

            // update function body to include the call to create signature on render

            const signature = ts.createUniqueName("s")

            node = ts.visitEachChild(
              node,
              (node) => {
                if (ts.isBlock(node)) {
                  return ts.updateBlock(
                    ts.visitEachChild(node, hookSignatureStringVisitor, ctx),
                    [
                      ts.createExpressionStatement(
                        ts.createCall(signature, undefined, [])
                      ),
                      ...node.statements,
                    ]
                  )
                }
                return node
              },
              ctx
            )

            const signatureScope = ts.createVariableStatement(
              undefined,
              ts.createVariableDeclarationList(
                [
                  ts.createVariableDeclaration(
                    signature,
                    undefined,
                    ts.createCall(
                      createSignatureFunctionForTransform,
                      undefined,
                      undefined
                    )
                  ),
                ],
                ts.NodeFlags.Const
              )
            )

            const createSignature = ts.createExpressionStatement(
              ts.createCall(signature, undefined, [
                name,
                ts.createStringLiteral(hookSignatureString),
              ])
            )

            const registerComponent = ts.createExpressionStatement(
              ts.createCall(register, undefined, [
                name,
                ts.createStringLiteral(m.path + " " + name.text),
              ])
            )

            return [signatureScope, node, createSignature, registerComponent]
          }
        }

        if (!hot) {
          // if hot reloading isn't enable, remove hot reloading API calls
          if (ts.isExpressionStatement(node)) {
            const call = node.expression
            if (ts.isCallExpression(call)) {
              if (
                _isPropertyAccessPath(
                  call.expression,
                  "module",
                  "hot",
                  "reload"
                )
              ) {
                return undefined
              }
            }
          }
        }

        return node
      }

      sourceFile = ts.visitEachChild(sourceFile, visitor, ctx)

      if (hot && hasComponents) {
        let reactIndex = sourceFile.statements.findIndex((stmt) => {
          if (ts.isImportEqualsDeclaration(stmt)) {
            const ref = stmt.moduleReference
            if (ts.isExternalModuleReference(ref)) {
              const lit = ref.expression
              if (ts.isStringLiteral(lit)) {
                return lit.text === "react"
              }
            }
          }
          return false
        })

        if (reactIndex === -1) {
          console.warn(`cannot find import React = require('react') in ...`)
          reactIndex = 0
        }

        // insert after

        sourceFile = ts.updateSourceFileNode(sourceFile, [
          ...sourceFile.statements.slice(0, reactIndex + 1),
          ts.createImportEqualsDeclaration(
            undefined,
            undefined,
            refreshRuntime,
            ts.createExternalModuleReference(
              ts.createStringLiteral("react-refresh/runtime")
            )
          ),
          ...sourceFile.statements.slice(reactIndex + 1),
          ts.createExpressionStatement(
            ts.createCall(
              ts.createPropertyAccess(
                ts.createPropertyAccess(
                  ts.createIdentifier("module"),
                  ts.createIdentifier("hot")
                ),
                ts.createIdentifier("reload")
              ),
              undefined,
              undefined
            )
          ),
          ts.createExpressionStatement(
            ts.createBinary(
              ts.createPropertyAccess(
                ts.createIdentifier("globalThis"),
                ts.createIdentifier("__hot_enqueueUpdate")
              ),
              ts.createToken(ts.SyntaxKind.AmpersandAmpersandToken),
              ts.createCall(
                ts.createPropertyAccess(
                  ts.createIdentifier("globalThis"),
                  ts.createIdentifier("__hot_enqueueUpdate")
                ),
                undefined,
                undefined
              )
            )
          ),
        ])
      }

      return sourceFile
    }
  }
}

function _hasModifier(node: ts.Node, kind: ts.SyntaxKind): boolean {
  const modifiers = node.modifiers
  if (modifiers !== undefined) {
    for (let i = 0; i < modifiers.length; i++) {
      if (modifiers[i].kind === kind) {
        return true
      }
    }
  }
  return false
}

function _isComponentName(name: string): boolean {
  // ^[A-Z]
  const ch0 = name.charCodeAt(0)
  return 0x41 <= ch0 && ch0 <= 0x5a
}

function _isPropertyAccessPath(
  node: ts.Expression,
  ...path: ReadonlyArray<string>
): node is ts.PropertyAccessExpression {
  for (let i = 0; i < path.length; i++) {
    if (ts.isPropertyAccessExpression(node)) {
      if (!(node.name.text === path[path.length - (i + 1)])) {
        return false
      }
      node = node.expression
    }
  }
  return true
}

function _getHookSignature(node: ts.Node): string | undefined {
  if (ts.isExpressionStatement(node)) {
    const call = node.expression
    if (ts.isCallExpression(call)) {
      const prop = call.expression
      if (ts.isPropertyAccessExpression(prop)) {
        const text = prop.name.text
        if (text.startsWith("use") && 3 < text.length) {
          // todo: add additional checks and emit warnings if the hook usage looks non standard

          return text
        }
      }
    }
  }
  return undefined
}

처음에는 createSignatureFunctionForTransform 를 사용하는 방법을 잘 몰랐지만 각 구성 요소에 대해 작은 상태 머신을 생성하는 팩토리 함수일뿐입니다. 따라서 정적 후크 시그니처 (해시와 유사한 불투명 한 값)를 사용하여 각 함수에 대해 한 번씩 호출합니다. 그런 다음 렌더링에서 호출하여 설정 작업을 완료합니다.

다음과 같이 변경됩니다.

import React = require("react")

export function App() {
  const [state, setState] = React.useState(0)

  return (
    <React.Fragment>
      <p>
        Click Count !!!<strong>{state}</strong>!!!
        <br />
        <button onClick={() => setState((acc) => acc + 1)}>Click me</button>
      </p>
    </React.Fragment>
  )
}

이것으로 :

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const ReactRefreshRuntime_1 = require(6);
const s_1 = ReactRefreshRuntime_1.createSignatureFunctionForTransform();
function App() {
    s_1();
    const [state, setState] = React.useState(0);
    return (React.createElement(React.Fragment, null,
        React.createElement("p", null,
            "Click Count !!!",
            React.createElement("strong", null, state),
            "!!!",
            React.createElement("br", null),
            React.createElement("button", { onClick: () => setState((acc) => acc + 1) }, "Click me"))));
}
exports.App = App;
s_1(App, "useState");
ReactRefreshRuntime_1.register(App, "./App App");
module.hot.reload();
globalThis.__hot_enqueueUpdate && globalThis.__hot_enqueueUpdate();

방문자가 불완전합니다. 가장 기본적인 사용 사례 만 다룹니다.

window 사용에 약간 혼란 스럽습니다. 구현이 교체되어 정말 필요한 것처럼 보이지 않습니까? 그 요점은 무엇입니까?

뿡뿡

Metro의 구현은 window 아니라 실제 global 범위를 사용한다고 생각합니다.

이 구현에 대한 원래의 근거는 모르지만 제 경험으로는 유용했습니다. 실제 요구 논리가 빠른 새로 고침 논리와 독립적임을 보장합니다 (즉, react-refresh/babel 변환은 거의 모든 번 들러). 스와핑과 마찬가지로 런타임에 의해 처리되지 않아야하는 모듈이 처리되지 않도록하는 가드 역할도합니다.

@babel/runtime 가 사용되는 경우를 고려하십시오.이 경우 헬퍼를 번들에 가져 오기로 주입하고 node_modules 아닌 코드 만 HMR하려고합니다. 빈 헬퍼를 먼저 초기화하지 않고 글로벌 스코프에 헬퍼를 할당하면 드물게 사용자 영역 모듈이 초기화를 완료하기 전에 Babel 주입 헬퍼가 cleanup 를 호출하는 경우가 발생할 수 있습니다. 수입).