React中的state

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

上一节中我们学习了如何使用React的props来改变组件(UI)以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state,而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习,我们了解到props是纯静态的改变UI,而今天要聊的state是动态的,让你的组件真的能动起来,可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state,从而导致对应的UI更改(或内容的重新渲染)。

如果你从未接触过或者想学习这方面的知识的话,欢迎继续往下阅读。

state的解释

通过对props的学习我们知道可以通过props给组件透传值,从而更改UI效果。比如上节中提到的房子案例:

整个房子是一个<House />组件,它由房顶(<Roof />)、墙(<Wall />)、门(<Door />)和窗户(<Window />)。每个组件都有自己的props,比如,RoofroofSrc(房顶图片)和color(改变房顶的颜色)。在使用的时候,可以通过color这个props来改变房顶的颜色(正如上图你所看到的,有blueredsalmon等)。

就房子这个示例而言,RoofWall是静态的(你总不可能随意去拆了房顶和墙重建吧),但DoorWindow是可以具有交互的(人可以打开门或窗户,这是很正常的形为)。如果把这个House拿到Web应用程序来说,RoofWall是不具交互性的,仅仅是展示而以;但DoorWindow是具有交互性的,可以根据用户的操作行为做出相应的变更。

在上面的示例,我们看到House有打开门的,也有关闭门的两个效果。只不过上面的示例是通过给Door组件传递了两个不同的图片(props是同一个)。具体代码如下:

这是纯静态展示,但我们应该给Web应用程序(房子House)赋予更强大的灵魂,让应用程序能和自己的用户交互起来。也就是说,房子的门应该是由用户的操作来完成的。比如说,用户点了一下门(有可能触发了一个click事件),门就打开了,用户再点一下门,门又关闭了。那么在React中要实现这样的一个效果,我们不能仅依赖于props来完成了。我们需要借助React的state来完成这样的功能。

换句话说,如果React的props持有不可变的数据来改变组件渲染的话,那么state将存储关于组件的数据,这些数据可能会随时间变化。数据的变化可以以用户操作(事件),比如用户鼠标点击了一下左键,用户键盘按下了(具体的可以看看React中的事件一文)等。在React中处理组件的状态通常会涉及组件的默认状态访问当前状态更新状态

比如上面讲到的房子这个组件,我们就可以通过state来让用户具有可操作性(开门和关门之间切换)。

React的state如何使用

还是拿<House />来举例,看看在React中怎么使用state。在使用state之前首要做的第一件事情就是初始化state数据,然后才能在render()中使用它。为了设置初始状态,在构造函数constructor中使用this.state来初始化state。如果你从父组件获取逻辑的话,一定要调用super()方法:

class House extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            // ...
        }
    }

    render() { 
        // ...
    }
}

为什么要使用super(),有关于这方面更详细的介绍,可以阅读《为什么我们要写 super(props) ?》一文。

上面是使用class创建组件时声明state的方法,如果我们使用函数组件或者现在流行的React Hooks的话,使用方式会略有不同,这里暂时不表,后续会和大家一起学习和探讨怎么在React Hooks中使用propsstate

在设置初始状态时我们可以添加逻辑,比如上面的示例中,设置了isOpen的初始值:

class House extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isOpen: false
        }
    }

    render() { 
        // ...
    }
}

通常在使用类创建组件时会调用constructor()构造函数。大多数情况下,当调用constructor()时,super()方法是在构造函数内部调用的,否则父类的构造函数将不会执行。另外this.state必须是一个对象。

如果要更新状态的话,需要使用this.setState(data, callback)方法。调用此方法时,React将data与当前状态合并并调用render()。然后,React调用callback

setState()中使用回调非常重要,因为这些方法是异步执行的。你可以使用回调来确保在使用新状态之前它是可用的。如果你依赖一个新状态,而不等setState()完成其工作,那么你将同步地处理异步操作,这意味着当前状态仍然是旧状态时,可能会出现错误。

此值的变化取决于从何处调用函数。与我们的组件相关的上下文被绑定到this,以确保它与我们的组件是同步的。

class Hous
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/react/react-state.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部