首页 1 2 3 4 5 6 7

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> ); 
} 
}