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

posted @ 2018-08-12 17:26  dx39066  阅读(225)  评论(0编辑  收藏  举报