Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

redux中的值发生变化以后,关联的组件会被强制渲染 #2595

Closed
kricsleo opened this issue Mar 26, 2019 · 1 comment
Closed

Comments

@kricsleo
Copy link

问题描述
一个属性值是从父组件传递到子组件时,如果这个值发生了变化,那么子组件shouldComponentUpdate()返回false时是不会执行componentWillUpdate()componentDidUpdate(),这是正常的, 但是如果子组件是从redux中直接取出的这个值,那么即使子组件shouldComponentUpdate()返回false, 子组件也还是会执行componentWillUpdate()componentDidUpdate(),上面说的是其实是同一个值,只不过子组件获取值的方式不同,一种是父组件从redux拿到那个值传递给子组件,另一个是子组件直接从redux中拿到这个值。

复现步骤

  shouldComponentUpdate(nextProps) {
    if (!this.props.active && !nextProps.active) {
      console.log('basic not update');
      return false
    }
    console.log('basic to update');
    return true;
  }

  componentWillUpdate() {
    console.time('basic');
  }

  componentDidUpdate() {
    console.timeEnd('basic');
  }

image
Basic是一个PureComponent 组件,它有一个order属性,order是一个对象,当Basic 直接从redux中取出该值时,当发起一个dispatch导致redux数据变更时,发现即使Basic组件的shouldComponentUpdate()返回falseBasic组件也会被更新
image
但是如果这个order属性值是父组件从redux中获取了之后再传递给Basic组件,那么就算数据变化了,此时shouldComponentUpdate()可以正常阻止Basic组件渲染
image

期望行为
期望不论组件的属性值是依赖于父组件传递还是自己去redux中获取,shouldComponentUpdate()都应该可以控制属性值变化时组件是否渲染

报错信息
见上图

系统信息

taro info
👽 Taro v1.2.21

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-jj

@taro-bot
Copy link

taro-bot bot commented Mar 26, 2019

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant