首页
周期介绍
周期发展
周期优势
周期市场
周期前景
周期资源

从零开始学习React有状态组件和无

在前面的学习过程中,我们已经掌握了React组件以及React事件处理,这样我们就能够初步的构建React页面。所以在本文中我们来基于React组件来介绍下React中另一个概念有状态组件和无状态组件。废话不多说,直接Letsgo!

有状态组件(类组件)

在前面的学习过程中我们掌握了类组件的创建,在React中类组件被称之为有状态组件。我们使用继承自React.Component的类来创建React组件,在类组件中我们拥有Props,控制状态的State,可以使用生命周期函数。

其中Props能够帮助我们完成React组件间的传参,通信等工作。我们使用积木式的方式搭建一个复杂页面,那么我们所使用的父组件和子组件之间肯定会有这千丝万缕的联系。一般我们可以总结为3种组件的通信关系:父子组件的通信,子父组件的通信以及兄弟组件的通信。目前我们只需要了解Props是帮助组件间进行通信即可,后面我们会详细展开并通过实际的案例帮助我们更深刻的理解Props。

而State是用来表示组件的状态,可以帮助我们所创建的组件动起来。如果你希望在用户对页面进行操作之后对应页面UI做到动态更新,我们就可以使用State来控制组件的状态当我们程序判断出组件状态发生改变UI就会自动更新。在React中我们使用setState方法对组件的状态进行更新,我们会在之后详细的介绍React中State的概念。

最后React生命周期函数是一组钩子函数,这些函数在组件的各个不同的时期会被触发。React的生命周期会由组件加载完成阶段,组件更新阶段,组件销毁阶段等一系列阶段所组成。这些生命周期函数能给帮助我们完成很多的工作例如状态的更新,数据的请求,页面的局部渲染等。由于React生命周期也是需要我们详细了解的概念,所以在之后会单独专门介绍一下这块内容。

无状态组件(函数组件)

在React中将函数组件称之为无状态组件,它没有自己的状态只负责数据的展示。如果你的组件只需要做静态页面的展示而没有复杂的用户交互以及状态更新,我们推荐使用函数组件就行。因为在运行状态组件(类组件)时,会触发生命周期中的一些函数,并且状态的更新会导致我们页面组件反复重新渲染(因为状态的改变会导致页面UI更新,所以需要重新渲染组件)。如果我们构建的组件不需要对状态进行存储,修改等操作的话使用无状态组件的效率会更高并且可以避免意想不到的问题。

React学习传送门

从零开始学习React——特点及开发工具(IDE)介绍从零开始学习React——JSX介绍从零开始学习React——组件介绍及创建方式从零开始学习React——React事件处理

在本文中我们主要介绍了React中有状态组件以及无状态组件的概念,并且我们了解了两者的区别以及引用场景。总结中我们将实际使用Props以及State进行组件的操作,通过实例来更深刻的了解React组件的有趣之处。



转载请注明:http://www.usdjo.com/lcbx/24084.html

  • 上一篇文章:
  • 下一篇文章: 没有了