第四节:React组件状态的State属性

源码 2024-10-4 16:58:59 110 0 来自 中国
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状态
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-21 20:44, Processed in 0.155996 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表