2026年react组件写法（react组件三大属性）

组件是封闭的，接收外部数据应该通过props来实现
函数组件通过参数props来接收数据，props是一个对象；类组件通过this.props接收数据。
传递数据：在组件标签上添加属性

函数组件

类组件

在继承类的构造函数中必须调用super函数，super代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数，否则会报错。但是super函数内的this指向的是当前类的实例。

构造器是否接受 props，是否传递给 super，取决于是否希望在构造器中通过 this访问props。

当构造器中接收了props参数，super没有传递props，此时是，当然可以正常使用props（前边不加this）
当构造器中接收了props参数，super也传递props，可以通过this.props拿到对象。

原因：类组件会继承，而Component的源码是：

当我们在类组件中调用super，实际上是在执行父类的构造函数，如果没有将props传入super函数，那么在子类的构造函数中，this.props是undefined。

为什么仍然可以在 render和其他方法中访问。因为React 会在构造函数被调用之后，会把 props 赋值给刚刚创建的实例对象。

有状态组件和无状态组件

函数组件又叫做无状态组件，函数组件没有自己的状态，只负责数据的静态展示。
类组件又叫做有状态组件，类组件有自己的状态，负责更新UI，让页面动起来。
状态（state）就是数据，是组件内部的私有数据，只能在组件内部使用。

每个组件都有state,它的值是对象类型；组件state属性的初始化放在构造方法中。

状态是可变的:
注意不要直接通过this.state.x = y 修改state中的数据，这是错误的写法.
etState的作用：

setState

执行setState()的位置?

在react控制的回调函数中: （异步）
- 生命周期勾子，react事件监听回调（合成事件）
非react控制的异步回调函数中: （同步）
定时器回调，原生事件监听回调， promise回调

setState是异步还是同步？

的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的。只是在 React 的函数实现中，会根据 (默认是 false) 变量判断是否直接更新还是放到队列中稍后更新。然后有一个函数，可以修改为 true，当 React 调用事件处理函数之前，或者生命周期函数之前就会调用函数，这样的话，setState 就不会同步更新 this.state，而是放到更新队列里面后续更新。

这样你就可以理解为什么原生事件和里面调用 this.state 会同步更新了，因为通过这些函数调用的 React 没办法去调用 batchedUpdate 函数将 isBatchingUpdates 设置为 true，那么这个时候 setState 的时候默认就是 false，那么就会同步更新。

props 是组件对外的接口，state 是组件对内的接口。

主要区别：

State是可变的，是一组用于反映组件UI变化的状态集合。
而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。

refs是弹性文件系统，在React中可以获取React素或DOM素。

我们在日常写React代码的时候，一般情况是用不到Refs这个东西，因为我们并不直接操作底层DOM素，而是在render函数里去编写我们的页面结构，由React来组织DOM素的更新。凡事总有例外，总会有一些很奇葩的时候我们需要直接去操作页面的真实DOM，这就要求我们有直接访问真实DOM的能力，而Refs就是为我们提供了这样的能力。

React.createRef

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是专人专用的:

ref的绑定

当 ref 属性用于 HTML 素时，使用 React.createRef()或者React.useRef() 创建的 ref 接收底层 DOM 素作为其 current 属性。
当 ref 属性用于 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
你不能在函数组件上使用 ref 属性，因为他们没有实例。函数组件可以使用useRef()，它所返回的对象在组件的整个生命周期内不变。

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注Java架构师必看的更多内容!

今天的文章 2026年react组件写法（react组件三大属性）分享到此就结束了，感谢您的阅读。