优秀的编程知识分享平台

网站首页 > 技术文章 正文

04 React组件的状态(state)和属性(props)

nanyue 2024-08-05 19:52:31 技术文章 7 ℃

状态(state)

在创建组件时声明组件状态,其结构是一个普通的JavaScript对象,在组件内更新状态可以使用setState函数,状态是组件内管理值的集合,当使用setState函数更改组件状态时,React会重新渲染组件,如果任何子组件继承此状态为属性props,则所有子组件也会重新渲染。渲染是指调用组件的render方法

直接修改state对象,不通过setState方法来修改,不会触发组件的重新渲染,尽管直接更改state变量不会触发组件的重新渲染,但是React中提供了一种方法,可以在状态变量更改后强制更新,此方法称为forceUpdate。

setState是异步更新数据,可以多次调用setState,只会触发一次重新渲染。

组件根据是否具有state,分为有状态组件和无状态组件,有状态的组件使用React.Component(类组件)方式创建,无状态组件通过函数组件创建。

对于无状态组件,输入输出数据完全由props决定,如果props类型为Object,还可以使用ES6提供的解析赋值。

无状态组件一般会搭配高级组件(简称HOC)一起使用,高阶组件主要用来托管state。无状态组件在被React调用之前,组件还没有被实例化,所以它不支持ref特性。


属性(props)

在创建组件时,属性作为参数由父组件传递下来,与状态不同,属性在组件内部无法更新,即状态是可变的,属性是不可变的。

父组件数据通过props传递到子组件,如果父节点与props相对应数据值发生了改变,那么其所有使用改值的子节点将会执行重新渲染操作,既子组件的render方法会调用。

props对于使用它的组件来说是只读的,如果想要修改props,只能通过组件的父组件修改。

最近发表
标签列表