react组件的创建

Posted 2020-12-29 taoland

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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}/>
    )
    }