react建立元件的三種方式及他們的異同點介紹:
一、函數式元件
react教學)
1、語法function myConponent(props) { return `Hello${props.name}` }
var myCreate = React.createClass({ defaultProps: { //code }, getInitialState: function() { return { //code }; }, render:function(){ return ( //code ); } })
es6方式class:
1、語法:class InputControlES6 extends React.Component { constructor(props) { super(props); this.state = { state_exam: props.exam } //ES6类中函数必须手动绑定 this.handleChange = this.handleChange.bind(this); } handleChange() { this.setState({ state_exam: 'hello world' }); } render() { return( //code ) }; }
function App(props) { function handleClick() { props.dispatch({ type: 'app/create' }); } return <div onClick={handleClick}>{props.name}</div> }
class App extends React.Component { handleClick() { this.props.dispatch({ type: 'app/create' }); } render() { return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div> } }
import React, { useState } from 'react'; function App(props) { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <div onClick={handleClick}>{count}</div> }
class App extends React.Component { state = { count: 0 } handleClick() { this.setState({ count: this.state.count +1 }) } render() { return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div> } }
以上是react創建元件的三種方式分別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!