You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// import invariant from 'shared/invariant';//invariant(false, 'This module must be shimmed by a specific renderer.'); //syexport*from'./forks/ReactFiberHostConfig.dom';
/src/react/packages/shared/invariant.js
exportdefaultfunctioninvariant(condition,format,a,b,c,d,e,f){if(condition)return;// 加上这行thrownewError("Internal React error: invariant() is meant to be replaced at compile "+"time. There is no runtime version.");}
/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @flow */exportconstisPrimaryRenderer=true;exportconstwarnsIfNotActing=true;// This initialization code may run even on server environments// if a component just imports ReactDOM (e.g. for findDOMNode).// Some environments might not have setTimeout or clearTimeout.exportconstscheduleTimeout: any=typeofsetTimeout==='function' ? setTimeout : (undefined: any);exportconstcancelTimeout: any=typeofclearTimeout==='function' ? clearTimeout : (undefined: any);exportconstnoTimeout=-1;// -------------------// Microtasks// -------------------exportconstsupportsMicrotasks=true;exportconstscheduleMicrotask: any=typeofqueueMicrotask==='function'
? queueMicrotask
: typeofPromise!=='undefined'
? callback=>Promise.resolve(null).then(callback).catch(handleErrorInNextTick)
: scheduleTimeout;// TODO: Determine the best fallback here.functionhandleErrorInNextTick(error){setTimeout(()=>{throwerror;});}exportconstsupportsMutation=true;exportconstsupportsHydration=true;exportconstsupportsTestSelectors=true;
在react/packages/react-dom/src/client/ReactDOMHostConfig.js 中找到CONST.js文件中定义的变量并注释,在ReactDOMHostConfig.js文件最后添加export * from './CONST.js'
src/react/packages/react-dom/src/client/ReactDOM.js
Line 238:9: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-loggingsrc/react/packages/react-reconciler/src/ReactFiberHooks.new.js
Line 1014:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-loggingsrc/react/packages/react-reconciler/src/ReactFiberHooks.old.js
Line 1014:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-loggingsrc/react/packages/react-reconciler/src/ReactFiberHostConfig.js
Line 10:1: Definitionforrule'react-internal/invariant-args'wasnotfoundreact-internal/invariant-args
Line 23:15: Stringsmustusesinglequotequotessrc/react/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
Line 3201:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-loggingsrc/react/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
Line 3201:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-loggingsrc/react/packages/shared/ConsolePatchingDev.js
Line 30:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-logging
Line 55:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-logging
Line 65:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-logging
Line 81:7: Definitionforrule'react-internal/no-production-logging'wasnotfoundreact-internal/no-production-loggingsrc/react/packages/shared/ReactSharedInternals.js
Line 14:36: StringsmustusesinglequotequotesSearchforthekeywordstolearnmoreabouteacherror.
/** * Base class helpers for the updating state of a component. */functionComponent(props,context,updater){debuggerthis.props=props;this.context=context;// If a component has string refs, we will assign a different object later.this.refs=emptyObject;// We initialize the default updater but the real one gets injected by the// renderer.this.updater=updater||ReactNoopUpdateQueue;}
此文档可用于调试和学习
react
源码,适用于当前最新版本(17.0.2)本地调试
react
源码的步骤对本地项目的修改
debug-react 包括了步骤1、2、3,可以直接下载使用;
生成
react
项目webpack
配置3.在
src
目录下下载react
(此文章编写时react版本是17.0.2)4.在
config/webpack.config.js
中修改 react 的引用react
的引用修改
react
包no-function-declare-after-return
和react-internal
相关配置屏蔽,并搜索/src/react/packages/
,把相关的注释都删除。react/packages/react-dom/src/client
下创建CONST.js
文件,内容如下(主要解决循环引用问题)在
react/packages/react-dom/src/client/ReactDOMHostConfig.js
中找到CONST.js
文件中定义的变量并注释,在ReactDOMHostConfig.js
文件最后添加export * from './CONST.js'
启动项目
npm start
, 控制台显示success,但是打开页面会有error,直接在/src/react
项目下搜索并删除即可,有点多,建议批量操作在react源码中添加第一个debugger
在 src\react\packages\react\src\ReactBaseClasses.js 的Component中打个debugger,刷新页面即可看到断点进去了。
参考资料
The text was updated successfully, but these errors were encountered: