React组件
1、无状态组件和有状态组件
-
函数组件又叫做无状态组件,类组件又叫做有状态组件
-
状态(state)即数据
-
函数组件没有自己的状态,只负责数据展示(静态的)
-
类组件有自己的状态,负责更新UI,让页面能够跟用户进行交互(动态)
比如:计数器中的值从 0开始,点击按钮,对值进行加1操作,计数器中的值就是状态。
2、组件中的props特点
-
可以给组件传递任意类型的数据
-
props是只读的对象,只能读取属性的值,无法修改对象
-
注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props。
3、组件之间通讯的三种方式
1️⃣ 父组件传递数据给子组件
-
父组件中要提供传递的state数据
-
在父组件中,给子组件标签添加属性,值为state中的数据
-
子组件中通过props接收父组件中传递的数据
2️⃣ 子组件传递数据给父组件
思路:利用回调函数,父组件提供回调函数,子组件调用回调函数,并且把将要传递的数据作为回调函数的参数进行传递。
-
父组件提供一个回调函数(用于接收数据)