React组件理解

什么是组件

组件允许我们将应用的UI拆分成独立的、可复用的模块，其实也就是可复用的代码片段。React应用程序就是由组件来构建的，也就是说React应用的基石！

React中的组件类别

• class组件

• 函数组件

class组件

这个组件主要是ES6中的写法。我们的一个class组件的基本结构如下：

class MyComponent extends React.Component {

constructor(props) {

super(props)

}

render () {

return (

React

)

}

}

• 这里要注意，constructor函数是可选的，当你没有state时，即没有该组件内部需要使用的自己的数据时，constructor函数可以省略。但是render函数一定不能省略，且render函数内部要通过return 返回一个React组件 或者是 null.

• 第二点要注意的是，对于ES6中的class，当使用constructor函数时，内部要调用super()函数。

• 第三点，我们发现class 继承了React.Component，那么这个React.Component是每一个React组件都会用到的一些函数，属性等的一个抽象提取。继承的思想中，父组件的作用不正是要给子组件们提供他们均可访问的属性和方法吗！

函数组件

函数组件就像对简单了，形式如下：

function MyComponent (props) {

return

React

}

组件的通性：

• React中要求自定义组件名一定要以大写字母开头，这是为了区别原生HTML标签和自定义组件。如果以小写字母引用自定义组件的话，那么会出错，会因为把自定义组件解析为HTML标签而出错。

• 两种组件都接受一个参数：props .这是因为我们在调用组件时，可以对组件进行数据传递，上层组件传递过来的数据可以通过props来进行获取访问。

组件的调用

每次我们引用一个组件时，比如：

return

这种形式，那么会做什么操作呢？

现在先简单了解一下：

会找到相应的组件，如果为函数组件直接调用，这时候会返回React元素。如果为class组件，会创建一个该组件的一个实例（等价于ES6中的 new MyComponent()）

有状态组件和无状态组件

状态，简单理解就是数据的另一种称呼。在react组件中，状态为state。状态只会存在于class组件中，函数组件是没有状态的。对于class组件，先前说了，constructor函数可以省略。当有状态时，其是不可以省略的。

class MyComponent extends React.Component {

constructor(props) {

super(props);

this.state = {

}

}

render () {

return ....

}

}

如上所示，this.state即为定义的状态。

为什么使用state

• react中的组件是一个可服用的具有一定功能的代码块。那么，他就会有一定的处理逻辑，比如说，在一个定义的组件中可能会进行数据的请求，处理等操作，这个时候我们就要对这些数据进行保存。因此，引入了一个state对象来保存所有的数据。这样的话，就不用一次性声明多个变量了，既方便管理，又方便操作。

  其实，在javascript good parts 一书中，道格拉斯也推荐，当你的全局变量过多时，可以通过创建对象字面量的形式来管理数据。这样的话，你的全局变量就会减少很多。

为什么在constructor中使用this.state

因为组件是复用的，上面也说到了，每次调用class组件时，其实就是创建了一个实例，那么既然我想在每个组件中用到我的state，那么把这个state定义到this上是必然的。
加粗样式