React建立元件的三種方式

使用函數式建立

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:'這是一個段落'
        }
    }
})           

作者：yolanda_筱筱

連結：https://juejin.cn/post/6844903743587106824

來源：稀土掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。