react学习-5.React组件

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

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

1.什么是组件

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

2.React创建组件的方式

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

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

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 (
                

                    
                    改变textbox状态
                
            )
        }
    });

    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 (
      

    );
  }

具体绑定方法有三种：

1. 在构造函数中绑定this.

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

2. 直接在结构中绑定

    
    //使用bind来绑定
   

3. 使用箭头函数绑定

    
   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组件的生命周期