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的答案
webpack学习(六)—webpack+react+es6(第3篇)的更多相关文章
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack 学习资料
webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/
- webpack学习(六)—webpack+react+es6(第2篇)
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- webpack学习(五)—webpack+react+es6(第1篇)
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
随机推荐
- [转] C# 隐藏方法和重写方法
1:方法重写:就是在基类中的方法用virtual关键字来标识,然后在继承类中对该类进行重写 (override),这样基类中的方法在子类中已经被重写了,基类中的方法在子类中已经失去了功能 了.当让基类 ...
- 洛谷 P1972 BZOJ 1878 [SDOI2009]HH的项链
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...
- [cogs396] [网络流24题#4] 魔术球 [网络流,最大流,最小路径覆盖]
本题枚举每多一个球需要多少个柱子,可以边加边边计算,每次只需要判断$i-Dinic()$即可:特别注意边界. #include <iostream> #include <algori ...
- nyoj_33_蛇形填数_201308221636
蛇形填数时间限制:3000 ms | 内存限制:65535 KB 难度:3描述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.例如n=4时方陈为:10 11 12 19 16 13 28 ...
- 动态配置 JBOSS ( eap 6.2 ) 数据源
操作环境 windows + jboss eap 6.2 + MyEclipse 10.0 项目用的是jboss eap 6.2,作为Red公司升级后的eap稳定版. 相比之前的 AS 系列,不管是安 ...
- 菜鸟学Java(二十二)——又一次认识泛型
泛型是Java SE 1.5的新特性,泛型的本质是參数化类型,也就是说所操作的数据类型被指定为一个參数.这样的參数类型能够用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法. Java语言 ...
- 尝试create tech team
自从上一家公司之后,我很少有机会去带一些新人(公司一般都招一些技术独立性的工程师),特别是经验不是特别多的新小伙伴.在如今管理扁平化的公司,我正逐渐搭建自己的小team,并试图让团队成员快速融入并成长 ...
- 【Android】开发优化之——调优工具:TrackView,Method Profiling
Android SDK自带的tool TrackView 位于 sdk的tools文件夹下.使用方法为:进入到tools下,执行 traceview e:\loginActivityTracing.t ...
- luogu1417 烹调方案
题目大意 一共有$n$件食材,每件食材有三个属性,$a_i$,$b_i$和$c_i$,如果在$t$时刻完成第$i$样食材则得到$a_i-t*b_i$的美味指数,用第$i$件食材做饭要花去$c_i$的时 ...
- 阿里云 Docker-registry 搭建
阿里云 仓库地址: https://cr.console.aliyun.com/cn-hangzhou/instances/images