preface

React source code, I want to debug, and then the debugger to see how variables and data are transferred, but I have no choice. There’s so much stuff to pack. A lot of potholes. Keep a record. Help people tread less potholes, and make a note for yourself.

The preparatory work

  • Node v8.0.0+ and Yarn V1.2.0 +.

  • JDK has been installed.

  • You have GCC installed (or don’t bother if you need to install a compiler), because some dependencies may have to be compiled, and on OS X, the Xcode command-line tool takes care of that for you; On Ubuntu, apt-get install build-essential installs the required package (similar commands on other Linux distributions work as well); On Windows you need to take some extra steps, as shown in the Node-gyp installation steps.

  • Familiar with Git.

  • One can run the React project (create-react-app)

start

1. Obtain the source code

  1. Open source address: github.com/facebook/re…
  2. Clone to its own local
    1. You can download the zip and unzip it
    2. You can also Fork to GitHub and Clone
      1. My personal advice is to Fork, then modify, add comments, etc. Keep a record of your learning experience
    3. You can Clone it directly

2. Establish a dependency connection

  1. Open the project
  2. Run YARN to install dependencies
  3. runyarn build react/index,react/jsx,react-dom/index,scheduler --type=NODErepack
  4. cd build/node_modules/reactEnter the React package
  5. yarn linkEstablish a connection
  6. CD to the original project pathReturn to prepare for the next entry into the React – DOM
  7. cd build/node_modules/react-dom
  8. yarn link

3. Find a React project that you can debug

I’m using create-react-app here

  1. npx create-react-app my-app
  2. cd my-app

4. Connect the project to the React library

  1. Of the project that was just creatednode_modulesIn thereactandreact-dom
  2. Open the React project
  3. yarn link react react-dom

5. Start debugging

  1. Open up our Clone project

  2. Find where you want to debug

    1. The change here ispackages/react-dom/src/client/ReactDOMLegacy.js
    2. The following
    export function render( element: React$Element<any>, container: Container, callback: ? Function, ) {+ console.log(222);
  if (__DEV__) {
    console.error(
      'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
        'instead. Until you switch to the new API, your app will behave as ' +
        "if it's running React 17. Learn " +
        'more: https://reactjs.org/link/switch-to-createroot',
    );
  }

  invariant(
    isValidContainerLegacy(container),
    'Target container is not a DOM element.',
  );
  if (__DEV__) {
    const isModernRoot =
      isContainerMarkedAsRoot(container) &&
      container._reactRootContainer === undefined;if (isModernRoot) { console.error( 'You are calling ReactDOM.render() on a container that was previously ' + 'passed to ReactDOM.createRoot(). This is not supported. ' + 'Did you mean to call root.render(element)? ', a); } } return legacyRenderSubtreeIntoContainer( null, element, container, false, callback, ); }Copy the code

  3. Open the React source project

  4. Run the yarn build react/index, the react/JSX, react – dom/index, the scheduler – type = NODE repackaged

  5. Open the React project we created

  6. yarn start

  7. Open the console

6. Subsequent

This is required every time you modify the source code

  1. runyarn build react/index,react/jsx,react-dom/index,scheduler --type=NODErepack
  2. Refresh our page
  3. It’s really a hassle and there are no good ideas at the moment
    1. Maybe this is practice!

conclusion

Feel free to leave a comment below if you have any questions. Give me a thumbs up