This is the 8th day of my participation in the August Text Challenge.More challenges in August

This is the first article I’ve written about react source code

  • It has been two years since I first started using Vue to use React. I haven’t had a thorough understanding of the source code of React
  • See the analysis of a lot, see a lot of feeling I understand. But have never written out, as the saying can let others understand is really understand

version

The react source version I read is 17.0.2. This is the repository for my fork

Github.com/IMSupperkak…

preface

  • Due to the massive React code, this series is likely to be quite long, and each part will be divided into several articles
  • Because there is too much code to read the article must be combined with the code together I will not post up
  • I will update the comments of the code I read to Github

First heat

React-dom is one of the react core libraries. The React-DOM package provides DOM (dom-specific) methods that you can use at the top of your application, if needed, outside of the React model. In general, however, this module is not required for most components.

Let’s first look at what methods the React-DOM throws

/**
 * 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
 */

// Export all exports so that they're available in tests.
// We can't use export * from in Flow for some reason.
export {
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  createPortal,
  createRoot,
  hydrateRoot,
  findDOMNode,
  flushSync,
  hydrate,
  render,
  unmountComponentAtNode,
  unstable_batchedUpdates,
  unstable_createEventHandle,
  unstable_flushControlled,
  unstable_isNewReconciler,
  unstable_renderSubtreeIntoContainer,
  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
  unstable_scheduleHydration,
  version,
} from './src/client/ReactDOM';
Copy the code

/ SRC /client/ReactDOM throws methods such as Render createRoot. We’ll start with the render method used by React

render

The Render method renders a React element in the supplied Container and returns a reference to the component (or null for stateless components).

If the React element has already been rendered in the Container, this will update it and only change the DOM to map the latest React element if necessary.

If an optional callback function is provided, the callback will be executed after the component has been rendered or updated.

ReactDOM.render(element, container[, callback])
Copy the code