一、项目结构
![](https://img.haomeiwen.com/i6767064/e5fe0bc19c748520.png)
![](https://img.haomeiwen.com/i6767064/3ceaeddec438fb63.png)
简单做下说明:
1、ModuleName是定义组件的名称,首字母一点要大写
2、this.state里边存放我们的需要的字段,比如下面绑定的数据是一个数组,那么需要建一个datalist:[],然后把Ajax获取回来的数据赋给这个空数组
3、生命周期,在实际开发中用的最多的是componentDidMount,也就是页面加载完成后执行的函数,其他生命周期几乎不用,不要问为什么,就是不用
4、es6中函数方法的写法,比如点击事件
![](https://img.haomeiwen.com/i6767064/dbd5c9d700eb22b4.png)
![](https://img.haomeiwen.com/i6767064/f66cbce66f5f725a.png)
![](https://img.haomeiwen.com/i6767064/b9d6a89d4a1599cd.png)
5、带有参数的函数写法:
![](https://img.haomeiwen.com/i6767064/b38e1389bb0d6474.png)
其他写法和上面一样
二、如何初始化渲染页面数据
比如页面初始化进来的时候需要展示一个列表数据,展示的内容有图片,文字等,这些数据需要通过Ajax获取。下面简单介绍下怎么渲染
1.在state里定义一个空数组来保存Ajax获取回来的数据
![](https://img.haomeiwen.com/i6767064/763006db9d6e8149.png)
2.定义一个初始化函数,比如名字为loadActivityList
![](https://img.haomeiwen.com/i6767064/b3bea559e5424133.png)
3.这个方法什么时候执行呢?肯定也页面加载出来后,也就是把这个方法放在生命周期componentDidMount中,dom加载出来开始渲染数据
![](https://img.haomeiwen.com/i6767064/373c87a47cc0093b.png)
三、this.state与this.setState
this.state是赋值,this.setState是刷新页面
网友评论