2025年react组件三大属性（react 组件三种创建）

科技前沿 • 2025-06-07 16:38 • 阅读 63

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div>

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

在React中，一个组件中要读取当前状态需要访问 this.state, 而 state 是可以被修改的，但是，要更新数据直接给 this.state 赋值是不可行的，必须要使用 setState（）

（1）setState 不会立刻改变React组件中state的值.

（2）setState 通过触发一次组件的更新来引发重绘.

（3）多次 setState 函数调用产生的效果会合并。

react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

props属性的特点

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外向组件内传递数据（只读 read only）

5.对props中的属性值进行类型限制和必要性限制

类组件：

函数组件：

props 属性和 state 属性的区别

定义：组件内的标签可以定义ref属性类标识自己，有点类似与JS中的id

React文档中再三强调，请不要过度使用refs，所以当我们可以用dom原生对象解决时，尽量不要使用refs 依照之前的写法，首先是给出类组件和函数组件中refs的写法

ref 的三种形式

【官方不推荐】

【目前官方最推荐的一种】

函数组件的写法

到此这篇关于深入理解React 三大核心属性的文章就介绍到这了,更多相关React 核心属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！