浅析React自定义函数组件和class组件的用法

一、React组件化概念

1.一、组件的概念

React 应用都是构建在组件之上。

组件做为React的核心内容，是View的重要组成部分，每个View页面都由一个或多个组件构成，能够说组件是React应用程序的基石。在React的组件构成中，按照状态来分能够分为有状态组件和无状态组件。

1.二、组件的特色

组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁说起，特别是在MV*的框架中。

前端中的“组件化”这个词，在UI这一层一般指“标签化”，也就是把大块的业务界面，拆分红若干小块，而后进行组装。

狭义的组件化通常是指标签化，也就是以自定义标签（自定义属性）为核心的机制。

广义的组件化包括对数据逻辑层业务梳理，造成不一样层级的能力封装。

• 标准性

  任何一个组件都应该遵照一套标准，可使得不一样区域的开发人员据此标准开发出一套标准统一的组件。

• 组合性

  组件以前应该是能够组合的。咱们知道前端页面的展现都是一些HTML DOM的组合，而组件在最终形态上也能够理解为一个个的HTML片断。那么组成一个完整的界面展现，确定是要依赖不一样组件之间的组合，嵌套以及通讯。

• 重用性

  任何一个组件应该都是一个能够独立的个体，可使其应用在不一样的场景中。

• 可维护性

  任何一个组件应该都具备一套本身的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减小发生bug的概率。

二、自定义组件

2.一、函数组件

无状态函数式组件形式上表现为一个只带有一个 render() 方法的组件类，经过函数形式或者 ES6 箭头 function的形式在建立，而且该组件是无state状态的。具体的建立形式以下

import React from 'react';

//定义一个React组件
function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

2.二、class组件

React.Component 是以 ES6 的形式来建立react的组件的，是React目前极为推荐的建立有状态组件的方式，形式改成 React.Component 形式以下

import React from 'react';

//定义一个React组件
class App extends React.Component{
  render(){
    return (
      <div>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

在其余文件中引用组件

import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2.三、函数组件和class组件的区别

用构造函数建立出来的组件，叫作“无状态组件”；

用class关键字建立出来的组件，叫作“有状态组件”；

有状态组件和无状态组件之间的本质区别是有无state属性。

注意：

使用class 关键字建立的组件，有本身的私有数据（this.state）和生命周期函数；

使用function建立的组件，只有props，没有本身的私有数据和生命周期函数；

函数组件和类组件固然是有区别的，并且函数组件的性能比类组件的性能要高，由于类组件使用的时候要实例化，而函数组件直接执行函数取返回结果便可。为了提升性能，尽可能使用函数组件

区别	函数组件	class组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有