我们的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字段

我们的react网页写作流程

标签：

原文地址：http://www.cnblogs.com/JohannaFeng/p/4996851.html