最近在练习react native，碰到一个坑。程序一直报this.setState is not a function
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// 初始化模拟数据
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
]),
test: 'test'
};
// 少了这一行，就会报错
this._onPress.bind(this);
}
_onPress() {
this.setState({test: '11111'});
}
render() {
return (
<View style={{paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text onPress={this._onPress}>{rowData}</Text>}
/>
</View>
);
}
}
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('test', () => ListViewBasics);
主要原因是没有调用bind函数，其实在示例代码也看到过需要调用this._onPress.bind(this)，只是不理解原因，所以印象不深刻，自己再敲一遍就忘了。
翻了下this相关的资料：
JavaScript 中的作用域 scope 和上下文 context 是这门语言的独到之处，每个函数有不同的变量上下文和作用域。这些概念是 JavaScript 中一些强大的设计模式的后盾。在ES5规范里，我们可以遵循一个原则——每个 function 内的上下文 this 指向该 function 的调用方。
var Module = {
name: 'Jafeney',
first: function() {
console.log(this); // this对象指向调用该方法的Module对象
var second = (function() {
console.log(this) // 由于变量提升，this对象指向Window对象
})()
},
init: function() {
this.first()
}
}
Module.init()
类似的还有这样的(截图原自《Javascript高级程序设计》)：
Javascript高级程序设计.png
回到上面最开始的那个React例子在render函数里面
<Text onPress={this._onPress}>{rowData}</Text>}
相当于
var onpress = this._onPress;
// 在onclick的时候，调用
onpress(); // this指向其他环境，而不是之前的类对象
至于 this._onPress = this._onPress.bind(this); 其实等价于：
// 相当于用了类原型生成了一个bind到当前对象的函数
// 再覆盖当前函数，来保证这个函数的this永远不会被改变
this._onPress = this.protoType._onPress.bind(this);
var onpress = this._onPress;
// 组件被click的时候
onpress(); //即使在全局环境调用，this也不会被改变
至于箭头操作符，作用域的规则不一样，具体可以看资料的链接。
好多不懂的，继续学习吧。
