个人理解：react的状态state 初始化、遍历

た入场券 2022-11-30 01:24 125阅读 0赞

### state初始化 ###

--------------------

一般我们是直接在类组件的constructor中初始化的，如下：

import React, {  Component } from 'react'
    export default class tryBro1 extends Component { 
        constructor(props){ 
            super(props)
            this.state={ 
                com:"I'm tryBro."
            }
        }
        render() { 
            return ()
        }
    }

但其实也不一定非按上面的形式写，直接在类里面定义一个state的对象，也是可以作为react的状态存在，也可以通过setState方法修改state里的值，如下：

import React, {  Component } from 'react'
    export default class tryBro1 extends Component { 
        state={ 
            com:"I'm tryBro1."
        }
        update=()=>{ 
            this.setState({ 
                com:"I'm tryBro1 and I'm here again."
            })
        }
        render() { 
            console.log("tryBro1中的state：",this.state)
            return (
                <div>
                    <p>{ this.state.com}</p>
                    <button onClick={ this.update}>点击修改state</button>
                </div>
            )
        }
    }

![在这里插入图片描述][20200822135623915.png_pic_center]

**但请务必牢记**，并不是组件中用到的所有变量都是组件的状态！当存在多个组件共同依赖一个状态时，一般的做法是**状态上移**，将这个状态放到这几个组件的公共父组件中。

### state遍历 ###

--------------------

首先我们得知道，react中的state是可变的，是组件内部维护的一组**用于反映组件UI变化的状态集合**，通过setState()方法来修改数据。

this.state**不能**直接在页面上展示，

<p>react的状态state：{this.state}</p>   //这种写法是错的

会报以下错误：  
![在这里插入图片描述][20200822132040956.png_pic_center]  
意思是，" 错误:对象不是有效的反应子(发现:对象与键\{textname, textage\})。如果您打算呈现一组子元素，请使用数组。 " 这是在提醒你要遍历着展示里面的内容。

但可以在js代码里面查看，

<p>react的状态state：{console.log(this.state)}</p> //这种是可以的

那么怎么列表循环让this.state在页面上显示呢，可以先把this.state转换成数组，然后遍历出来：

<p>react的状态state：{ 
        Object.keys(this.state).map((item, index) => { 
            return (
                <p>{ item}---{ this.state[item]}</p>
            )
        })
    }</p>

另外我发现，每个组件的state只作用于当前组件，可以通过值传递来完成状态共享。

最后，state中的所有状态都是用于反映组件UI的变化，一旦数据更新了，state会自动进行一次渲染。

### 参考博文 ###

--------------------

如果你想更深入的了解state与props的区别，以及state异步更新，以及state更新是浅合并等相关内容，请看@艾特老干部的博文：[深入理解React 组件状态（State）][React _State]

另外，这篇简要总结了react的props/state：[https//www.cnblogs.com/taozhibin/p/13065261.html][https_www.cnblogs.com_taozhibin_p_13065261.html]

[20200822135623915.png_pic_center]: /images/20221124/b52995cd6fc648e99aeea0978f480397.png
[20200822132040956.png_pic_center]: /images/20221124/115a5c8e2cb24398aba4f73b2e0cc1f6.png
[React _State]: https://www.jianshu.com/p/c6257cbef1b1
[https_www.cnblogs.com_taozhibin_p_13065261.html]: https://www.cnblogs.com/taozhibin/p/13065261.html