接上篇 ： 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的答案

webpack学习（六）—webpack+react+es6（第3篇）的更多相关文章

  1. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  2. webpack 学习资料

    webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/

  3. webpack学习（六）—webpack+react+es6（第2篇）

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  4. reactjs学习一（环境搭配react+es6+webpack热部署）

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  5. webpack学习（五）—webpack+react+es6（第1篇）

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  6. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  7. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  8. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  9. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

随机推荐

  1. noip模拟赛 财富

    题目描述LYK有n个小伙伴.每个小伙伴有一个身高hi.这个游戏是这样的,LYK生活的环境是以身高为美的环境,因此在这里的每个人都羡慕比自己身高高的人,而每个人都有一个属性ai表示它对身高的羡慕值.这n ...

  2. ArcGIS Engine 创建索引（属性索引）——提高查询效率

    转自原文 ArcGIS Engine 创建索引(属性索引)——提高查询效率 众所周知,建立索引可以提高查询的效率,当对FeatureClass中的某一列频繁的查找,且数据量比较大时,建立索引是非常有必 ...

  3. linux环境下安装varnish

    Varnish是一款高性能的开源HTTP加速器,挪威最大的在线报纸 Verdens Gang 使用3台Varnish代替了原来的12台Squid,性能比以前更好. sudo apt-get insta ...

  4. 查看Linux的CPU信息，核数等

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  5. Java修改文件夹名称

    Java修改文件夹名称 学习了:http://blog.csdn.net/yongh701/article/details/45063833 进行文件夹名字批量修改,注意,要写全路径: package ...

  6. Oracle数据库导出导入

    需求为将数据库A中的数据导出为*.dmp文件.然后将*.dmp文件导入到数据库B. 1.导出数据库A     在cmd窗体输入下面命令: 导出所有数据库 exp username/password@数 ...

  7. Qt graphic item日记

    今天在用用graphic view 加入graphic item的时候要引入一个context menu,自然就要对context menu上的action进行slot处理.可是graphic ite ...

  8. springboot + rabbitmq 整合示例

    几个概念说明:Broker:简单来说就是消息队列服务器实体.Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列.Queue:消息队列载体,每个消息都会被投入到一个或多个队列.Bindi ...

  9. 【HNOI 2004】 L语言

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1212 [算法] 字典树 + dp [代码] #include<bits/std ...

  10. stack 栈

    其实今天我们主要讲的是搜索,但是留作业不知道怎么就突然全变成栈了. 其实栈和队列没什么区别,只是一个先进先出,一个先进后出.基本操作也是一样的. 栈(stack)又名堆栈,它是一种运算受限的线性表.其 ...