webpack学习（六）—webpack+react+es6（第3篇）
接上篇 ： webpack学习（六）—webpack+react+es6（第2篇）
上篇其实是有问题的，问题在取服务器数据这块。this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性【1】。服务器数据是变化的，应该作为state而不是props。
参考了其他的博客后，改写一遍。例子：
src/js/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import ImgDemo from './imgDemo';
ReactDOM.render(
<ImgDemo/>,
document.getElementById('imgDemo')
)
src/js/imgDemo.js【2】
import React from 'react';
import OneImg from './oneImg'
class ImgDemo extends React.Component{
constructor(props) {
super(props);
//我们使用state里面的datalist，来保存所有服务端传来的数据
//刚开始的时候，内容为空
this.state = {
datalist:[]
}
}
render() {
//当react库运行到render方法的时候,就会遍历所有state中datalist的项目,第一遍为空
return <div>
{
this.state.datalist.map((arr,index)=>
<OneImg oneData={arr} key={index}/>
)
}
</div>;
}
//可以看到，我们的类被构造的时候本身自带的state中services是个空数组，我们需要用内容填充他
//查看react的文档的《组件生命周期》这一页（这一页很重要，一定要明白各个函数在什么情况下会被触发），发现它建议我们在每个组件显示完毕,之后使用componentDidMount函数来获取需要的数据，那就照做
componentDidMount() {
let xhr = new XMLHttpRequest()
//写了个data.json文件模拟服务器，请求这个文件
xhr.open("GET", "http://localhost:8080/src/js/data.json", true)
xhr.send()
xhr.onreadystatechange = () =>{
if(xhr.readyState === 4 && xhr.status === 200){
let data = JSON.parse(xhr.responseText)
//获得服务器的数据并转换为json，使用setState方法覆盖当前元素的datalist数据
this.setState({
datalist : data
})
}
}
}
}
module.exports = ImgDemo
src/js/oneImg.js
import React from 'react';
class OneImg extends React.Component{
render(){
var oneData = this.props.oneData;
return <div>
<img className='img' src={oneData.img}/>
<p>{oneData.word}</p>
</div>
}
}
module.exports = OneImg
src/js/data.json(模拟服务器数据用的)
[
{
"img":"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png",
"word":"百度的图标"
},
{
"img":"https://www.sogou.com/web/img/logo128_50x2.png",
"word":"搜狗的图标"
}
]
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img{width:300px;height:100px;}
</style>
</head>
<body>
<div id="imgDemo"></div>
<script src="build/bundle.js"></script>
</body>
</html>
其中，package.json、webpack.config.js跟上篇一致。这里不再列出。
安装: npm init
启动：npm run dev
项目地址：http://localhost:8080/index.html
---------------------------
至此，OK
注意：
1）网上的例子很多ajax请求用了jquery。其实，react是不依赖任何其他库的。
2）网上的戏子大多将ajax的url作为prop传给组件，ajax请求时通过this.props对象获取。本例是直接写在请求里面。这个稍作修改就一致了。
参考：
【1】http://www.ruanyifeng.com/blog/2015/03/react.html
【2】React如何从后端获取数据并渲染到前端？中的cheoyx的答案
