您的位置：首页 > Web前端 > React

React创建组件的三种方式

2018-12-20 09:48 603 查看

使用函数式创建

import {render} from 'react-dom';
function Hello(props){
return (<div>{props.name}</div>)
}

render(<Hello name='yf' />,document.getElementById('root'))

使用React.createClass方式创建

import React from 'react';
import {render} from 'react-dom';
const Hello = React.createClass({
getInitialState:function(){
return {text:this.props.initialValue || 'placeholder'}
},
render:function(){
return (<div>
<input type='text' value={this.state.text} />
</div>)
}
})

render(<Hello initialValue='aaa' />,document.getElementById('root'))

使用React.Component创建

为了更好的实现复用，React极力推荐使用React.Component创建组件来取代React.createClass方法创建。是以ES6的形式来创建react的组件的

import React from 'react';
import {render} from 'react-dom';

class Hello extends React.Component{
constructor(props){
super(props);
this.state ={
text:this.props.initalValue || 'placeholder'
}
}
render(){
return (<div>
<input type='text' value={this.state.text} />
</div>)
}
}

render(<Hello initalValue = 'aaa' />,document.getElementById('root'))

JSX语法

const Hello = ()=>{
return (<div>
<p>这是一个段落</p>
</div>)
}

而这种JSX语法最终会被转换为React.createClass的方式被调用

const Hello = React.createClass({
render(){
return (<div>
<p>这是一个段落</p>
</div>)
}
})

//向下和解（Top-Down Reconciliation）

//最终转换的形式为DOM element形式

const Hello = ()=>({
type:'div',
props:{
children:{
type:'p',
children:'这是一个段落'
}
}
})

const Hello = React.createClass({
type:'div',
props:{
children:{
type:'p',
children:'这是一个段落'
}
}
})