极智开发 | 讲解 React 组件三大属性之一：state

极智开发 | 讲解 React 组件三大属性之一：state

大家好，我是极智视界，本文讲解一下 React 组件三大属性之一：state。

React 组件，从概念上类似于 JavaScript 函数，它接受任意的入参，并返回用于描述页面展示内容的 React 元素。React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。React 组件具有三大属性，即：​​state​​、​​props​​、​​refs​​。这里讲解三大属性之一：​​state​​ 。

文章目录

​​1. state 理解​​​​2. state 示例​​

1. state 理解

​​state​​​ 是 React 组件对象最重要的属性，其值是对象，可以包含多个 ​​key-value​​ 的组合。组件被称为 状态机，可以通过更新组件的 ​​state​​ 来更新对应的页面展示，也即 重新渲染组件。这里有一个比较新颖的概念，什么是状态机呢？ ==> 状态机一般指 有限状态机，又称 有限状态自动机，是表示有限个状态以及在这些状态之间的转移和动作等行为的 数学计算模型，状态机中有几个术语：state 状态、transition 转移、action 动作、transition condition 转移条件。

这么解释 状态机 还是过于学术，举个例子可能好理解一些，比如 在我们生活中十分常见的 红绿灯 就是一个典型的 状态机，它有不同的 状态，还能按一定频率在不同的 状态间转移。 拿 红绿灯 对比 **咱们的 React 组件 **，拿 红绿灯的状态 state 对比 咱们 React 组件的状态 state ，这样是不是好理解多了。所以通俗理解，​​state​​ 就是拿来控制 React 组件 状态 的一个属性。

下面咱们主要用代码示例来讲解 ​​state​​ 怎么用。

2. state 示例

来看一个 ​​state​​ 的示例：

好了，以上分享了 讲解 React 组件三大属性之一：state。希望我的分享能对你的学习有一点帮助。

​​《极智开发 | 讲解 React 组件三大属性之一：state》​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。