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的答案