对React 组件的理解

什么是组件？

在 React 当中元素和组件是两个不同的概念，组件是构建在元素的基础之上的。React 官方对组件的定义，是指在 UI 界面中，可以被独立划分的、可复用的、独立的模块。

如何定义组件？

1、函数定义组件，返回 React 元素的方法即可：

function App(){
    return<div>Hello,World!</div>
}

2、类定义组件：

class Com extends React.Components{
   render(){
       return<div>Hello,world!</div>
     }
} 

展示与容器组件：

1、展示组件：
（1）主要负责组建内容如何展示；
（2）从 props 接收父组件传递的数据；
（3）大多数可以通过函数定义组件声明；
2、容器组件
（1）主要关注组件数据如何交互；
（2）拥有自身的 state，从服务器获取数据，或与 redux 等其他数据处理模块协作；
（3）需要通过类定义组件声明，并包含生命周期函数和其他附加方法；

有状态与无状态组件：

1、有状态组件：
什么是有状态？意思是这个组件能够获取储存改变应用或组件本身的状态数据，也就是state，我们可以有状态组件当中对 this.state 的初始化，或 this.setState 方法的调用等等。
2、无状态组件
无状态组件一般只接收来自其他组件的数据。组件中一般只能看到对 this.props 的调用，通常可以用函数定义组件的方式声明。

受控与非受控组件：

1、受控组件：
受控组件的值由 props 或 state 传入，用户在元素上交互或输入内容会引起应用 state 的改变。在 state 改变之后重新渲染组件，我们才能在页面中看到元素中值的变化。
2、非受控组件
类似于传统的 DOM 表单控件，在页面输入内容并不会直接引起 state 的变化，也不会直接为非受控组件传入值。想要获取非受控组件的值需要使用 ref 属性，也可以使用 defaultValue 这个属性来为其指定一次性的默认值。

逆战班