html组件创建的方法,怎么创建react组件

怎么创建react组件

创建react组件有3种方式，分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。

一、无状态函数式组建

无状态函数式组件，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层。

举个例子//顶层代码

import React,{Component} from 'react';

import ReactDOM from 'react-dom';

import Button from './component/props'

ReactDOM.render(

,

document.getElementById('body')

)

//底层代码

import React,{Component} from 'react';

export default function Button(props){

let {name} = props

const sayHi = () => {

alert(`Hi ${name}`);

}

return (

Hello, {name}

Say Hi

)

}

二、es5原生方式(React.createClass)

React.createClass 是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件

举个例子const Button = React.createClass({

propTypes: { //②属性类型

name: React.PropTypes.string

},

defaultProps: { //③属性默认值

name: ''

},

getInitialState: function() { //①初始状态

return {

name: this.props.name|| 'name'

};

},

sayHi() {

alert(`Hi ${name}`);

}

render() {

return (

Hello, {name}

Say Hi

);

}

});

三、继承React.Component(ES6形式)

React.Component 是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式。

举个例子export default class Button extends React.Component {

static propTypes = { //②属性类型

name: React.PropTypes.string

};

static defaultProps = { //③属性默认值

name: ''

};

constructor(props) {

super(props);

this.state = { ①初始状态

name: props.name|| 'name'

};

// ES6 类中函数必须手动绑定

this.sayHi= this.sayHi.bind(this);

}

sayHi() {

alert(`Hi ${name}`)

}

render() {

return (

Hello, {name}

Say Hi

);

}

}

本文来自React答疑栏目，欢迎学习！