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/javascript/react/9706.html

(0)
上一篇 2021年11月1日 18:05
下一篇 2021年11月2日 00:55

相关推荐

  • 2.React JSX的两种形式

    JSX是JavaScript eXtension(JavaScript 的语法扩展)的缩写,JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。 React 会将以小写字母开头的…

    React教程 2021年11月2日
    01550
  • 4.React函数组件和类组件

    组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。 注意: 组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。 函数组件 类组件

    React教程 2021年11月4日
    01770
  • 6.React事件的介绍

    事件处理 React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 例如,下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮: 向事件函数传递参数

    React教程 2021年11月6日
    01790

发表评论

登录后才能评论