组件定义的三种方式
创建形式如下:
- 无状态函数式组件
function App(props) {//props Sebastian return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
特点:组件不会被实例化,整体渲染性能得到提升。组件不能访问
this
对象。组件无法访问生命周期的方法 。无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用。
React.createClass
`React.createClass`是react刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的React组件,其形式如下:
var App= React.createClass({ propTypes: {//定义传入props中的属性各种类型 initialValue: React.PropTypes.string }, defaultProps: { //组件默认的props对象 initialValue: '' }, getInitialState: function() {//组件相关的状态对象 return { text: this.props.initialValue || 'placeholder' }; }, handleChange: function(e) { this.setState({ text: e.target.value }); }, render: function() { return ( <div> Type something: <input onChange={this.handleChange} value={this.state.text} /> </div> ); } });
React.createClass
,这些组件是要被实例化的,并且可以访问组件的生命周期方法。
React.createClass特点:
- 绑定函数方法导致不必要的性能开销,增加代码过时的可能性。
- React.createClass的mixins不够自然、直观
React.Component
React.Component
是以ES6的形式来创建react的组件的(react推荐当前方式)class App extends React.Component { constructor(props) { super(props); this.state = {// 设置 initial state text: '' }; this.handleChange = this.handleChange.bind(this);//绑定this,否则在事件中this指向null } handleChange(event) { this.setState({ text: event.target.value }); } render() { return ( <div> <input onChange={this.handleChange} value={this.state.text} /> </div> ); } }
- React.createClass与React.Component区别
1.this
React.createClass
创建的组件,直接使用this.method
即可.
React.Component
创建的组件,this不能获取当前组件实例对象,(可以在调用时使用method.bind(this)
来完成绑定.)2.组件属性类型propTypes及其默认props属性defaultProps配置不同
React.createClass:
作为组件实例的属性
React.Component:
作为组件类的属性,所谓的类的静态属性。3.组件初始状态state的配置不同
React.createClass
其状态state是通过getInitialState
方法来配置组件相关的状态;React.Component
其状态state是在constructor
中像初始化组件属性一样声明的。无状态组件内部是可以使用
ref
功能的,可以将ref内容保存到无状态组件内部的一个本地变量中。