FlatList data 这个 props传值的问题



  • 先来看下面两张图,是data赋值不同时造成的。
    alt text alt text

    0_1504001763164_image.png
    从代码中来看,如果使用 fetchData(),这个返回JSON数组的函数,传值给FlatList,结果是没有问题的。
    但是如果用一个变量去存储data就会出现右边那张图显示的样子。
    我尝试过把JSON数组放在 this.state.datathis.props.data,结果是一样的。

    想请问下,究竟问题出在哪。



  • 添加 extraData 属性到 FlatList ,给以任何一个数值,在任何 data 内容改变的时候,改变这个数值,都会带来 FlatList 新的绘制。

    默认情况,当且仅当 extraData 变化或者是 FlatList 的 data 属性变化的时候,FlatList 才会再次绘制,是 FB 推荐使用 Immutable Data 类型的原因, 因为如果 this._data 是这种类型,每次更新,都是一个不同的 prop 。



  • 我还是没有完全明白你的意思。。
    其实我只是想知道,为什么同样对data传值,用函数返回数组,就可以达到我想要的效果,而用props或其他的类型赋值,就不可以



  • 抱歉,说的太晦涩了,简单说,因为 FlatList 是 PureComponent ,在内部有一个比较,类似如此:

    this.props.data !== nextProps.data || this.props.extraData !== nextProps.extraData
    

    在这个条件成立下才会刷新,你的函数每次返回的都是不同的对象,而本地的 this._data 始终是一个对象,所以不会刷新。



  • @tsfosnz 大致明白了。那么使用函数返回的话,因为每次都去执行函数,所以并不会判断一个常量是否不同,所以导致这种情况下函数是可以行的是吗?



  • @DeforeChen 是因为,每次执行函数的时候,都会返回一个新的对象,所以每次都不同,那么FlatList 按照上面的条件判断的时候,就会刷新了。上面条件成立,才会刷新。而 this._data 你无论如何改变里面的数值,但是 this._data 始终是同一个对象,所以每次都相同,也就不会自动刷新了。



  • @tsfosnz 了解了,万分感谢!


登录后回复