1. State状态明确
关于state的明确
- state 是组件对象中最紧张的属性,值是对象(可以包罗多个数据)
- 组件被称为"状态机",通过更新组件的state来更新对应的页面体现(重新渲染组件)
- state是组件实例的属性,函数组件没有实例,因为函数组件没有状态
- state可以明确是组件本身的数据, props数据是外部传入,state数据就是组件本身的
2. State状态的使用
2.1 state使用规则
- state 通常在组件的constructor中举行初始化
- state 只能用setState方法更新
- setState会导致render重新执行,渲染组件和全部的子组件
1) 初始化状态
constructor(props){ super(props) // 界说state状态 this.state = { flag: true, firstMsg: "天王盖地虎", lastMsg : "小鸡炖蘑菇" }}2) 读取某个状态值
render(){ let flag = this.state.flag; let firstMsg = this.state.firstMsg; let lastMsg = this.state.lastMsg; // 简写方式: 布局获取state中的数据 // let {flag,firstMsg, lastMsg} = this.state; return ( <div> { flag ? firstMsg :lastMsg}</div> ) }3) 更新状态 --> 组件界面更新
this.setState({ stateProp1: value1, stateProp2: value2})2.2 示例代码:
class MyCom extends React.Component{ constructor(props){ super(props); // 界说state状态 this.state = { flag: true, firstMsg: "天王盖地虎", lastMsg : "小鸡炖蘑菇" } } changeFlag = () => { // 修改state状态数据 this.setState({ // 取出状态取反,然后改变状态 flag : !this.state.flag }) } render(){ // let flag = this.state.flag; // let firstMsg = this.state.firstMsg; // let lastMsg = this.state.lastMsg; let {flag,firstMsg, lastMsg} = this.state; return ( <div onClick={ this.changeFlag }> { flag ? firstMsg :lastMsg}</div> ) }}ReactDOM.render(<MyCom/>, document.getElementById("app"))示例阐明:
- setState每次修改内容会自动触发React重新渲染页面
- 因此示例中每次点击都会修改状态,更加状态重新渲染内容,达到内容切换的目标
2.3 状态的简写界说
2.3.1 阐明:
- ES6 class类中 constructor 函数为构造函数, 内部通过this界说的属性是类实例的属性
- class类中其他的方法确实实例原型上的方法
- 但是class类中的表达式界说的内容确实实例上的内容
2.3.2 示例
class Person{ constructor(){ // 实例属性 this.name = "张三" } // 实例上的属性 age = 18 // 实例上的方法 eat = function(){ console.log("eat") } // 原型上的方法 run(){ console.log("eat") }}var xm = new Personconsole.log(xm)/*打印结果: Person {age: 18, name: "张三", eat: ƒ} age: 18 eat: ƒ () name: "张三" __proto__: constructor: class Person run: ƒ run() __proto__: Object*/示例阐明:
- ES6中class类里界说的表达式,无论是函数表达式,函数平常的表达式,末了都是实例的属性或方法
- ES6中class类中平常界说的函数是实例原型上的方法
因此我们如果想简写state的界说，就可以如下界说:
示例代码:
class MyCom extends React.Component{ constructor(props){ super(props); } // 初始化界说state状态 state = { flag: true, firstMsg: "天王盖地虎", lastMsg : "小鸡炖蘑菇" } // 组件实例化上的方法 changeFlag = () => { // 修改state状态数据 this.setState({ // 取出状态取反,然后改变状态 flag : !this.state.flag }) } render(){ let {flag,firstMsg, lastMsg} = this.state; return ( <div onClick={ this.changeFlag }> { flag ? firstMsg :lastMsg}</div> ) }}ReactDOM.render(<MyCom/>, document.getElementById("app"))3. 关于函数组件
3.1 阐明
- 不知道有没有人这么思索过, 函数组件没有状态
- 我们是否可以使用变量来模仿状态的概念呢
- 似乎状态也就是一个数据, 界说的变量来存储数据是否可以
3.2 示例代码:
// 界说数据let state = { flag: true, firstMsg: "天王盖地虎", lastMsg : "小鸡炖蘑菇"}function MyCom(){ // 获取数据 let {flag,firstMsg, lastMsg} = state; // 修改数据函数 let changeFlag = () => { console.log(11); // 11 state.flag = !state.flag } // 返回react元素 return ( <div onClick={ changeFlag }> { flag ? firstMsg :lastMsg}</div> )}// 页面渲染ReactDOM.render(<MyCom/>, document.getElementById("app"))示例阐明:
- 当每次点击的时间,控制台会打印11阐明变乱没有任何题目
- 每次点击事后,在控制台打印state数据,会发现flag的值发生了变化
- 可以页面却并没有任何变化
- 缘故起因在于平常变量数据的变化并不会触发react重新渲染页面,但state会
- 如果真的盼望页面重绘,就须要封装渲染函数,手动触发
3.3 封装渲染函数
修改示例代码如下:
function MyCom(){ let {flag,firstMsg, lastMsg} = state; let changeFlag = () => { console.log(11); state.flag = !state.flag // 每次flag值发生改变,重新渲染页面 render() } return ( <div onClick={ changeFlag }> { flag ? firstMsg :lastMsg}</div> )}// 封装页面渲染函数function render(){ ReactDOM.render(<MyCom/>, document.getElementById("app"))}// 初始渲染一次render()示例阐明:
- 将React.render渲染函数封装在render函数中
- 每次修改数据完毕后,手动的调用render函数,重新渲染页面
- 因此大多数环境下回选择使用state状态
|
