之前公司需要在原生项目中集成一个互动的模块，然后就开始学习React Native，也是刚开始学习，遇到了不少的坑，发现这个坑真的有必要记录下。
问题：实现列表刷新，删除列表某一项之后，实现列表界面刷新，但是问题来了，界面数据是变少了，但明明删除的不是这一条呀？(忽略效果图，做的有点丑)
原始效果.png
删除item2后效果图.png
我明明删除的是item 2呀，为啥item 2还在，item 4去哪里了，结果我去控制台打印数据，数据如下效果图；
原始数据.png
删除item 2后打印的数据.png
尝试发现：结果证明，我没删除错误，但是问题来了，界面为啥会这样显示？我在n多个地方打印，终于有点小发现了；
<pre>
// 这里在创建ListView数据源的时候，有个rowHasChanged属性来判断
// item行数据是否需要刷新，这里打印
let ds = new ListView.DataSource({
rowHasChanged: (r1, r2)=> {
if (r1 !== r2) {
console.log("不相等=");
console.log(r1);
} else {
console.log("相等=");
console.log(r1);
console.log(r2);
}
return r1 !== r2;
}
});
</pre>
找到问题：打印后的结果如上删除 item 2后打印的数据.png 所示： r1!==r2返回全都false，即它认为r1、r2是相等的，所以不会调用renderRow方法，界面也就刷新不了，但是什么原因造成的？——应该是深浅拷贝的问题。
开始探索解决问题
- 原始list页面中的数组数据是完全复制上一个页面传过来的数据：this.data = props.data;通过state数据源的方式刷新界面：但是实践证明这种方式不可行，renderRow不会被调用；
<pre>
this.state = {
dataSource: ds.cloneWithRows(this.datas),
}
</pre> - 还是通过state数据源的方式刷新界面，但是只拷贝父页面传递过来的值，我找到数组的相关方法，发现this.datas = props.todos.slice(0);这种方式会返回一个新的数组，实践也证明，这种方式可行；
- 我还尝试了将data放入到state中，对应dataSource={this.state.dataSource.cloneWithRows(this.state.datas)}，不管是深浅拷贝data，renderRow每次都会被全部调用，rowHasChanged不会再被打印，这绝对不是我们想要的；
思路就是这样，下面粘贴了相关代码，其实就是深浅拷贝的问题，后来在不断学习中，发现通过this.data = [...props.todos];这种方式也能进行内容的拷贝，达到想要的效果，不妨试试。
<pre>
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView,
TouchableOpacity
} from 'react-native';
export default class TodoList extends Component {
static get defaultProps() {
return {
todos: [],
deleteItem: undefined,
clickItem: undefined
}
}
static propTypes = {
todos: React.PropTypes.array.isRequired,
deleteItem: React.PropTypes.func.isRequired,
clickItem: React.PropTypes.func,
}
constructor(props) {
super(props);
let ds = new ListView.DataSource({
rowHasChanged: (r1, r2)=> {
if (r1 !== r2) {
console.log("不相等=");
console.log(r1);
} else {
console.log("相等=");
console.log(r1);
console.log(r2);
}
return r1 !== r2;
}
});
// 对应第三种
// this.datas = props.todos;
// 对应第五种
// this.datas = props.todos.slice(0);
this.state = {
// 第一种方式，直接用传递过来的todos，对应dataSource={this.state.dataSource}
// ---->不可行，这种方式会造成改变todos，但是renderRow不会被调用，rowHasChanged打印的 r1!==r2 返回false
dataSource: ds.cloneWithRows(props.todos),
// 第三种：对应dataSource={this.state.dataSource}
//--->不可行，和第一种方式一样，renderRow不会被调用，rowHasChanged打印的 r1!==r2 返回false
// dataSource: ds.cloneWithRows(this.datas),
// 第二种：用一个state变量保存传递过来的值，对应dataSource={this.state.dataSource.cloneWithRows(this.state.datas)}
// ----->可行，但是renderRow每次都会被全部调用，rowHasChanged不会再被打印
// datas: props.todos,
// dataSource: ds
// 第四种：复制值到新的state变量中，对应dataSource={this.state.dataSource.cloneWithRows(this.state.datas)}
// ---->可行，和第二种方式一样，renderRow每次都会被全部调用，rowHasChanged不会再被打印
// datas: props.todos.slice(0),
// dataSource: ds
// 第五种：对应dataSource={this.state.dataSource}
// ---->可行，rowHasChanged会准确比较r1和r2,打印的 r1!==r2 返回true/false
// dataSource: ds.cloneWithRows(this.datas),
}
}
componentWillReceiveProps(newProps) {
console.log("todoList+componentWillReceiveProps:");
console.log(newProps);
// 对应第三种
// this.datas = newProps.todos;
// 对应第五种
// this.datas = newProps.todos.slice(0);
this.setState({
// 对应第一种方式
dataSource: this.state.dataSource.cloneWithRows(newProps.todos),
// 对应第二种方式
// datas: newProps.todos
// 对应第三种方式
// dataSource: this.state.dataSource.cloneWithRows(this.datas),
// 对应第四种方式
// datas: newProps.todos.slice(0),
// 对应第五种方式
// dataSource: this.state.dataSource.cloneWithRows(this.datas),
});
}
render() {
console.log("todoList+render");
return (
<View>
<ListView
contentContainerStyle={styles.todoListStyle}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
enableEmptySections={true}
removeClippedSubviews={false}
/>
</View>
);
}
renderRow(rowData, sectionID, rowID) {
console.log("todoList+renderRow:" + rowID);
return (
<TouchableOpacity onPress={()=>{this.props.clickItem(rowData);}}>
<View style={styles.todoItemStyle}>
<Text>{rowData.id}</Text>
<Text>{rowData.title}</Text>
<Text>{rowData.complete ? "完成" : "未完成"}</Text>
<TouchableOpacity
activeOpacity={0.7}
style={styles.todoItemDelStyle}
onPress={()=>{this.deleteItem(rowData.id)}}>
<Text>X</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
)
}
deleteItem(id) {
this.props.deleteItem(id);
}
}
const styles = StyleSheet.create({
todoListStyle: {
backgroundColor: 'white'
},
todoItemStyle: {
height: 80,
flexDirection: 'row',
backgroundColor: 'yellow'
},
todoItemDelStyle: {
width: 48,
height: 48,
borderWidth: 1,
alignItems: 'center'
}
});
</pre>
针对上面的代码，测试下来，我自己总结了几点：
- 不能直接用props传递过来的list，会造成 r1!==r2 判断错误；（第一种和第三种方式）；
-
每次renderRow全部调用：定义一个新的变量赋值为props传递过来的值(=)，若setState的是新定义的datas，那么renderRow每次都会被全部调用，相当于rowHasChanged判断毫无用处，每次都相当于第一次进来；（第二种和第四种方式）；
每次都调用renderRow.png
-
拷贝内容值：定义一个新的变量赋值为props传递过来的内容值(这里props.todos.slice(0)返回从0开始的新数组)或者这样拷贝：this.data = [...props.todos];，若setState定义的dataSource，renderRow会被准确调用；（第五种情况）
只绘制了第二行和第三行.png
说明
这是传递数组，然后删除某条数据的情况，后面我还会测试如果是传递的对象数据，在第二个页面中改变对象中的数据，返回的到第一个页面的时候，该行会不会被局部刷新？
网友评论