React创建组件及两种方式的对比

创建组件注意点：

• 创造组件，首字母大写，在需要调用的地方直接以标签形式调用
• 如果组件中return 一个 null，则标识此组件是空的，什么都不会渲染，在组件中必须 return 一个合法的JSX的虚拟DOM元素
• 不论是class还是普通function创建得组件，它们的props的都是只读的

index.js代码：

第一种：使用function构造函数创建的组件

代码如下：

调用组件：

第二种：使用class创建组件

代码如下：

将index.js中的代码进行修改

结果如下图：

使用class关键字创建组件注意点：

• 里面的rende()函数得作用，是渲染当前组件所对应得虚拟DOM元素
• 在class组件内部，this表示当前组件得实例对象
• 在class关键字创建得组件中，如果想使用外界传过来得props参数，不需接收，直接通过this.props.***访问即可

两种创建方式的不同点：

1. 使用class关键字创建的组件，有自己的私有数据和生命周期函数；使用function创建的组件，只有props，没有自己的私有数据和生命周期函数
2. 用function构造函数创建出来的组件，叫做无状态组件，用class关键字创建出来的组件，叫做有状态组件
3. 有状态组件和无状态组件之间的本质区别就是：有无state属性和有无生命周期函数
4. 组件中的props和state/data之间的区别：

• props中的数据都是外界传递过来的
• state/data中的数据，都是组件私有的；（通过ajax获取回来的数据，一般都是私有数据）
• props中的数据都是只读的，不能重新赋值
• state/data中的数据，都是可读可写的