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组件。

动手敲个小例子

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

react学习-5.React组件_第1张图片
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 (
      
); }

具体绑定方法有三种:

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

你可能感兴趣的:(react学习-5.React组件)