viviier

React 入门实例(ruanyifeng)

一、Hello World

1
2
3
4
5
6
const { render } = ReactDOM;
render(
<h1>Hello, world</h1>,
document.getElementById('root')
)

二、JSX语法

1
2
3
4
5
6
7
8
9
10
11
12
let names = ['Alice', 'Emily', 'Kate'];
render(
<div>
{
names.map(name => {
return <p>hello {name}</p>
})
}
</div>,
document.getElementById('root')
)

三、组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { Component } = React;
class HelloMessage extends Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
)
}
}
render(
<HelloMessage name='nico' />,
document.getElementById('root')
)

四、this.props.children

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const { Component, Children } = React;
class HelloMessage extends Component {
render() {
return (
<ol>
{ Children.map(this.props.children, child=> <li>{child}</li>)} // Array.prototype.map(this.props.children, fn())
</ol>
)
}
}
render(
<HelloMessage>
<span>hello</span>
<span>world</span>
</HelloMessage>,
document.getElementById('root')
)

五、defaultProps

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class HelloMessage extends Component {
static defaultProps = {
name: 'nico'
};
render = () => (
<h1>Hello {this.props.name}</h1>
);
}
render(
<HelloMessage />,
document.getElementById('root')
)

六、获取真实的节点

1
2
3
4
5
6
7
8
9
10
11
12
13
class HelloMessage extends Component {
handlerClick = ()=> {
console.log(this.input.value)
};
render = ()=>(
<div>
<input ref={node=>this.input=node} />
<button onClick={this.handlerClick}>
Clickme
</button>
</div>
);
}

七、state

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class HelloMessage extends Component {
state = {
liked: false
};
handleClick = ()=> {
this.setState({
liked: !this.state.liked
})
};
render = (text=this.state.liked? 'like' : 'don\'t like')=>(
<p onClick={this.handleClick}>
you {text} this.click to toggle
</p>
);
}

八、表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class HelloMessage extends Component {
state = {
value: 'hello'
};
handleChange = (e)=> {
this.setState({
value: e.target.value
})
};
render = (value=this.state.value)=> (
<div>
<input type='text' onChange = {this.handleChange} />
<p>{value}</p>
</div>
);
}

九、组件生命周期

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
class HelloMessage extends Component {
state = {
opacity: 1.0
};
componentDidMount = ()=> {
this.timer = setInterval(()=>{
let opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}, 100)
};
render=()=> (
<div style={{ opacity: this.state.opacity}} >
Hello {this.props.name}
</div>
);
}
/* 关于componentWillMount */
// The ES5 way
var EmbedModal = React.createClass({
componentWillMount: function() { … },
});
// The ES6+ way
class EmbedModal extends React.Component {
constructor(props) {
super(props);
// Operations usually carried out in componentWillMount go here
}
}

Ajax

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
class UserGist extends Component {
state = {
username: '',
lastGistUrl: ''
};
componentDidMount = () => {
$.get(this.props.source, (result) => {
let lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
})
})
};
/* isMOunt()废弃后的解决方案 当异步加载数据的时候,使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前 */
componentWillUnmount = () => {
this.serverRequest.abort();
};
render = ()=>(
<div>
{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>
</div>
);
}
render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
)
------本文结束感谢阅读------