preface

Hello everyone! This is my second article about getting started

background

React Why split into two packages?

React contains only the core parts common to both Web and Mobile. Those responsible for Dom operations are placed in React - Dom, and those responsible for Mobile operations are included in React - Native. ReactDom only does browser - or DOM-related operations, such as reactdom.render () and reactdom.finddomNode (). For server-side rendering, reactdom.renderToString () can be used. React does everything else.Copy the code

Version React17.0.0

Api

React.createElement

You’ve certainly used JSX when writing React code, so why use JSX?

More flexible 2. Template is more expressive 3. Executes faster because it is optimized after compiling to JavaScript code 4. Writing modules is easier and faster...Copy the code

The JSX code will compile to react.createElement

      <div className="test">test</div> will be resolved to React. CreateElement ("div", {
               class: "test"
      }, "test")
      
Copy the code

So let’s look at the implementation of createElement

Navigate to the source file ReactElement.js

CreateElement takes three parameters type config children

Processing for config

Verify that ref and key are valid, traverse through config, and set the built-in properties to props after removing them

Treatment of children

If the childrenLength is greater than 1, the props. Children is an array, otherwise the childrenLength is an object.

Processing for defaultProps

Check whether defaultProps is set, and if so, assign the props value

Return a ReactElement

The essence is identified by $$Typeof

Component and PureComponent

Navigate to the source file reactBaseclasses.js

Component

The two most important components are refs and updater, and setState and forceUpdate both call methods in updater

PureComponent

PureComponent inherits Component

PS: each component has a isReactComponent/isPureReactComponent logo

After the language

Novice road, we have a lot of problems to advise!