react component 的创建方式

一、react写法

 

1`
React.createClass
1`
是react刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的React组件,其形式如下:

1import React,{PropTypes} from 'react' 2import ReactDom from ;react-dom; 3var SayHi = React.createClass({ 4 getInittialState(){ 5 return {} 6  }, 7  getDefaultProps(){ 8 return {} 9  }, 10  propTypes:{ 11 12  }, 13  render(){ 14    var name = this.props.name; 15    return ( 16      {from} says:hello {name}; 17    ) 18  } 19}) 20ReactDOM.render(,document.getElementById('demo')) 21

二、ES6写法    React.Component

1import React, { Component, PropTypes } from 'react'; 2import { Popover, Icon } from 'antd'; 3 4class InputControlES6 extends React.Component{ 5 constructor(pros){//初始化的工作放入到构造函数 6 super(pros); 7 this.state = {//初始state设置方式 8 visible:false, 9 text:props.initialValue || '默认值' 10 }; 11 12 // ES6 类中函数必须手动绑定 13 this.handleChange = this.handleChange.bind(this); 14 } 15 hide(){//因为是类,所以属性和方法之间不必添加都好 16 this.setState({ 17 visible:false, 18 }); 19 } 20 handleVisibleChange(visible){ 21 this.setState({ 22 visible 23 }) 24 } 25 handleChange(event) { 26 this.setState({ 27 text: event.target.value 28 }); 29 } 30 render(){ 31 const { dataurl } = this.props; 32 return ( 33 <div> 34 Type something: 35 <input onChange={this.handleChange} 36 value={this.state.text} /> 37 </div> 38 ) 39 } 40} 41 42InputControlES6.propTypes = { 43 initialValue: React.PropTypes.string 44}; 45InputControlES6.defaultProps = { 46 initialValue: '' 47}; 48

以上两者区别

A、React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确配置。

React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。

解决方案:this. handleClick

this. handleClick. bind( this) ; //构造函数中绑定

B、组件属性类型propTypes  及其默认props属性  defaultProps配置不同

React.createClass 在创建组件是,有关组件props 的属性类型及 组件默认的属性 会作为 组件实例的属性 来配置,其中defaultProps是使用   getDefaultProps 的方法是获取默认组件属性的

React.Component 在创建组件是配置这两个对应信息是,他们是作为组件类的属性,不是组件实例的属性,也就是所谓的类的静态属性来配置的。

C、React.createClass创建的组件,其状态state 是通过getInitialState 方法来配置组件相关的状态;React.Compnent 创建的组件,其状态state是在 constructor 中初始化组件属性一样的声明的

 

 

 

 

 

三、函数定义的无状态函数式组件

1function HelloComponent(props){ 2 return <div>Hello {props.name}</div> 3} ReactDOM.render(<HelloComponent name='component1' />,mountNode); 4

优点:1组件不会被实例化,整理渲染性能得到提升

2.组件不能访问到this

3.组件无生命周期

4.无状态组件智能访问输入的props

 

参考文档

https://www.cnblogs.com/wonyun/p/5930333.html

 

代码交流 2021