版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
创建组件注意点:
- 创造组件,首字母大写,在需要调用的地方直接以标签形式调用
- 如果组件中return 一个 null,则标识此组件是空的,什么都不会渲染,在组件中必须 return 一个合法的JSX的虚拟DOM元素
- 不论是class还是普通function创建得组件,它们的props的都是只读的
index.js代码:
第一种:使用function构造函数创建的组件
代码如下:
调用组件:
第二种:使用class创建组件
代码如下:
将index.js中的代码进行修改
结果如下图:
使用class关键字创建组件注意点:
- 里面的
rende()
函数得作用,是渲染当前组件所对应得虚拟DOM元素 - 在class组件内部,this表示当前组件得实例对象
- 在class关键字创建得组件中,如果想使用外界传过来得props参数,不需接收,直接通过this.props.***访问即可
两种创建方式的不同点:
- 使用
class
关键字创建的组件,有自己的私有数据和生命周期函数;使用function
创建的组件,只有props,没有自己的私有数据和生命周期函数 - 用function构造函数创建出来的组件,叫做
无状态组件
,用class关键字创建出来的组件,叫做有状态组件
有状态组件
和无状态组件
之间的本质区别就是:有无state属性和有无生命周期函数
- 组件中的
props
和state/data
之间的区别:
- props中的数据都是外界传递过来的
- state/data中的数据,都是组件私有的;(通过ajax获取回来的数据,一般都是私有数据)
- props中的数据都是只读的,不能重新赋值
- state/data中的数据,都是可读可写的