react 调用组件方法_React躬行记（3）——组件

　　组件（Component）由若干个React元素组成，包含属性、状态和生命周期等部分，满足独立、可复用、高内聚和低耦合等设计原则，每个React应用程序都是由一个个的组件搭建而成，即组成React应用程序的最小单元正是组件。

一、构建

　　目前推崇的构建组件的方式总共有两种：类和函数，而用React.createClass()构建组件的方式已经过时，本节也不会对其做讲解。

1）类组件

　　通过ES6新增的类构建而成的组件必须继承自React.Component，并且需要定义render()方法。此方法用于组件的输出，即组件的渲染内容，如下代码所示。注意，render()是一个纯函数，不会改变组件的状态，并且其返回值有多种，包括React元素、布尔值、数组等。

class Btn extends React.Component {
    
  render() {
    
    return <button>提交</button>;
  }
}

2）函数组件

　　使用函数构建的组件只关注用户界面的展示，既无状态，也无生命周期。其功能相当于类组件的render()方法，但能接收一个属性对象（props），下面是一个简单的函数组件。

function Btn(props) {
    
  return <button>{
    props.text}</button>;
}

　　与类组件不同，函数组件在调用时不会创建新实例。

二、state（组件状态）

　　组件中的state用于记录其内部状态，这类有状态组件会随着state的变化修改其最终的呈现。

1）初始化

　　在组件的构造函数constructor()中可以像下面这样，通过this.state初始化组件的内部状态，其中this.state必须是一个对象。

class Btn extends React.Component {
    
  constructor() {
    
    super();
    this.state = {
    
      text: "提交"
    };
  }
  render() {
    
    return <button>{
    this.state.text}</button>;
  }
}

　　注意，在初始化之前要先调用super()，因为ES6对两个类的this的初始化顺序做了规定，先父类，再子类，所以super()方法要在使用this之前调用。

　　如果要读取this.state中的数据，那么可以像上面的代码那样通过成员访问运算符得到。但如果要更新this.state中的数据，那么就得用setState()方法，而不是用运算符。

2）setState()

　　此方法能接收2个参数，第一个是函数或对象，第二个是可选的回调函数，会在更新之后触发。下面用示例讲解第一个参数的两种情况（省略了构造函数以及初始化的代码），当它是函数时，能接收2个参数，第一个是当前的state，第二个是组件的props（将在下一节讲解