情景描述
- 一直对redux很多地方有疑惑,打算今天一并试一试
- 我尝试给最外层组件包装了一个container。
- 我的猜想是:
- 最外层组件的rerender === 页面刷新
- 任何一个被container包含的组件都可拿到store中的所有数据。而mapStateToProps的作用只是说,控制哪些变量的变化导致页面的rerender。
困惑点
- 最外层组件到底能不能被包container,把他当做一般组件一样使用redux会不会发生什么异常?
最外层组件的属性值是通过什么方式拿到的?
- 错误假设:最外层组件的父组件就是<Provider>是不是可以直接传递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很多的疑惑有机会继续验证