react native key,ref,bind的作用和使用

转载:http://blog.csdn.net/pz789as/article/details/52537028

我们在项目里面，经常会用的批次渲染，比如一个列表渲染很多个item，或者一个横排或者竖排同时渲染多个数据。

例如：

[html]  view plain  copy

1. render1(){  
2.   var arr = [];  
3.   for(var i=0;i<5;i++){  
4.     arr.push(  
5.       <Text style={{fontSize:20, color: 'red'}}>  
6.         这是{i}  
7.       </Text>  
8.     );  
9.   }  
10.   return (  
11.     <View style={[styles.container, styles.center]}>  
12.       {<span style="font-family: Arial, Helvetica, sans-serif;">arr</span>}  
13.     </View>  
14.   );  
15. }  

这样写，RN都会报一个警告，需要你对每个item添加一个key，在Text里添加一个属性key：

[html]  view plain  copy

1. <Text key={i} style={{fontSize:20, color: 'red'}}>  

但是这个key有什么作用呢？我们在代码后面加一个console.log输出一下看看结果：

[html]  view plain  copy

1. for(var i=0;i<5;i++){  
2.   ...  
3. }  

[html]  view plain  copy

1. console.log(arr);  

输出结果显示，arr所有的内容，包括那个key：

看到key和那个props了吗，我们可在未渲染之前，根据要求再次更改array里面<Text>的属性。我们现在来改一改试试看！

先看看上面代码运行的效果：

然后我们在for之后这么改看看结果如何：

[html]  view plain  copy

1. for(var i=0;i<arr.length;i++){  
2.   if (arr[i].key == 2){  
3.     arr[i].props.style.fontSize = 40;  
4.     arr[i].props.style.color = 'green';  
5.     arr[i].props.children[0] = '改变了哦';  
6.   }  
7. }  

结果我们可以看到，中间那个key等于2的已经改变了哦。

既然这样，那我们继续改一下，把这个arr改为这个组件的一个属性：

[html]  view plain  copy

1. constructor(props){  
2.   super(props);  
3.   this.state = {  
4.     blnUpdate: false,  
5.   };  
6.   this.testArr = [];  
7.   for(var i=0;i<5;i++){  
8.     this.testArr.push(  
9.       <Text key={i} style={{fontSize:20, color: 'red'}} onPress={this.changeChild.bind(this, i)}>  
10.         这是{i}  
11.       </Text>  
12.     );  
13.   }  
14.   console.log(this.testArr);  
15. }  

定义在constructor里面，并且附初始值，我们还绑定了一个按键响应， 可以看到临时变化。

另外加一个state变量，用于刷新render（为什么这么做，是RN的刷新机制，需要调用this.setState才会调用，所以弄了一个bln值，而不是把arr放在state里面

然后在绑定还按钮回调中这样做：

[html]  view plain  copy

1. changeChild(key){  
2.   console.log(key);  
3.   if (this.testArr[key].props.children[0] == '我变了'){  
4.     this.testArr[key].props.style = {fontSize : 20, color : 'red'};  
5.     this.testArr[key].props.children[0] = '这是';  
6.   }else{  
7.     this.testArr[key].props.style = {fontSize : 30, color : 'green'};  
8.     this.testArr[key].props.children[0] = '我变了';  
9.     //这里要说说text的结构，如果text是纯文字，children就只有一个，如果中间夹杂着其他变量，react是将text分段保存的。  
10.   }  
11.   this.setUpdate();  
12. }  

[html]  view plain  copy

1. setUpdate(){  
2.   this.setState({  
3.     blnUpdate: !this.state.blnUpdate  
4.   });  
5. }  

这样我们来看效果：

点击之前：

点击之后：

哈哈，都变了哦！！不过这样做有点延时。其实改变渲染之后的东西，在学习RN之后会有一个专门的参数可供使用，就是每个组件的自带属性ref，在上面的截图我们也看到了，现在ref是null，因为没有设置，如果要使用需要这样做：

[html]  view plain  copy

1. <Text key={i} ref={'text'+i} style={{fontSize:20, color: 'red'}} onPress={this.changeChild.bind(this, i)}>  

然后使用的时候就是this.refs.text0.xxx，这个RN给我们提供一个很有用的函数，this.refs.text0.setNativeProps({style:{xxx},xxx:xxx})，这个是直接改变原生组件的属性，是不会经过render的，有时候可以提高性能。

不过这个ref有个缺点，它必须要在render之后才会产生，也就是一开始初始化后，使用this.refs.text0 会报错，这点一定要弄清楚哦！

bind

   renderAllButtons(){
    var allBtns = [];
    titles=['拍照','视频','开机','照明']
    for(var i=0 ;i<4;i++){
      let title = titles[i];
      allBtns.push(
        <View key={i} style={styles.autoViewStyle}>
          <TouchableOpacity  style={styles.buttonStyle} onPress={this._pressBtn.bind(this,i)}>
              <Text style={styles.textsStyle}>{title}</Text>
          </TouchableOpacity>


        </View>
      );
    }

  _pressBtn(i){
    console.log(i)
  }