本文转载自微信公众号《JS每日一问》，作者慧慧。转载本文请联系JS每日一问公众号.1.什么是React组件？组件是将图形和非图形的各种逻辑抽象成一个统一的概念（组件）来实现开发的模式。在React中，一个类和一个函数可以看作是Vue系列中的一个组件，我们理解组件的优势：降低整个系统的耦合度，并且保持接口不变，我们可以通过更换不同的组件来快速完成需求，比如输入框，可以换成日历，时间，范围等，方便组件的具体实现和调试。由于整个系统是由组件组成的，当出现问题时，可以通过故障排除直接拆除该组件，也可以根据报错的组件快速定位问题。之所以能够快速定位，是因为每个组件都是低耦合的，职责单一，所以逻辑上会比分析整个系统更简单，提高可维护性。由于每个组件都有单一的职责，并且组件在系统中被重用，因此可以优化代码。获取系统整体升级二、如何构建React目前组件的创建主要分为三种方式：通过React.createClass方法继承React.Component创建函数式创建函数式创建在ReactHooks出来之前，函数式Components可以看成是无状态组件，只负责根据传入的props显示view，不涉及state的操作。大多数组件都可以写成无状态组件，其他组件可以通过简单的组合来构建。React中，通过函数简单的创建一个组件的例子如下：functionHelloComponent(props,/*context*/){return
Hello{props.name}
}createClass方法是React最先推荐的创建组件的方式，目前这种创建方法使用的并不多。像上面说的通过函数创建组件的方法，最终会通过babel转化为React.createClass，转化为如下：functionHelloComponent(props)/*context*/{returnReact.createElement("div",null,"Hello",props.name);}因为上面的写法太复杂了，所以在reacthooks出来之前基本不会用来继承React.Component来创建相同的state组件只能通过继承自React.Component来创建。有状态组件，即组件内部维护的数据，通过创建类的方式通过this.state来访问。当调用this.setState修改组件状态时，组件会再次调用render()方法重新渲染创建一个时钟实例，继承React.Component如下：classTimerextendsReact.Component{constructor(props){super(props);this.state={seconds:0};}tick(){this.setState(state=>({seconds:state.seconds+1}));}componentDidMount(){this.interval=setInterval(()=>this.tick(),1000);}componentWillUnmount(){clearInterval(this.interval);}render(){return(Seconds:{this.state.seconds}
);}三、区别因为React.createClass的创建方式过于复杂，不推荐使用，函数式创建和类组件创建的区别主要是创建的组件是否需要是有状态组件：对于一些无状态的组件创建，推荐使用函数式创建。由于reacthooks的出现，函数式组件创建的组件也可以通过hooks的方式做成有状态的组件。另外目前推荐函数式编程，所以推荐使用函数式的方式来创建组件。考虑到组件选择的原则，可以使用无状态组件然后使用无状态组件参考https://react.docschina.org/