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