对react“组件化”和“依赖倒置”的思考和实践

工作内外大大小小的项目写了很多个，
到了项目的后期、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