react学习-5.React组件

前面的示例都是渲染的元素，主要是用来阐述ReactDOM.render()工作原理。通常在React项目中是不这样做的。我们常常会它封装到一个React组件中，然后再通过ReactDOM.render()把这个组件渲染出来。

在React中元素是构成React应用的最小单位。

1.什么是组件

React是专注于View层的，组件也是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。React组件可以看成构造出一个虚拟DOM结构的对象。

2.React创建组件的方式

在React中创建组件有三种方式：

有状态组件(ES6写法)：React.Component
有状态组件(ES5写法)：React.createClass（注：此方法旧版本react可用，现已不可用）
无状态组件的函数写法（函数组件）。

3.有状态？无状态？

无状态组件，它是一种只负责展示的纯组件。这种组件只负责根据传入的props来展示，不涉及到要state状态、生命周期等操作。
有状态组件，需要涉及state、生命周期等操作。
React鼓励在大型项目中尽可能以无状态组件的写法来分割原本庞大的组件。

4.React.createClass

注：React.createClass方法现已经不可用，本文章总结只是为了和es6写法作对比，从而更好的理解。

React.createClass是React刚开始创建组件的方式。这是ES5的原生的JavaScript封装的函数来实现的React组件。

动手敲个小例子

我们用一个小例子来了解一下组件的创建的机制。该例子包含一个文本框和一个按钮，单击按钮可以改变文本框的编辑状态：禁止编辑或允许编辑。并且显示自定义属性文本。

image

   var  SwitchInput = React.createClass({
        getDefaultProps : function () {
            return {myattr: "我是默认的属性"}
        }
        getInitialState:function(){
            return {enable:false}
        },
        handleClick:function(event){
            this.setState({enable:!this.state.enable})
        },
        render:function(){
            return (
                
                    
                    
                
            )
        }
    });

    ReactDOM.render(, document.getElementById('root'));

state:

组件总是需要和用户互动的。React的一大创新，就是将界面组件看成一个状态机，用户界面拥有不同状态并根据状态进行渲染输出，用户界面和数据始终保持一致。开发者的主要工作就是定义state，并根据不同的state渲染对应的用户界面。

setState()

React自带方法。通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。

getInitialState

存放state的容器。

props即属性(Property)，在代码中写作 props ，即可用 props 指代 properties .

组件的属性

getDefaultProps

存放props的容器

render

用于将模板转为HTML语言，并插入指定的DOM节点。

props和state的区别

props是只读的，不能在组件中修改，只能通过组件传递；state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。
在设计组件时，就要想好组件哪些使用state，哪些使用props集合，哪些使用state集合。通常固定的组件内只读的、由父组件传递进来的属性适合放在props集合中。

5.React.Component

ES6中类的出现改变了我们定义组件的方式，如今，React.createClass已经不可使用，新版本的react创建有状态组件都是使用React.component来创建。

我们将上面例子使用es6的方法改写下。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class SwitchInput extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      enable: true
    }
   
    this.handleClick = this.handleClick.bind(this) //绑定this
  }

  handleClick(event) {
    this.setState({
      enable: !this.state.enable
    })
  }
  render() {
      return (
       
         
         
         自定义属性：{this.props.myattr}
       
      )
  }
}
SwitchInput.defaultProps={
  myattr: "我是默认的属性" 
} 
SwitchInput.propTypes = {
  myattr: PropTypes.string
};



ReactDOM.render(, document.getElementById('root'));

默认属性放到defaultProps中
state值放到constructor构造函数中。
prop-types库是react自带的属性类型检测库。这里设置myattr为字符串类型，若传入其他类型，会在控制台报错。具体可查看官网。http://www.css88.com/react/docs/typechecking-with-proptypes.html

不清楚constructor以及super等写法可以看我之前的文章。ES6学习-类（Class）的声明1

React.createClass与React.Component区别

根据上面展示代码中二者定义组件的语法格式不同之外，二者还有很多重要的区别，下面就描述一下二者的主要区别。

React.Component可以有选择性的绑定需要的函数，React.createClass会自动绑定函数，这样会导致不必要的性能开销。
函数this自绑定

React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this指向类的实例。

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React 实例
  },
  render() {
    return (
      
    );
  }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      
    );
  }

具体绑定方法有三种：

在构造函数中绑定this.

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }

直接在结构中绑定
```
  //使用bind来绑定
```

使用箭头函数绑定

 this.handleClick()}> //使用arrow function来绑定

绑定成功后，这样在自定义函数中间就可以使用this了，若不使用this可以不绑定。

6.无状态组件

无状态组件其实是通过函数形式或者ES6 arrow function的形式创建的，它是为了创建纯展示组件。这种组件只负责根据传入的props来展示，不涉及到state状态的操作。

function HelloComponent(props) { 
  return Hello {props.name}
} 
 ReactDOM.render(, document.getElementById('root'))  //Hello react

react鼓励尽量使用无状态组件。其又以下几个显著特点：

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利。
组件不会被实例化，无实例化过程也就不需要分配多余的内存，从而整体渲染性能得到提升
组件不能访问this对象。（无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件）
组件无法访问生命周期的方法（因为无状态组件是不需要组件生命周期管理和状态管理）
无状态组件只能访问输入的props，不涉及state等操作。

下一篇——react学习-6.React组件的生命周期