状态 在React里是一个十分重要的概念,它在应用的整个生命周期中扮演着重要的角色,因此本文就准备好好聊聊它,废话不多说,开搞!

9eefec80020b4a2b988914415c44ef05_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp

什么是状态

在React的世界里,整个应用程序是由一个个 组件 搭建而成,而这些组件各自承担着不同的职责,用于渲染应用程序界面的不同部分

应用程序是 可交互的,状态是可以产生变化的,更近一步来说,组成应用程序的各个组件的状态是会发生变化的,而这一切实现的基础就是组件需要拥有并维护自己的状态

组件利用状态来映射界面内容,当状态发生变化时,界面也就随之变化,所以在开发React应用时,最重要的就是对状态的维护

1768bb83868a4c2088c23b8450aabb74_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp

状态在React里的作用

在React里,可以用一个公式来表达其实现的核心逻辑:UI = fn(data)

上述公式表达的含义是 在React里,通过一个渲染函数结合不同的数据源,从而生成不同的界面内容

再往深一点思考,其实是React利用不同的数据源,生成了不同的状态,从上节的内容我们知道 不同的状态对应着不同的界面内容,从而最终实现了利用 不同数据源 产生 不同界面内容 的目的

因此我们在编写React应用时,核心关注点应该是 状态,以状态为中心,向上 融合外界传来的数据源,这里的数据源可能是 异步请求的结果,也可能是 上层组件传来的props,然后通过这些数据源与 之前状态 的融合,生成一个 全新的 状态,最后 向下 通过新的state映射出新的界面内容,从而实现界面的动态更新

05e8d5935f9c446cb64badbef0f191cf_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp

结语

状态的概念十分重要,它是构建React应用的基石,所以一定要明确它的概念与作用,这样才能开发出可靠的代码,好啦,就到这里啦,over!