react元件的建立

最近專案接觸react和rn，之前會一些vue和小程式，起初寫react是很難受的，尤其是jsx的寫法，不過2周過後感覺寫起來有點舒服了。。。

目前react的元件一共有3種方式：React.createClass,React.Component,函式式

React.createClass(API已經移除)

這是早期react元件的建立方式，如果你看的文章是幾年之前寫的，很多都是這種方式(比如阮老師這篇React 入門例項教程)

• React.createClass現在這一API已經移除，如果非要使用的話需要單獨引入名為 create-react-class 的包）
• 栗子

    var LikeButton = React.createClass({
      getInitialState: function() {
        return {liked: false};
      },
      handleClick: function(event) {
        this.setState({liked: !this.state.liked});
      },
      render: function() {
        var text = this.state.liked ? `like` : `haven`t liked`;
        return (
          <p onClick={this.handleClick}>
            You {text} this. Click to toggle.
          </p>
        );
      }
    });

    ReactDOM.render(
      <LikeButton />,
      document.getElementById(`example`)
    );

React.Component

使用ES6的語法，是React.createClass的替代，也是目前用的最多的一種方式

• 栗子

class LikeButton extends Component {
    constructor(props) {
        super(props)
        this.state = { like: false }
    }
    componentWillMount (){...}
    componentDidMount (){...}
    handleClick() {
        this.setState({ like: !this.state.like })
    }
    render() {
        let text = this.state.like ? `like` : `don`t like`;
        return (
            <p onClick={() => { this.handleClick() }}>
        you {text} this.click to toggle
        </p>
        )
    }
}

• 繫結this的方式：和createClass不同,React.Component是不會自動繫結this的，所以需要我們手動，一般有下面幾種方式
  • constructor中繫結

   constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this); //建構函式中繫結
    }
  然後可以<p onClick={this.handleClick}>

  • 使用時繫結

      <p onClick={this.handleClick.bind(this)}>

  • 箭頭函式

      <p onClick={() => { this.handleClick() }}>

  無狀態函式式

  這種元件不會被例項化,只負責根據傳入的props來展示，不涉及到state，生命週期和this。在大部分React程式碼中，大多陣列件被寫成無狀態的元件，通過簡單組合可以構建成其他的元件等；這種通過多個簡單然後合併成一個大應用的設計模式被提倡。

• 栗子

//子元件
const LikeButton=(props)=>{
    let text = props.like ? `like` : `don`t like`;

    return(//注意不是props.handleClick()
        <p onClick={props.handleClick}>you {text} this.click to toggle</p>
    )
}
//父元件
constructor(props) {
        super(props)
        this.state = {
            like:false
        }
    }
    handleClick() {
        this.setState({ like: !this.state.like })
    }
    render() {
        return ( //傳入props
        <LikeButton handleClick={()=>{this.handleClick()}} like={this.state.like}/>
    )
    }

總結

大多陣列件都可以使用函式式元件，因為他很簡潔，沒有例項化過程和生命週期所以效能非常出色；而其他情況可以使用React.Component;至於React.createClass就可以放棄了；

最後

大家好，這裡是「 TaoLand 」，這個部落格主要用於記錄一個菜鳥程式猿的Growth之路。這也是自己第一次做部落格，希望和大家多多交流，一起成長！文章將會在下列地址同步更新……
個人部落格：www.yangyuetao.cn
小程式：TaoLand