在React Native 中，改變組件的布局樣式等可以通過props或者state來實(shí)現(xiàn)任内，但由于性能瓶頸，我們不得不放棄通過觸發(fā)render的方式來改變樣式趋距，而是通過setNativeProps來直接更改原生組件的樣式屬性來達(dá)到相同的效果节腐。
這里的setNativeProps方法等價(jià)于直接操作DOM節(jié)點(diǎn)的方法翼雀。使用這種方法修改View狼渊、Text等react Native自帶的組件，并且不會觸發(fā)組件的componentWillReceiveProps 狈邑、 shouldComponentUpdate官地、 componentWillUpdate 等組件生命周期中的方法驱入。但它不應(yīng)該經(jīng)常被使用亏较，一般建議在不得不頻繁刷新而又遇到了性能瓶頸時(shí)使用掩缓。建議在使用此方法之前優(yōu)先考慮setState和shouldComponentUpdate方法來解決問題你辣。
setNativeProps 與 TouchableOpacity
TouchableOpacity這個(gè)組件就在內(nèi)部使用了setNativeProps方法來更新其子組件的透明度：
setOpacityTo: function(value) {
// Redacted: animation related code
this.refs[CHILD_REF].setNativeProps({
opacity: value
});
},
由此我們可以寫出下面這樣的代碼：子組件可以響應(yīng)點(diǎn)擊事件舍哄，更改自己的透明度表悬。而子組件自身并不需要處理這件事情，也不需要在實(shí)現(xiàn)中做任何修改温治。
<TouchableOpacity onPress={this._handlePress}>
<View style={styles.button}>
<Text>Press me!</Text>
</View>
</TouchableOpacity>
如果不使用setNativeProps這個(gè)方法來實(shí)現(xiàn)這一需求熬荆，那么一種可能的辦法是把透明值保存到state中惶看，然后在onPress事件觸發(fā)時(shí)更新這個(gè)值:
getInitialState() {
return { myButtonOpacity: 1, }
},
render() {
return (
<TouchableOpacity onPress={() => this.setState({myButtonOpacity: 0.5})}
onPressOut={() => this.setState({myButtonOpacity: 1})}>
<View style={[styles.button, {opacity: this.state.myButtonOpacity}]}>
<Text>Press me!</Text>
</View>
</TouchableOpacity>
)
}
比起之前的例子纬黎，這一做法會消耗大量的計(jì)算 —— 每一次透明值變更的時(shí)候React都要重新渲染組件結(jié)構(gòu)本今，即便視圖的其他屬性和子組件并沒有變化主巍。一般來說這一開銷也不足為慮孕索，但當(dāng)執(zhí)行連續(xù)的動畫以及響應(yīng)用戶手勢的時(shí)候搞旭，只有正確地優(yōu)化組件才能提高動畫的流暢度肄渗。
將setNativeProps傳遞給子組件
具體要做的就是在我們的自定義組件中再封裝一個(gè)setNativeProps方法翎嫡，其內(nèi)容為對合適的子組件調(diào)用真正的setNativeProps方法惑申，并傳遞要設(shè)置的參數(shù)。
var MyButton = React.createClass({
setNativeProps(nativeProps) {
this._root.setNativeProps(nativeProps);
},
render() {
return (
<View ref={component => this._root = component} {...this.props}>
<Text>{this.props.label}</Text>
</View>
)
},
});
這里我們使用了ref回調(diào)語法，我們向下傳遞props時(shí)使用了{(lán)...this.props}語法啼肩，（這一用法的說明請參考對象的擴(kuò)展運(yùn)算符）祈坠，這是因?yàn)閺?fù)合組件除了要求在子組件上執(zhí)行setNativeProps意外矢劲，還要求子組件對觸摸事件進(jìn)行處理芬沉，因此會傳遞多個(gè)props.
