react创建组建的四种方式

2019年9月18日 148次阅读 来源: JeremyChen

原由：写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种(createClass, component, PureComponet,Stateless Functional Component)，启发来自于不知的博客呀，有兴趣的人可以去看看他的博客！

叙述： 我们在用react的时候考虑最多的其实就是如何策划组建的划分，组建的嵌套，能够做到更省时、省力。做过了一个react的项目，目前依旧在继续，一上来我们就使用了es6的语法堂，用component来，仔细看过官方文档后，发现不用es6语法的同时只能使用createClass。在写组建的同时我们也都会说到这两个词语，状态组建和pure组建（纯函数）。今天就来大概介绍一下各自的特点：

一、createClass

var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //属性校验 (string, number, bool, func, array, object...... )
  },
  
  getDefaultProps: function() {
    return {
      name: 'Mary' 
    };
    // 初始化props
  }, 
    
  getInitialState: function() {
    return {count: this.props.initialCount}; 
    //初始化props
  },
  
  handleClick: function() {
    //.....
  },
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
module.exports = FirstComponent;

这种方式下，组件的props、state等都是以对象object属性的方式组合在一起，在createClass中，React对属性中的所有函数都进行了this绑定，也就是如上面的hanleClick其实相当于handleClick.bind(this) 。

二、component es6语法堂

import React from 'react';
class FirstComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
       count: props.initialCount
    };
  }
  static propTypes ＝ {
    name: React.PropTypes.string
  }
  statice props = {
    name: 'Mary'
  }
  handleClick() {
    //点击事件的处理函数
  }
  
  render() {
    return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
  }
}
export default FirstComponent;

这段代码指定了FirstComponent继承extends React.Component的属性，通过constructor来构函数，初始化state，this的绑定也在这里面进行，因为这种方式react并没有对this进行绑定，所有需要手动输入绑定。这种方法创建组建因为继承了component的属性，因此这里面可以写react的所有生命周期函数,例如componentDidMount等系列，并在函数内容通过this.state来改变状态state，dom就会随即刷新，也可以手动静止更新，具体的细节是在某个生命周期中进行，具体的可以看看我的这篇文章

三、PureComponet

上面的方法中都不是纯函数的构造，因为state是可以在内容起到作用的，内容就可以控制是否重新渲染状态。
而这种方法我也很少用过，看过很多文章才明白！其实大多数情况下我们也很难用到这样的方式，在官网的位置都不是很起眼，所以就大概复述一下－不知－博客的内容吧！

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

大多数情况下， 我们使用PureComponent能够简化我们的代码，并且提高性能，但是PureComponent的自动为我们添加的shouldComponentUpate函数，只是对props和state进行浅比较(shadow comparison)，当props或者state本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的props和state发生了变化，但组件却没有更新的问题。当然还是有解决的方法的，所以建议还是少用。

四、Stateless Functional Component

上面提到的方法都包含了内部有交互和状态的复杂的组建，如果组建本身就是用来展示的，那么就可以用stateless的方法来创建组建。

import React from 'react';
const Button = ({day,increment}) => {
  return (
    <div>
      <button onClick={increment}>Today is {day}</button>
    </div>
  )
}

Button.propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
}

export default Button;

如果像更改显示的结果只能改变传入的props;

以上就是四种创建组建的方式，来点个人的建议吧！

现在我公司的项目就是采用了第四种方式来进行组建的创建，那么肯定会有人问，那么请求接口，返回数据重新渲染怎么做，肯定还是会有一部分用到es6创建的方法，一部分采用stateless的方法，当然这种也是可以的，不过看起来就会稍微的有些乱，用两种方式定义组建也并不是一个好的团队应该看到的。所以给大家推荐一些react+webpack+react-redux 以及vda这种方式，具体的资料可以参考这个上面说的很详细，这种方式的优点就在于将逻辑和展示完全的分开了。

最后大家可以根据自己的喜欢以及项目的要求选择一种方式来进行组建的创建，方便自己的记忆，也供大家参考使用，同时也来提一下更好的方法。

参考：
http://www.cnblogs.com/Unknw/…
https://segmentfault.com/a/11…

    原文作者：JeremyChen
    原文地址: https://segmentfault.com/a/1190000009205008
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞