工作内外大大小小的项目写了很多个,
到了项目的后期、2期、3期,
代码果然不负众望的全部粘在一起,
然后再开始伟大的重构之路,
多次循环这个过程之后,决心找到代码corruption的原因,
重新认识 依赖倒置
这个知道又好像不知道的概念。
reducer(model)和组件放在一起
参考dva框架的思路,组件主动引入reducer,
而不是全部写在一起,统一被动引入
平级组件一定不能互相调用
只能改变自己的model,
对于其他组件的model的结构和数据, 是不可知的,
也不能让其他组件直接修改自己model中的数据,
把dispatch action的操作封装成函数api,
给外部组件调用
两个平级组件如何交互?上层组件负责协调
上层组件调用各个下层组件的api,
来实现下层组件之间的交互
把组件内部的方法传递出来
react组件只能传递props进去,不能传东西出来,
为了能够顺利的交互,又能“把依赖倒置”,
我们需要一个辅助机制,
把内部的方法传递出来,变成外部api
如何实现
1.在低层组件constructor的阶段,用回调函数的方式,
把内部方法当作参数,传给外部函数
constructor(props) {
super(props)
this.props.myHandler(this.innerFunction)
}
2.从上层组件的myHandler中拿到这个innerFunction
然后把它的引用存在一个变量或对象中,
// 在上层组件的constructor中:
const bridge = { placeholder:function(){} } // 暂时为空
const myHandler = (innerFunction) => {
bridge.placeholder = innerFunction
}
// <MyComponent myHandler={myHandler}/>
这样,MyComponent中的innerFunction
就保存在了bridge.placeholder
中
副作用
这里打了一个时间差,
最开始bridge.placeholder
其实是空函数,
直到MyComponent的constructor
执行myHandler
函数,才改变bridge.placeholder
的引用,
如果想要立即使用, 将不能如愿,
至少要在componentDidMount里,或者后续事件中使用bridge.placeholder