我们的react网页写作流程

1. 首先判断一个组件是否是多个页面使用的
  是:写在base.js里面
  否:写在页面里面

2. 分析并,画出组件树状图

3. 写出完整组件,数据部分全部写死

4. 判断数据流来源
  1) 外部渲染该组件的时候生成数据,则 外部使用 <Tag attr={data} /> 传数据,内部使用this.props获取数据
  2) 外部使用setState修改该数据,则 外部使用 var X = ReactDOM.render(....); X.setState 传数据,内部使用this.state获取数据
  3) 当前组件改变自己state,则 绑定事件的地方使用 this.setState 来改数据,渲染地方使用this.state获取数据
  4) 父组件改子组件state时候,则 父给子绑上 ref={function(ref){self.XXX = ref} 父使用 this.XXX.setState 来传数据
  5) 当任意子组件A 改变 任意子组件B 的state时,则
    给B绑上 ref={function(ref){App.Helper.CompConnect("XXX", ref)}
    给A绑定事件中使用 App.Helper.CompConnect("XXX").setState(...)

5. 分析数据来源,编写事件绑定和数据渲染流程,和简单注释(包含每个数据源的由来),同时切分state子元素
  e.g. "{"A":[],"B":[]}" // A -> 平仓单数据, B -> 订货单数据

6. 根据后端传来数据,修正绑定props或state字段

时间: 2024-12-17 00:53:45

我们的react网页写作流程的相关文章

基于jQuery网页步骤流程进度条代码

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="step_context test"></div> 当前步骤:第<input type="text" value="5" id="currentStepVal" />步 <button onclick=&qu

基于SPA的网页授权流程(微信OAuth2)

先说传统MVC网站的网页授权流程. 1.用户发起了某个需要登录执行的操作 2.收集AppId等信息重定向到微信服务器 3.微信服务器回调到网站某个Controller的Action 4.在此Action下通过得到的code请求得到access_token,并用a_t进一步获取用户信息,至此授权流程完成,可以保存用户信息到数据库和cookie,重定向回原页面 SPA架构下的问题 1.服务端与前端之间不保证可信,需要认证交互 2.使用WebApi交互,无法在服务端控制前端的页面跳转 3.认证过程中有

用户访问网页的流程原理

用户访问网页的流程原理图 原文地址:https://blog.51cto.com/14334040/2396873

ios 企业级开发者账号app网页分发流程

准备: *一台运行着OSX的苹果电脑,最新版的XCODE,用于导出ipa和plist 一个HTML网页文件(告知iphone如何找到itms-services,已附上) 一个HTTP服务器(存放APP的服务器,就是提供ipa流量的服务器) 一款云存储(以七牛云存储为例,用于推送plist),建议升级到标准版用户,操作非常简单 备选: 一张二维码,一份自动分辨IOS设备的JS脚本 PS: 从2014年6月开始,网上的教程都变得不太好用了,原因有两个: 从IOS7.1开始,http推送plist已经

web学习---html,js,php,mysql一个动态网页获取流程

使用bootstrap的cms模版系统搭建了一个信息管理系统.通过这个系统学习动态网页获取的工作流程. 抓包分析一个页面的数据请求流程如下图所示: 同样,对于需要向数据库插入数据,可以使用ajax接口向php后台发送参数,php脚本解析后通过与mysql的接口写入数据库. 需要注意的是php5.5的版本的mysql接口与php4.*的接口不同,不能向下兼容.php 5.* 对应的是mysqli_connect,php 4.*对应的是mysql_connect

微信网页授权流程(前端篇)

功能描述 公司最近有个项目要做基于微信的H5校服定制wepApp的开发,之前完全没有接触过微信开发,很是兴奋,有种磨刀霍霍向猪羊的感觉.由于本人经验有项,描述不准确的地方请大家及时指出. 功能描述:当用户点击如下所示的图片获取用户的信息,包括openid,头像等. 准备工作 (1)在公众号后台"设置-公众号设置-功能设置-网页授权域名"设置回调的域名. (2)在对应位置按照公众号开发文档给出的规则设置回调地址. 如果是通过子菜单触发跳转,记得在"功能-自定义菜单-子菜单内容&

react项目创建流程

react 项目搭建 系统: windows 1.安装 node node 下载地址.一路 next 如果遇到 windows 没有权限安装 msi 文件.打开 cmd,运行msiexec /package 文件路径. 查看是否安装成功,打开终端 node -v npm -v 2.安装 vscode 编辑器 vscode 下载地址.一路 next 3.安装 react 项目脚手架 打开终端 npm install -g create-react-app 4.创建 react 项目 create-

react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目,实现了聊天记录右键菜单.发送消息.表情(动图),图片.视频预览,浏览器截图粘贴发送等功能. 二.技术选型 MVVM框架:react / react-dom 状态管理:redux / react-redux 页面路由:react-router-dom 弹窗插件:wcPop 打包工具

Asp.net 微信企业号网页开发流程

一.在pageload方法中获取code var code = GetCode(); private string GetCode() { return HttpContext.Current.Request["code"]; } 二.如果code为空,需要重定向到微信获取code //当前页面对应的外网地址 string redirect_url = "http://6018.ynedut.cn/PpWordOrder/default.aspx"; redirec