React
创建组件
React
创建组件有两种方式:构造函数和class关键字
- 构造函数:
第一种基本组件的创建方式(构造函数),就是一个最基本的组件,想要把组件放在页面中,可以把 构造函数的名称,当作 组件的名称,以HTML标签形式引入页面中即可
注意:React在解析所有的标签的时候,是以标签的首字母来区分的,如果标签的首字母是小写的,那么就按照 普通的 HTML 标签来解析,如果首字母是大写的,则按照 组件的形式去解析渲染,所以,组件的首字母必须大写
父组件向子组件传递数据
- 属性扩散(使用方法为…Obj,把该对象的所有属性,放到这个位置,然后在组件中,必须 显式的在构造函数参数列表中,定义props属性来接收,最后在返回的JSX标签中以props.属性的方式展示出来)
注意:通过props得到的任何数据都是只读的,不能重新赋值
- 将组件封装到单独的文件中(使用export default 组件名将创建的组件暴露出去 )
- class关键字
基于class关键字创建组件
- 使用 class 关键字来创建组件(通过extends关键字,继承React.component这个类,如果想要引用这个组件,可以把类的名称,以标签的形式,导入到JSX中使用)
class Person extends React.Component{
// 通过报错提示得知:在class创建的组件中,必须定义一个render函数
render(){
// 在render函数中,必须返回一个null或者符合规范的虚拟DOM元素
return <div>
<h1>这是用 class 关键字创建的组件!</h1>
</div>;
}
}
同样的,如果想要给组件添加一些属性(通过外界传递一些数据),首先也是在组件上(使用子组件的时候写明一些数据)写明属性,然后在组件的render中使用this.props.属性名获得相应的属性名称,并进行一些基本的处理。
注意:
- class方式定义的组件自身就带有porps属性,可以直接通过this.props来获得外界传递过来的数据,但是在function定义的组件中,如果想要使用props,必须在组件中先定义,否则无法直接使用
- 两种方式创建的组件(或者说只要是组件),组件的props,都是只读的
两种创建组件方式的对比
- 用构造函数创建出来的组件:专业的名字叫做“无状态组件”
- 用class关键字创建出来的组件:专业的名字叫做“有状态组件”
用构造函数创建出来的组件,和用class创建出来的组件,这两种不同的组件之间的本质区别就是:有无state属性!!!
有状态组件和无状态组件之间的本质区别就是:有无state属性!同时,class创建的组件,有自己的生命周期函数,但是function创建的组件,没有自己的生命周期函数;
问题:什么时候使用有状态组件,什么时候使用无状态组件
- 如果有一个组件需要存放自己的私有数据,或者需要在组件的不同阶段执行不同的业务逻辑,此时,非常适合使用class创建出来的组件
- 如果有一个组件,只需要根据外界传递过来的props,渲染固定的 页面结构即可,此时,非常适合使用function创建出来的无状态组件(使用无状态组件的一个好处是,由于剔除了组件的生命周期,所以,运行速度会相对快一些)