为什么ListView在我将setState改为其他内容时更新了?

时间:2016-12-23 02:45:17

标签: reactjs react-native

我的页面中有一个ListView,其dataSouce是this.state.ds
而且我在this.state中还有其他与此ListView无关的内容 但是每次当我设置State({somethingelse:xx})时,ListView总是被重新呈现并且ListView项目中的textInput是清晰的。

我对此非常困惑,并且是关于RN原理的事情我理解错了?

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

您是否定义了rowHasChanged功能?

来自ListView docs

  

仅重新渲染已更改的行 - 提供的rowHasChanged函数   数据源告诉ListView是否需要重新呈现一行   因为源数据已更改 - 请参阅ListViewDataSource了解更多信息   的信息。

可以这么简单:

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
  dataSource: ds.cloneWithRows([...]),
};

答案 1 :(得分:0)

setState总是再次触发render()函数,这会导致ListView基本刷新。

如果您不希望这种情况发生,您可以声明shouldComponentUpdate()

根据您希望setState导致重新呈现的时间,shouldComponentUpdate()函数应返回true或false。

如何执行此操作的示例:

var shouldRender = true;

shouldComponentUpdate(){

return this.shouldRender;
} 

   myFunction(){
   ....
   this.shouldRender=false;
   ...
   this.setState({key:value});
   ...
   this.shouldRender=true;
}

你还应该注意到setState不是同步的,因此使用上面的函数设置状态可能仍然会导致重新渲染一个更好的版本就是这样做:

var shouldRender = true;

shouldComponentUpdate(){

   return this.shouldRender;
} 

myFunction(){
   ....
   this.shouldRender=false;
   ...
   that=this;
   this.setState({key:value},function(){
       that.shouldRender=true;
   });
   ...
}

结帐更多关于setState的信息: https://facebook.github.io/react/docs/react-component.html#setstate