You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
shouldComponentUpdate(nextProps){if(!this.props.active&&!nextProps.active){console.log('basic not update');returnfalse}console.log('basic to update');returntrue;}componentWillUpdate(){console.time('basic');}componentDidUpdate(){console.timeEnd('basic');}
问题描述
一个属性值是从父组件传递到子组件时,如果这个值发生了变化,那么子组件
shouldComponentUpdate()
返回false时是不会执行componentWillUpdate()
和componentDidUpdate()
,这是正常的, 但是如果子组件是从redux中直接取出的这个值,那么即使子组件shouldComponentUpdate()
返回false, 子组件也还是会执行componentWillUpdate()
和componentDidUpdate()
,上面说的是其实是同一个值,只不过子组件获取值的方式不同,一种是父组件从redux拿到那个值传递给子组件,另一个是子组件直接从redux中拿到这个值。复现步骤
Basic
是一个PureComponent
组件,它有一个order
属性,order
是一个对象,当Basic
直接从redux中取出该值时,当发起一个dispatch
导致redux数据变更时,发现即使Basic
组件的shouldComponentUpdate()
返回false
,Basic
组件也会被更新但是如果这个
order
属性值是父组件从redux中获取了之后再传递给Basic
组件,那么就算数据变化了,此时shouldComponentUpdate()
可以正常阻止Basic
组件渲染期望行为
期望不论组件的属性值是依赖于父组件传递还是自己去redux中获取,
shouldComponentUpdate()
都应该可以控制属性值变化时组件是否渲染报错信息
见上图
系统信息
Taro CLI 1.2.21 environment info:
System:
OS: macOS High Sierra 10.13.6
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
Yarn: 1.13.0 - ~/.nvm/versions/node/v8.12.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v8.12.0/bin/npm
npmPackages:
@tarojs/async-await: 1.2.21 => 1.2.21
@tarojs/components: 1.2.21 => 1.2.21
@tarojs/plugin-babel: 1.2.21 => 1.2.21
@tarojs/plugin-csso: 1.2.21 => 1.2.21
@tarojs/plugin-sass: 1.2.21 => 1.2.21
@tarojs/plugin-uglifyjs: 1.2.21 => 1.2.21
@tarojs/redux: 1.2.21 => 1.2.21
@tarojs/redux-h5: 1.2.21 => 1.2.21
@tarojs/router: 1.2.21 => 1.2.21
@tarojs/taro: 1.2.21 => 1.2.21
@tarojs/taro-alipay: 1.2.21 => 1.2.21
@tarojs/taro-h5: 1.2.21 => 1.2.21
@tarojs/taro-swan: 1.2.21 => 1.2.21
@tarojs/taro-tt: 1.2.21 => 1.2.21
@tarojs/taro-weapp: 1.2.21 => 1.2.21
@tarojs/webpack-runner: 1.2.21 => 1.2.21
eslint-config-taro: 1.2.21 => 1.2.21
eslint-plugin-taro: 1.2.21 => 1.2.21
nervjs: ^1.3.13 => 1.3.13
补充信息
怀疑是redux数据变化时关联组件被执行了
forceUpdate()
,相关提交: fix(taro-redux): store 变化后被影响的 Component 立即做 setData 更新。防止子组件在 observe 更新的情况下重新计算 props ,从而覆盖掉 redux 修改的 props。fix #1125 by Chen-jjThe text was updated successfully, but these errors were encountered: