react中有状态组件和无状态组件的区别和使用规则

    xiaoxiao2023-09-29  179

    state: 用于改变组件内容状态的值(动态) props: 用于组件通信进行传值

    无状态组件:其实就是一个函数 有状态组件,是一个class类,继承了类的组件是有状态组件,App.js就是一个有状态的组件

    区别: 1.有状态组价是可以使用state的,只有继承了Component的组件才可以拥有state进行一些数据的存储和管理,同时可以拥有props 2.但是无状态组件不存在state,只会有props 最重要的区别是: 有状态组件拥有生命周期这些函数,如果是无状态组件,那么就没有生命周期的函数

    因为数据的更改都是根据状态进行更改的,我们可以使用props进行组件间的通信和传值,如果需要改变某些数据的话,我们使用的是state,数据会发生变化就会触发生命周期的函数

    有状态和无状态组件的使用规则:

    如果是想要存储一些数据并且想要对这些数据进行一些增删改查的话,那么就应该去使用有状态的组件如果只是单纯的处理一些逻辑,而不需要改变数据的值就使用无状态组件

    我们更多的应该是去使用无状态的组件,因为如果是有状态组件的话,它就会去触发生命周期所对应的一些函数,一旦它触发生命周期的函数,它就会影响当前项目的运行,所以在尽可能的情况下都使用无状态组件,除非对当前的组件不是很清晰是否要存储数据或者说已经确定了要进行一些数据存储和修改,那么这个时候就选择有状态的组件。

    一般状态会通过父组件进行传递,这样就可以进行统一的数据管理,在父级进行一个集中的数据管理

    有状态组件接收传过来的值的话,取用都是用this.state.属性或者是this.props.属性,无状态组件则是直接使用props.属性

    以上是在没有使用redux的情况下,如果使用了redux的话,就会在redux中进行状态管理

    最新回复(0)