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 出来看看:console.log
在 React 应用中,通常会有一个 root 节点来当应用的的钩子,React 将会控制该区域并渲染 UI
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')render html
虚拟 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的作用主要是可以跟踪哪些子元素发生了变更,在发生变更的时候,只渲染该子组件,提升渲染性能。React warning
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 =
- {
peoples.map(people => (
{people.name}))
}
最后底层编译时还是使用 React.creatElement()去创建,但是 JSX 简洁也优雅。
注意:JSX 只返回一个根元素,但是可以包含任何数量的子元素:
const message = (
WHO
- Johnson
- 30
- web front-end
);
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
- {
peoples.map(people => (
{people.name}))
}
}
}
ReactDOM.render(
,
document.getElementById('root')
)
总之,React 只关心应用的 UI,使用 JSX 来描述 UI 的外观如何,React 将会使用.createElement()输出到浏览器中并渲染成标准的 HTML。
在应用中,我们可以将组件类看成是生成组件实例的工厂,组件类应该遵循单一功能原则,只做一件事情,复杂的组件,建议拆分成更小的子组件。