zoukankan      html  css  js  c++  java
  • 我们的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(...)
      6) 当父组件改变子组件props,子组件也有需求改变自己state,由此产生冲突时,在子组件中使用componentWillReceiveProps函数来使得改变的props自动改变
          子组件的state,componentWillReceiveProps的参数是nextProps


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

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

  • 相关阅读:
    MJRefreshFooterView
    UIActionSheet
    UIAlertView带textField
    SIAlertView
    旋转 锚点
    centos7.2 Apache+PHP7.2+Mysql5.6环境搭建
    ubuntu16.04 mysql 开启远程连接
    Ubuntu16.04重新安装MySQL数据库
    Ubuntu16.04彻底卸载MySQL
    laravel框架基础(2)---laravel项目加载机制
  • 原文地址:https://www.cnblogs.com/JohannaFeng/p/4996851.html
Copyright © 2011-2022 走看看