react之state和props
2017-08-30 本文已影响267人
小猿_Luck_Boy
state
state是React中组件的一个对象. React把用户界面当做是状态机,通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。
react中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化
虚拟dom
react中提出虚拟DOM的相关概念，那么虚拟DOM是什么？
我们都知道传统的js操作DOM节点是直接获取DOM节点更改节点的相关信息，但是在react中提供了setState接口来改变html的节点
实现机制是当我们setState去重新更新UI时，react会使用differ算法判断哪个节点需要更新;
虚拟DOM是负责管理真是DOM的虚拟数据结构，就是当我们通过setState更新UI界面的时候，虚拟DOM会帮我们操作真实的DOM更新；这就避免我们直接操作DOM带来的性能问题
下面的代码实现的是，点击button的时候，累加text的值，再使用setState更新button的text显示
class HelloState extends React.Component {
constructor(props) {
super(props);
// 初始状态
this.state = {
text:1
};
}
click(){
let text = this.state.text;
text++;
this.setState({text:text})
}
render (){
return (
<button onClick={()=>this.click()}>
{this.state.text}
</button>
)
}
}
props
组件中的props可以传递数据
class CustomButton extends Component {
render(){
const {text,onClick} = this.props;
return(
<button onClick={()=>onClick()}>
{text}
</button>
)
}
}
class HelloState extends React.Component {
constructor(props) {
super(props);
this.state = {
text:1
};
}
click(){
this.setState({text:++this.state.text})
}
render (){
return (
<CustomButton text={this.state.text} onClick={this.click.bind(this)}/>
)
}
}
其它推荐文章
react之组件的生命周期
react+webpack入门指南
