react 创建组件的几种方式以及特点

1.无状态函数式组件

它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作。特点:

1.1. 组件不会被实例化,整体渲染性能得到提升

因为组件被精简成一个render方法的函数来实现的,由于是无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。

1.2. 组件不能访问this对象

无状态组件由于没有实例化过程,所以无法访问组件this中的对象,例如:this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

1.3. 组件无法访问生命周期的方法

因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

1.4. 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用

具体的创建形式如下:

function HelloComponent(props) {

  return <div>Hello {props.name}</div>

}

2 React.createClass 不建议使用

3.class extends React.Component

是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式,格式如下:

class InputControlES6 extends React.Component { 
constructor(props) { 
super(props); 
// 设置 initial state 
this.state = { 
text: props.initialValue || 'placeholder' 
}; 
// ES6 类中函数必须手动绑定 也可以使用箭头函数
this.handleChange = this.handleChange.bind(this); 
} 
handleChange(event) { 
this.setState({ text: event.target.value }); 
} 
render() { 
return (
<div> Type something: <input onChange={this.handleChange}   value={this.state.text}  /></div> ); 
} 
}

 

4.使用场景

1、 如果组件有内部状态或者是refs, 推荐使用 class extends React.Component 

 

2、 如果组件没有状态或是没有引用refs, 推荐使用普通函数(非箭头函数)而不是类

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章