1.React元素渲染的流程

1.创建DOM容器

<!-- ... 其它 HTML ... -->

<div id="root"></div>

<!-- ... 其它 HTML ... -->

2.创建React元素

2.1创建JSX

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

2.2JSX自动转换为浏览器原生支持

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

2.3浏览器原生支持转换为React元素(JS对象)

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

3.渲染React元素

ReactDOM.render(
  element,
  document.getElementById('root')
);

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/frond/react/9706.html

发表评论

登录后才能评论