美文网首页
React+ES6开发项目

React+ES6开发项目

作者: 勇敢的心1025 | 来源:发表于2017-07-06 09:54 被阅读0次

一、项目结构

简单做下说明:

1、ModuleName是定义组件的名称,首字母一点要大写

2、this.state里边存放我们的需要的字段,比如下面绑定的数据是一个数组,那么需要建一个datalist:[],然后把Ajax获取回来的数据赋给这个空数组

3、生命周期,在实际开发中用的最多的是componentDidMount,也就是页面加载完成后执行的函数,其他生命周期几乎不用,不要问为什么,就是不用

4、es6中函数方法的写法,比如点击事件

5、带有参数的函数写法:

其他写法和上面一样

二、如何初始化渲染页面数据

比如页面初始化进来的时候需要展示一个列表数据,展示的内容有图片,文字等,这些数据需要通过Ajax获取。下面简单介绍下怎么渲染

1.在state里定义一个空数组来保存Ajax获取回来的数据

2.定义一个初始化函数,比如名字为loadActivityList

3.这个方法什么时候执行呢?肯定也页面加载出来后,也就是把这个方法放在生命周期componentDidMount中,dom加载出来开始渲染数据

三、this.state与this.setState

this.state是赋值,this.setState是刷新页面


相关文章

  • React+ES6开发项目

    一、项目结构 简单做下说明: 1、ModuleName是定义组件的名称,首字母一点要大写2、this.state里...

  • 项目管理总结

    [TOC] 管理流程 快速迭代项目开发计划项目时间表待开发项目池开发中项目列表 每个迭代开发过程跟踪测试准备开发提...

  • React+ES6+Webpack项目实战

    前文有对React+ES6知识进行了总结,下面正式进入实战。 温馨提示:为了能支持es6,请下载4.0以上版本的n...

  • 项目开发之经验分享

    项目开发之经验分享 项目开发之经验分享

  • Android交接文档

    项目简介: 项目实现的功能,目标 开发模式: MVP,MVC,MVVM等。 项目类型: 是否是混合开发等 开发环境...

  • Loveward官网

    项目介绍 项目名称:Loveward官网开发项目类型:Web开发开发周期:6个月项目简介:爱情守护所(www.lo...

  • 找开发|快速开发项目,就上找开发|程序员找项目,就上找开发|IT

    找开发|快速开发项目,就上找开发|程序员找项目,就上找开发|IT培训,技术交流,就上找开发 找开发

  • FDL官网

    项目介绍 项目名称:FDL官网开发项目类型:Web开发开发周期:1个月项目简介:Fintech深度研究室(www....

  • 项目开发

    基于 Vue 的 WebSocket 实时聊天实战项目 一个基于vue的,从前端到后端构建的项目。能让学到如何用,...

  • 项目开发

    Retrofit封装 RxJava 与 Retrofit 结合的最佳实践 flatmap统一处理异常 Rx处理服务...

网友评论

      本文标题:React+ES6开发项目

      本文链接:https://www.haomeiwen.com/subject/usnchxtx.html