一切界面变化都是 状态state变化
React会自动技术状态的差异部分，以最小的差异去重新渲染
在内存中“打草稿计算差异”，这一概念称为Virtual Dom。然而打草稿也是要开销的，所以能不打则不打
image.png
PureComponent
从0.32版本开始引入新的PureComponent代替了老的PureRenderMixin
shouldComponentUpdate(nextProps,nextState){
return shallowCompare(this,nextProps,nextState);
//对props和state进行比较
}
如果你的props和state都是值/原始类型：string，number，boolean，null，undefined，symbol，那么直接把Component替换为PureComponent即可。
引用类型和immutable原则
引用类型即Object，又包括array，function；
引用类型的浅比较实际为比较其指针地址，修改引用类型的值，其指针地址不会变，
如果使用PureComponent,而props/state含有引用类型，则需要遵循immutable原则---不能修改其原值;
immutable典型用例
复制原值再修改
//1
handleClick(){
const words = this.state.words;
words.push("maker");
this.setState({words:words});
}
//2
handleClick(){
this.setState(prevState =>( {
words:prevState.words.contact(['maker'])
}));
}
//3
handleClick(){
this.setState(prevState =>( {
words:[...prevState.words,'maker'],
}));
}
注意内联属性与函数
错误使用
render(){
return(
<Button data={[1,2,3]} onPress={()=>{alert("alert")}} />
)
}
修改
onPress = ()=>{
alert("alert");
}
render(){
this.data= [1,2,3];
return(
<Button data={this.data} onPress={this.onPress} />
)
}
