react学习札记(一)
来源:互联网 发布:乐1pro刷机包优化内核 编辑:程序博客网 时间:2024/06/05 10:23
最近学习了一点react的知识,在此稍作小结记录。
首先,需要写一个react的class,写法为var Picture = React.createClass({});它的里边必须有render函数返回渲染的dom,但这时dom是虚拟的。
调用的方法有两种:
第一种ReactDOM.render(<Picture />,document.getElementById("content"));
第二种React.render(
React.createElement(Picture , null),
document.getElementById('content')
);
第一种方法需要在head里面加入<script src="../../build/react-dom.js"></script>,而第二种方法不用。
react里面有非常重要一个点:组件的生命周期,在另一个人写的博客里有比较详细的介绍:http://blog.csdn.net/lihongxun945/article/details/46334379,在官方的api中也有很多介绍:http://reactjs.cn/react/docs/component-specs.html。
组件不允许修改自己的 props,只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值,应该存在 this.state 中!!!!
componentDidMount是在render之后才执行的函数,componentWillMount是在render之前执行的,若需要开始从其他地方用ajax获取数据的这两个都可以使用,componentDidMount在执行之后还会执行一次render函数。若想要再要不断从远程接收数据,则可以在componentDidMount中加入这一句setInterval(this.loadCommentsFromServer, this.props.pollInterval),就可以不断接收数据。
貌似每执行一次class里面的内置的组件就会调用一次render。。。
另外,在用ajax传输数据的时候,需要用this.setstate({}),来改变state的值。但这个时候的this貌似并不是整个class的this,这时候就需要用bind(this),才可以正常的赋值。
如类似下面的代码
$.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) });
手机访问入口:www.duckr.cn/web/banner/annualuserinfo/id?Telephone=xxxxxxxxx
- react学习札记(一)
- React学习札记
- react学习札记(二)
- 学习札记一(杂)
- C++学习札记一
- JAVA学习札记(一)
- c++学习札记(一)
- 2007excel学习札记一
- CLR 学习札记(一)
- 树莓派学习札记(一)
- Python3 学习札记(一)
- React学习(一):React入门
- react学习札记(三)--自己的日历控件
- 学习React Router (一)
- React学习笔记一
- React-Native 学习(一)
- react-native 学习《一》
- React Native学习一
- 最佳浏览路线问题 算法设计
- spring ioc和DI理解
- 通过userAgent判断手机浏览器类型
- HDOJ 2040 亲和数
- 51nod 1086
- react学习札记(一)
- hdu5612
- meanshift跟踪算法总结
- python之10分钟pandas
- 最小公倍数问题 算法设计
- Codevs 1069关押罪犯[Noip2010]
- 点击返回键,直接回退到桌面
- 关于内存越界
- LeetCode 9:Palindrome Number