通俗易懂之React是如何渲染 UI

表歌

戴文信息科技（上海）有限公司员工

reatElement 方法

React.creatElement() 是用于创建 DOM 元素的顶级 API方法，类似于 Document.createElement()

React.createElement(type, props, content)

type参数是dom元素的标签：div, span, ul 或者 React 组件
props参数是标签的dom属性，null 或者一个对象
content参数是放在标签的内容，null, 字符串，React 元素或者React组件

demo sample

import React from 'react'
import ReactDOM from 'react-dom'
const element = React.createElement('div', null, 'hello world')
console.log(element)
ReactDOM.render(
  element,
  document.getElementById('root')

打印 element 出来看看：

在 React 应用中，通常会有一个 root 节点来当应用的的钩子，React 将会控制该区域并渲染 UI

<div id='root'></div>

ReactDOM是react 的一个库，可以使程序运行在浏览器中，脱离出来的好处是，我们构建的react程序可以应用在不同的设备中，不仅浏览器。

类似于 angular 的 BrowserModule

import { BrowserModule } from '@angular/platform-browser';

向 DOM 元素添加属性

React.creactElement() 第二个参数就是向dom元素添加dom属性，记住不是html属性，比如 DOM 有className属性，html有 class 属性，这两个不要混淆。

const element = React.createElement('div', {
    className: 'success'
}, 'hello world')

虚拟 DOM 的本质

本质是不创建真正的 DOM 元素，而只是描述真正 DOM 节点的对象，所以在调用 React.createElement() 时，并没有在 DOM 中创建任何东西，只有在执行 render 后，浏览器才会创建真正的 DOM 元素。

React 嵌套 - 子组件

绝大部分的应用都是父组件嵌套子组件，结构更加清晰合理，也方便复用UI。
进一步：

const element = React.createElement('div', {
  className: 'success'
}, React.createElement('strong', null, 'hello world'))

多个呢:

const element = React.createElement('ul', {
    className: 'list'
  }, React.createElement('li', null, 'Johnson'),
  React.createElement('li', null, 'Will'),
  React.createElement('li', null, 'Tammy'))

进一步：

const peoples = [{
    'name': 'Johnson'
    'name': 'Will'
    'name': 'Tammy'
const element = React.createElement('ul', {
  className: 'list'
}, peoples.map(people => (
    React.createElement('li', null, people.name)

需要注意的是，在渲染数组的时候，如果没有设置key唯一键值，React 会给出警告。key的作用主要是可以跟踪哪些子元素发生了变更，在发生变更的时候，只渲染该子组件，提升渲染性能。

const element = React.createElement('ul', {
  className: 'list'
}, peoples.map((people, index) => (
  React.createElement('li', {
    key: index
  }, people.name)

React JSX

我们学习了如何创建和嵌套元素，仅仅使用嵌套的方法来创建UI那将会是很麻烦的事情。如何更加自然的描述元素间的嵌套关系？重点来了。

JSX 是 JavaScript 的语法扩展，它可以让我们编写起来有点像 HTML 的 JavaScript 代码。

进化：

// const element = React.createElement('ul', {
//   className: 'list'
// }, peoples.map((people, index) => (
//   React.createElement('li', {
//     key: index
//   }, people.name)
// )))
const element = <ol> {
    peoples.map(people => ( 
    <li key={people.name}>{people.name} </li>
  } </ol>

最后底层编译时还是使用 React.creatElement()去创建，但是 JSX 简洁也优雅。

注意：JSX 只返回一个根元素，但是可以包含任何数量的子元素：

const message = (
    <h1>WHO</h1>
      <li>Johnson</li>
      <li>30</li>
      <li>web front-end</li>

React 组件

使用 React 构建程序是为了更好的组件化开发，更好的复用组件，将为简化 UI 构建的过程，在 React 组件类中，只有一个方法是必须的：render()

React 提供了一个基础组件类，用它来组合不同的元素，并将它视为一个元素来使用，可以将 React 组件视为创建 React 元素的工厂，通过构建自定义的组件或类，可以生成自定义的元素。

创建一个新的类，并 extends React.Component，render()的方法返回 JSX 或者该组件渲染的元素。

import React from 'react';
import ReactDOM from 'react-dom';
class ContactList extends React.Component {
  render() {
    const peoples = [{
    'name': 'Johnson'
    'name': 'Will'
    'name': 'Tammy'
 return <ol> {
    peoples.map(people => ( 
    <li key={people.name}>{people.name} </li>
  } </ol>