2 minutes read (About 307 words)
some_thing_about_react
一、React Components & React Elements & Instance
components: 输入props,输出element Tree. 单一数据流。
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
|
const Button = ({children, color}) => ({
type: 'button',
props: {
className: 'button button-'+color,
children: {
type: 'b',
props: {
children: children
}
}
}
})
const Button = React.createClass({
render(){
const { children, color } = this.props
return {
type: 'button',
props: {
className: 'button button-' + color,
children: {
type: 'b',
props: {
children:children
}
}
}
}
}
})
class Button extends React.Component{
render(){
const { children, color } = this.props
return {
type: 'button',
props: {
className: 'button button-' + color
children: {
type: 'b',
props: {
children: children
}
}
}
}
}
}
|
elements: 一个不可变的描述对象，告诉react要绘制什么样的视图。element本质上只是普通对象，描述了component instance 和 DOM Node，包括这俩者想要得到的属性。
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
| {
type: (string | ReactClass),
props: Object，
$$typeof: Symbol.for('react.element')
}
i.e.
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'ok'
}
}
}
}
得到以下结果:
<button className='button button-blue'>
<b>
ok
</b>
</button>
React.createElement(
type,
[props],
[...children]
)
const name = 'joeng'
const Ele = <div>hello,{name}</div>
React.isValidElement(object)
|
instances: 只有用class声明的React Components才有instance，instance是React创建和管理的，比起components和elements来说，instance显得不是那么重要。
