reactjs入门到实战(九)----ajax的应用

利用外部的jquery:

<script type="text/babel">
    var Count = React.createClass({ getInitialState:function(){ return{ count:0 } }, componentDidMount:function(){ this.timer =setInterval(function(){ $.get(‘http://ip/apishow/pv.php‘,function(data){ var obj = eval(‘(‘ + data + ‘)‘); this.setState({count:obj[0][‘value‘]});
    }.bind(this)) }.bind(this),1000) }, render:function(){ return (
    <div>
        <a>PV: {this.state.count} </a>
    </div>
    ); } }); ReactDOM.render(
    <Count />, document.getElementById(‘example‘) )
</script>
时间: 2024-08-24 07:11:00

reactjs入门到实战(九)----ajax的应用的相关文章

reactjs入门到实战(一)---- hello world例子

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 官网:http://facebook.github.io/react/ 1.环境搭建 >>>普通

reactjs入门到实战(四)---- state详解

this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 组件其实是状态机(State Machines) React 把用户界面当作简单状态机.把用户界面想像成拥有不同状态然后渲染这些状态,可以轻松让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 s

reactjs入门到实战(三)---- 组件详解

owner  >>> 传递 props this >>>是默认指向组件本身 key>>>不能没有,在复用的情况下 组件:例子 <!-- 输入:props & state 输出:html --> var LikeButton = React.createClass({ getInitialState:function(){ return {liked: false}; }, handleClick:function(event){ t

reactjs入门到实战(四)---- props详解

1>>>基础的props使用     不可修改父属性    getDefaultProps   对于外界/父组件的属性值,无法直接修改,它是只读的. <script type="text/babel"> var Hello = React.createClass({ getDefaultProps:function(){ return{ name:'Default' } }, render:function(){ return ( <span>

reactjs入门到实战(六)---- ReactJS组件API详解

全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于,你不需要使用 new 来实例化. 组件是一种很方便的封装,可以(通过 new )为你创建后台实例. 2.React.createElement ReactElement createElement( string/ReactClass type, [object props], [children

reactjs入门到实战(十)----one-first_app

index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- Disable browser cache --> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control&quo

reactjs入门到实战(一)---- jxs详解

>>>如何转换    JSX transformer   Babel    官网:http://babeljs.io/   里面有一个可以看转换的测试器,es6什么的也可以应用: 注意:jsx要用大写   class .for .style .onChange 是不能用的关键词.style使用颜色的时候用 style = {{color:'red',fontSize:20}}   >>>例子二: var Hello = React.createClass({ rende

ReactJS入门

ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么? React仅仅是VIEW层,而我们经常看到Angular是一个完整的框架,而React不是,因此我们看到他们两个的侧重点不一样,所以也不能比较的,React提供了模板语法及一些函数钩子用于HTML的渲染,只用于View层. React的优点?       1. 虚拟DOM 在DOM树的状态发生改

Extjs视频教程_Extjs5.0从入门到实战开发信息管理系统

Extjs5.0从入门到实战开发信息管理系统(Extjs基础.Extjs5新特性.Spring.Spring mvc.Mybatis)适合人群:初级课时数量:40课时用到技术:Extjs基础,Extjs5新特性,sencha cmd,spring,spring mvc, mybatis涉及项目:信息管理系统核心框架(mvvm+mvc架构)咨询qq:1840215592课程内容简介:1.课程研发环境开发工具:eclipse,sencha cmd:数据库工具:mysql5,mysql workben