React - Initial Rendering(初始化渲染)

React - Initial Rendering(初始化渲染)

• 以下内容均从源码角度分析，UI更新本质上是数据更改(props或者state) = render(state)。React提供了一种直接且直观的方法，所有移动部分都以**状态(states)**的形式聚合，那么问题来了？React究竟是如何渲染的了？内部的渲染原理是什么样的？接下来我们一步一步的分析。

标题	内容
JSX	JSX是如何生效的?
React.createElement	React.createElement工作原理
ReactDOM.render	ReacrDOM.render工作原理

JSX

• JSX: 一种在JavaScript代码中交织HTML标签的语法。

• create-react-app创建的应用中的App.js或者可以下载，这就是JSX的写法案例。

import React, {
    Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
   
  render() {
   
    return (
      <div className="App">
        <header className="App-header">
          <img scr={
   logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

• 这段代码能够在浏览器中直接运行生效吗？答案是否定的，那么JSX是如何生效的了，现在开始解答。
• 在编译时，JSX中定义的组件会被Babel编译成React.createElement()带有适当参数的函数形式。
• Babel的配置:

{
   
  "plugins": [
    ["transform-react-jsx", {
   
      "pragma": &