React[002]:jsx

发表于 更新于 分类于

js/jsx/js=>jsx

src/index.js

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
import React, { Component} from "react";

import { render } from 'react-dom';


// 表示一个虚拟DOM树的方式
// const app = {
//     tag: 'div',
//     attrs: {
//         className: 'app',
//         id: 'appRoot'
//     },
//     Children: [
//         {
//             tag: 'h1',
//             attrs: {
//                 className:'title'
//             },
//             Children:[
//                 'js原理'
//             ]
//         },
//         {
//             tag:'p',
//             attrs:null,
//             Children:[
//                 '类组件时继承React.Comopnent的'
//             ]
//         }
//     ]
// };

// 使用类的形式创建的组件
// class App extends Component {
//     render() {
//         console.log(this.props)
//         return (
//             <div className="app" id="appRoot">
//                 <h1 className="title">!!!</h1>
//                 <p>{this.props.desc}</p>
//             </div>
//         )
//     }
// }
// const app = new App({
//     desc: '类组件时继承React.Comopnent的'
// }).render()


// 所以react在真正渲染的时候会把z真正的react代码生成js代码
class App extends Component { 
    render(){
        // React.createElement 用于创建元素
        return React.createElement(
            'div',
            {
                className:'app',
                id:'appRoot'
            },
            React.createElement(
                'h1',
                {
                    className:'title'
                },
                'jsx原理'
            ),
            React.createElement(
                'p',
                null,
                '类组件时继承React.Comopnent的'
            )
        );
    }
}


render(
    <App desc="类组件时继承React.Comopnent的" />,
    document.querySelector('#root')
)