138、React.js之DOM的渲染方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//这两个包名导入的时候，接受的成员名称，必须这么写
import React from 'react'        //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' //把创建好的组件 和虚拟DOM 放到页面上展示

//2 创建虚拟DOM元素
//参数1  创建的元素的类型，字符串，表示元素的名称
//参数2  是一个对象或null,表示 当前这个DOM元素的属性
//参数3  子节点（包括 其它 虚拟DOM 获取文本子节点）
const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a div' }, '这是一个大大的H1')
const mydive = React.createElement('div', null, '这是一个div元素', myh1)


//渲染 页面上的DOM结构  最好的方式，就是写HTML 代码

const mytest = <div>aaa</div>

//3 使用ReactDOM 把虚拟DOM 渲染到页面上
//1 要渲染的那个虚拟DOM元素
//2 指定页面上的一个容器
ReactDOM.render(myh1, document.getElementById('app'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//这两个包名导入的时候，接受的成员名称，必须这么写
import React from 'react'        //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' //把创建好的组件 和虚拟DOM 放到页面上展示

//2 创建虚拟DOM元素
//参数1  创建的元素的类型，字符串，表示元素的名称
//参数2  是一个对象或null,表示 当前这个DOM元素的属性
//参数3  子节点（包括 其它 虚拟DOM 获取文本子节点）
const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a div' }, '这是一个大大的H1')
const mydive = React.createElement('div', null, '这是一个div元素', myh1)


//渲染 页面上的DOM结构  最好的方式，就是写HTML 代码

const mytest = <div>aaa</div>

//3 使用ReactDOM 把虚拟DOM 渲染到页面上
//1 要渲染的那个虚拟DOM元素
//2 指定页面上的一个容器
ReactDOM.render(myh1, document.getElementById('app'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react'
import ReactDOM from 'react-dom'


import myclass from './class_study.js'

let str = '你好，中国'
let title = '999'
const arr = [
    <h2>这是h2</h2>,
    <h3>这是h3</h3>
]

const h1 = <h1>红红火火恍恍惚惚</h1>
const arrStr = ['毛利', '柯南', '小五郎', '灰原哀']


//定义一个空数组，用来存放 名称 标签 
let nameArr = []
arrStr.forEach(item => {
    const temp = <h5>{item}</h5>
    nameArr.push(temp)
})

// 调用render 函数渲染
// 什么情况下 需要使用{}呢，需要写js表达式的时候
// ReactDOM.render(<div>
//     {str}
//     <p title={title}>这是p标签</p>
//     {h1}
//     <hr />
//     {arr}
//     <hr />
//     {nameArr}
//     </div>, document.getElementById('app'))


var person = {
    name: 'ls',
    age: 22,
    gender: '男',
    address: '北京'
}

// ReactDOM.render(<div>
//     <Hello {...person}></Hello>
// </div>, document.getElementById('app'))


// class Hello2 extends React.Component {

//     constructor(props){
//         super(props)
//         console.log(props)
//         // 注意：如果使用extends实现了继承，那么在constructor的第一行，一定要显示调用一下super()
//         // super() 表示父类的构造函数
//     }

//     render() {
//         //报错信息2


//         // this.props.address=123  虽然在React dev tools中 没有显示说
//         // class组件中的props是只读的，
//         // 但是只要是class组件中的props都是只读的
//         //通过分析以上报错，在render函数中还必须return一个东西
//         //如果没有什么需要被return的，则需要return null
//         return <div>
//             <h1>这是使用class类创建的组件</h1>
//             <h3>外界传递过来的数据是:{this.props.address}----{this.props.info}</h3>
//         </div>
//     }

// }



// 在使用Hello组件之前要导入hello组件
import Hello from './components/hello.jsx'
import Hello2 from './components/hello2.jsx'

//注意：以上两种创建组件的方式，有着本质上的区别，其中，
//使用function构造函数创建的组件，内部没有state私有数据，
//只有一个props来接收 外界传递过来的数据:
//使用class关键字创建的组件，内部，除了有this.props这个只读属性之外，
//还有一个专门用于存放自己私有数据的this.state属性，
//这个state是可读可写的
//基于上面的区别，我们可以为这两种创建组件的方式，下定义了
//使用function创建的组件，叫做无状态组件
//使用class创建的组件，叫做 有状态组件
//有状态组件和无状态组件，最本质的区别，就是有无state属性，
//同时有自己的生命周期函数，
//但是，function创建的组件，没有自己的生命周期函数
//什么时候使用有状态组件，什么时候使用无状态组件?
//1、如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑
//   此时非车适合用class创建出来的有状态组件

//2、如果一个组件，只需要根据外界传递过来的props,渲染固定的页面结构就完事了，
//   此时，非车适合使用function 创建出来的无状态组件，由于剔除了组件的生命周期，
//   所以运行的速度会相对快一丢丢


ReactDOM.render(
    <div>
        <Hello2 address="北京传智播客" info="黑马程序员"></Hello2>
    </div>, document.getElementById('app')
)

1
2
3
4
5
6
7
8
9
10
11
12
13
class Hello2 extends React.Component {

    render() {
        //报错信息2

        //通过分析以上报错，在render函数中还必须return一个东西
        //如果没有什么需要被return的，则需要return null
        return <div>
            <h1>这是使用class类创建的组件</h1>
        </div>
    }

}