React组件
-
1、使用函数定义一个组件:
function Hello(props) { return <h1>Hello World!</h1>; } ReactDOM.render( <div> <Hello></Hello> </div> , document.getElementById("app") )
-
在组件中必须返回一个虚拟DOM元素
-
在使用时直接把组件名称以标签的形式放在页面上
-
在构造函数中使用
props
形参接收外界传递进来的数据
const user = { name: "Shaw", age: 19, sex: "female" } ReactDOM.render( <div> <Hello name={user.name} age={user.age} sex={user.sex}></Hello> </div> , document.getElementById("app") )
2. 使用class关键字创建组件
-
es6中
class
关键字的用法//创建一个动物类 class Animal{ //这是类中的构造器 //每一个类中都有一个构造器 //如果我们没有指定构造器,那么可以认为每个类内部有个隐形的空构造器 constructor(name, age){ this.name = name; this.age = age; } }
-
class
中的静态属性与实例属性-
静态属性指的是 Class 本身的属性,即
Class.propName
,挂载给构造函数 -
实例属性指的是定义在实例对象(
this
)上的属性,挂载给实例对象 -
(不用
class
关键字)//实例属性 function Person(name, age){ this.name = name; this.age = age; } //静态属性 Person.number = "111111";
-
(使用
class
关键字)class Animal{ //实例属性 constructor(name, age){ this.name = name; this.age = age; } //静态属性 static info = "animal";
-
-
class
中的静态方法与实例方法-
(不用
class
关键字) -
(使用
class
关键字)class Animal{ howl() { console.log("这是animal的实例方法"); } static show() { console.log("这是animal的静态方法") } }
-
-
class
中的继承- 我们可以使用
extends
关键字实现子类继承父类
class Person { constructor(name, age){ this.name = name; this.age = age; } //公共实例方法 hello() { console.log("Hi"); } } //在class中可以使用extends关键字实现子类继承父类 class American extends Person{ } const a1 = new American("Jack", 20); class Chinese extends Person{ } const c1 = new Chinese("Shaun", 18);
-
super
函数-
当子类通过
extends
关键字继承了父类,那么在子类的constructor
构造函数中必须优先调用super()
函数(规定),super
即是父类中构造器的引用 -
注意!!!!!!!!!!!
当子类内部没有我们手写的构造器时,name、age参数将会自动被传给父类
但是如果我们自己定义了子类的
constructor
,那么首先我们必须使用super
函数引用父类构造器;但这时由于我们自己写的constructor
没有接收到参数,所以我们必须自己手动传class American extends Person{ //手动传参数进constructor constructor(name, age){ //手动传参数进父类构造器 super(name, age); } }
-
- 我们可以使用
-
使用
class
关键字创建组件- 如果我们要使用
class
创建组件,那么必须让自己的组件继承自React.Component
- 必须包含
render()
函数,渲染当前组件内部的虚拟DOM结构,必须有return
返回值 - 在
class
关键字创建的组件中,如果想使用外界传递过来的props
参数,无需接受,可直接通过this.props.XXX
访问
class Movie extends React.Component { render(){ return <div> this is a component --{this.props.name} --{this.props.age} </div> } constructor(){ super(); } }
- 如果我们要使用
3. 两种方法创建组件的区别
使用
class
关键字创建的组件,有自己的私有数据(this.state)和生命周期函数使用
function
创建的组件,只有props
,没有自己的私有数据和生命周期函数class Movie extends React.Component { constructor(){ super(); //私有数据 this.state = { msg: "大家好,我是class创建的Movie组件", }; } render(){ ... } }
-
用构造函数创造出来的组件叫做无状态组件(用的不多)
-
用
class
关键字创造出来的组件叫做有状态组件(state) -
使用场景
- 如果一个组件需要有自己的私有数据,推荐使用
class
关键字创造 - React官方:无状态组件由于没有自己的私有数据和生命周期函数,运行效率会比有状态组件高
- 但其实我们一般用的都是有状态组件
- 如果一个组件需要有自己的私有数据,推荐使用
-
props
与state
的区别props
中的数据时外界传递来的;state
中的数据是组件私有的(通过AJAX获取的数据一般是私有的)props
中的数据是只读的,state
中的数据是可以修改的
-