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-10-10 02:14:26