最外层组件被包装一个redux container会怎样？

情景描述

• 一直对redux很多地方有疑惑，打算今天一并试一试
• 我尝试给最外层组件包装了一个container。
• 我的猜想是：
  • 最外层组件的rerender === 页面刷新
  • 任何一个被container包含的组件都可拿到store中的所有数据。而mapStateToProps的作用只是说，控制哪些变量的变化导致页面的rerender。

困惑点

• 最外层组件到底能不能被包container，把他当做一般组件一样使用redux会不会发生什么异常？

最外层组件的属性值是通过什么方式拿到的？

• 错误假设：最外层组件的父组件就是是不是可以直接传递store中的数据呢？
• 正确解释
  • 任何一个组件（包含最外层组件）只有包装了container才能够拿到store中的数据。
  • 请注意：connect的第一个参数mapStateToProps函数：返回值一定要是一个对象，因为this.props是一个对象，如果想要通过this.props拿到数据，必须给每一个value一个key。
  • 这时候组件内部能够访问的数据就是mapStateToProps函数返回的对象中的属性。

那么为什么项目要求mapStateToProps函数只返回当前组件需要的数据呢？

• 因为mapStateToProps不仅可以将数据传入组件
• 而且监听store中这些数据的变化，一旦数据变化就调用组件的render函数。
• 因此如果我们将store中的所有数据传入组件，就会导致，与组件不相关的属性变化也会导致当前组件的rerender。
  ---> 结论： 被container包裹的组件是否rerender取决于mapStateToProps返回的属性值有没有变化。而不是根据当前组件的render函数是否调用这个变量来决定的

而为了减少不必要的render需要根据以上特性决定mapStateToprops的返回值。

父类进行rerender那么子类的render函数会被调用吗？

• 错误的认为：以前认为只有父类的传给子类的props属性值有变化，才会导致子类重新render。
• 现在发现：
  • 只要父类重新render那么一定导致子类的重新render。
  • 为了提高效率，我们可以通过设置下面函数返回值的true or false确定组件是否需要重新render

  shouldComponentUpdate(nextProps){
        return false;
  }
  

书上说react非常不推崇的反模式在constructor中zuo如下函数，应该将他改写成在render中获取，为什么?

constructor（）{
   this.state={
    name: this.prop.name
    }//父类传入的属性值
} 

render （） {
    const name = this.state.name
   //永远不变
}

----------------改写成
render（）{
    const name = this.props.name;
}
}

• 我想现在可以解释原因：
  • 由于父类的属性name变化父类组件render
  • 父类组件render，导致子类组件render
  • 这时候自然的就传入了最新的name进入子类
• 如果采用反模式
  • 由于父类的属性name变化父类组件render
  • 父类组件render，导致子类组件render
  • 但是不会导致子类的constructor重新执行一遍，因此不论this.props.name如何改变。子类render中获取的name都不会变化。

反思

• 太粗心，验证的时候总是认为是什么样的就认定是这样，只要有某一次的结果偶然出现某个期望的结果就认为结论正确，没有进行单一改变和重新梳理思路的过程。还是做事过于心急。

action

• 每个验证完的结论 必须复盘。从头到尾梳理一遍你的验证过程，检查有没有错误。或者使用不当的地方。

-------> 研究有些跑题但也算是验证了使用react-redux很多的疑惑有机会继续验证