首页组件home.js
/*
react获取服务器APi接口的数据：
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
1、axios https://github.com/axios/axios axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域）
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from 'axios'
3、看文档使用
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(api)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2、fetch-jsonp https://github.com/camsong/fetch-jsonp
1、安装 npm install fetch-jsonp --save
2、import fetchJsonp from 'fetch-jsonp'
3、看文档使用
fetchJsonp('/users.jsonp')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
3、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以...
远程测试API接口：
get请求：
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20
jsonp请求地址:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
*/
import React, { Component } from 'react';
import '../assets/css/index.css';
import Axios from './Axios';
class Home extends Component {
constructor(props){
super(props);
this.state={
title:'首页组件'
}
}
render() {
return (
<div>
<Axios />
</div>
);
}
}
export default Home;
请求数据组件axios.js
import React, { Component } from 'react';
import axios from 'axios';
class Axios extends Component {
constructor(props) {
super(props);
this.state = {
list:[]
};
}
getData=()=>{
//通过axios获取服务器数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20'; //接口后台允许了跨域
axios.get(api)
.then((response)=> {
console.log(response.data.result);
//用到this要注意this指向
this.setState({
list:response.data.result
})
})
.catch(function (error) {
console.log(error);
});
}
//组件的生命周期函数
componentDidMount(){
this.getData();
}
render() {
return (
<div>
<h2>axios获取服务器数据</h2>
<button onClick={this.getData}>获取服务器api接口数据</button>
<hr />
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
}
export default Axios;声明周期组件Lifecycle.js
/*
https://reactjs.org/docs/react-component.html
React生命周期函数：
组件加载之前，组件加载完成，以及组件更新数据，组件销毁。
触发的一系列的方法 ，这就是组件的生命周期函数
组件加载的时候触发的函数：
constructor 、componentWillMount、 render 、componentDidMount
组件数据更新的时候触发的生命周期函数：
shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
你在父组件里面改变props传值的时候触发的：
componentWillReceiveProps
组件销毁的时候触发的：
componentWillUnmount
必须记住的生命周期函数：
*加载的时候：componentWillMount、 render 、componentDidMount（dom操作）
更新的时候：componentWillUpdate、render、componentDidUpdate
*销毁的时候： componentWillUnmount
*/
import React, { Component } from 'react';
class Lifecycle extends Component {
constructor(props) {
console.log('01构造函数');
super(props);
this.state = {
msg:'我是一个msg'
};
}
//组件将要挂载的时候触发的生命周期函数
componentWillMount(){
console.log('02组件将要挂载');
}
//组件挂载完成的时候触发的生命周期函数
componentDidMount(){
//dom操作放在这个里面 请求数据也放在这个里面
console.log('04组件将要挂载');
}
//是否要更新数据 如果返回true才会执行更新数据的操作
shouldComponentUpdate(nextProps, nextState){
console.log('01是否要更新数据');
console.log(nextProps);
console.log(nextState);
return true;
}
//将要更新数据的时候触发
componentWillUpdate(){
console.log('02组件将要更新');
}
//组件更新完成
componentDidUpdate(){
console.log('04组件数据更新完成');
}
// 你在父组件里面改变props传值的时候触发的
componentWillReceiveProps(){
console.log('父子组件传值，父组件里面改变了props的值触发的方法')
}
setMsg=()=>{
this.setState({
msg:'我是改变后的msg的数据'
})
}
//组件销毁的时候触发的生命周期函数 用在组件销毁的时候执行操作
componentWillUnmount(){
console.log('组件销毁了');
}
render() {
console.log('03数据渲染render');
return (
<div>
生命周期函数演示--- {this.state.msg}-----{this.props.title}
<br />
<br />
<button onClick={this.setMsg}>更新msg的数据</button>
</div>
);
}
}
export default Lifecycle;
