React语法

JSX语法

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';
import ReactDOM from 'react-dom';

import './index.scss'

let style = {};
let name = 'Li';
let names = ['张三','李四','王五'];
let flag = false;

let jsx = (<div className="jsx" style={style}>
{/* 条件判断 */}
{
flag ? <p>i am {name}</p> : <p>i am not {name}</p>
}
{/* 变量使用 */}
jsx...{name}
{/* 数组循环 */}
{
names.map((name, index)=> <p key={index}>i am {name}</p>)
}
</div>);

ReactDOM.render(jsx,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
import React from 'react';
import ReactDOM from 'react-dom';

// 基础组件
function Componetns() {
return <h1>i am li</h1>
}

// ES6写法
class ES6Compontnts extends React.Component{
render() {
return <h1>i am li</h1>
}
}

ReactDOM.render(
<div>
<Componetns/>
<ES6Compontnts/>
</div>,
document.getElementById('app')
);

state & props用法

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
import React from 'react';
import ReactDOM from 'react-dom';

class ES6Compontnts extends React.Component{
constructor (props) {
super(props);
this.state = {
name: 'li'
}
}
render() {
setTimeout(()=>{
this.setState({
name: 'Reson test'
})
},2000)
return <h1>i am {this.props.name}</h1>
}
}

ReactDOM.render(
<div>
<ES6Compontnts name="zhang"/>
</div>,
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
import React from 'react';
import ReactDOM from 'react-dom';

class Component extends React.Component{
constructor(props){
super(props);
this.state = {
name: 'zhang'
}
// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}

render(){
return (
<div>
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
</div>
)
}
};

ReactDOM.render(
<Component/>,
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
110
111
112
113
import React from 'react';
import ReactDOM from 'react-dom';

// 生命周期
// Initialization: 组件初始化 setup props and state
// Mounting: 挂载阶段 componentWillMount render componentDidMount
// Updating:运行阶段
// props {
// componentWillReceiveProps
// shouldComponentUpdate
// componentWillUpdate
// render
// componentDidUpdate
// }
// states{
// shouldComponentUpdate
// componentWillUpdate
// render
// componentDidMount
// }
// Unmounting:卸载阶段 componentWillUnmount
// Error Handling: 错误处理
class Component extends React.Component{
// 构造函数
constructor(props){
super(props);
this.state = {
data: '张三'
}
console.log('初始化数据: constructor');
}
render(){
console.log('渲染:render');
// return 只有一个根元素
return <p>
App: {this.props.data}
<button onClick={()=>{this.handlClick()}}>更新组件{this.state.data}</button>
</p>
}
// 挂载时
// 在组件已经被渲染到 DOM 中后运行
componentDidMount(){
console.log('挂载时: componentDidMount');
}
// 处理点击事件
handlClick() {
console.log('更新数据');
this.setState({
name: '李四'
})
}
// 将要接收父组件传来的props
componentWillReceiveProps(){
console.log('将要接收父组件传来的props: componentWillReceiveProps');
}
// 子组件是否应该更新
shouldComponentUpdate(){
console.log('子组件是否应该更新: shouldComponentUpdate');
return true
}
// 组件将要更新
componentWillUpdate(){
console.log('组件将要更新: componentWillUpdate');
}
// 组件更新完成
componentDidUpdate(){
console.log('组件更新完成: componentDidUpdate');
}
// 卸载时
componentWillUnmount() {
console.log('卸载时: componentWillUnmount');
}
}

class App extends React.Component{
// 构造函数
constructor(props){
super(props);
this.state = {
data: 'old 张三',
hasChild: true
}
console.log('初始化数据: constructor');
}
onPropsChange(){
console.log('更新Props')
this.setState({
data: 'new 张三'
})
}
onDel() {
console.log('销毁子组件');
this.setState({
hasChild: false
})
}
render(){
return (
<div>
{
this.state.hasChild ? <Component data={this.state.data}/> : null
}
<button onClick={()=>{this.onPropsChange()}}>改变Props</button>
<button onClick={()=>{this.onDel()}}>销毁子组件</button>
</div>
)
}
}

ReactDOM.render(
<App/>,
document.getElementById('app')
);