React入门---属性(state)-7
Posted 阿泽大大
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React入门---属性(state)-7相关的知识,希望对你有一定的参考价值。
state------>虚拟dom------>dom
这个过程是自动的,不需要触发其他事件来调用它。
state中文理解:页面状态的的一个值,可以存储很多东西。
学习state的使用:
1.state先初始化,在React中,每一个类跟所有的面向对象的函数一样,都有一个构造函数叫constructor。
2.将state的初始化放在constructor()里面。
export default class BodyIndex extends React.Component{ //将state的初始化放在constructor()里面 constructor(){ super();//调用基类的所有初始化方法(这个是固定模式) //下面是对state固定的语法 //初始化state后,初始化赋值 //重要:state只作用于当前的class,绝不影响其他组件class(例如这个state是作用在主体部分,它就不会影响头部和底部) this.state = {username : "azedada"} //可以传json等很多格式(这个是初始化赋值) } render(){ return( <div> <h1>这里是主体内容部分</h1> {/*state在页面显示*/} <p>{this.state.username}</p> </div> ) } }
重要:state只作用于当前的class,绝不影响其他组件class(例如这个state是作用在主体部分,它就不会影响头部和底部)。
3.state发生改变,会立马引起刷新,但是这个刷新只会更改需要更改的部分,不会引起页面全部刷新,所以用react写出来的页面效率非常高。
接下来用定时器函数来做一个简单的理解:
export default class BodyIndex extends React.Component{ //将state的初始化放在constructor()里面 constructor(){ super(); this.state = {username : "azedada"} } render(){ //定时器,4秒后进行刷新 setTimeout(()=>{ //更改state的时候 this.setState({username : "hello"}) },4000) return( <div> <h1>这里是主体容部分</h1> {/*state在页面显示*/} <p>{this.state.username}</p> </div> ) } }
运行程序之后,就会发现 页面中 azedada 会在4秒中后变为 hello,这个过程只进行当前的刷新,没有页面的刷新。效率非常高。
以上是关于React入门---属性(state)-7的主要内容,如果未能解决你的问题,请参考以下文章