目录

React是前端组件化开发的开山鼻祖，这种开发方式彻底解决了的前端组件复用的痛点。今天，就来研究一下React组件开发。

前端同学一般都会从Vue入门，因为Vue使用的<template>的组件开发方式让前端人员更容易的平滑过渡。Vue的组件很简单，一般来说，一个.vue文件就是一个组件。就像webpack的模块化开发，一个文件就是一个组件。我们在使用组件时也很容易，通过 ES6 的import导入、注册（components），就可以直接使用。

上面简单说了Vue的组件模式，其实，React的使用方式也差不多，毕竟是借鉴它的组件思想。最明显的差别就是声明方式，React用的是JSX语法，这让React变的很灵活。当然，使用方式的灵活也意味着使用者的脑子也要足够的灵活，从而增加了入门的难度。玩的6的人是真喜欢，未入门的是真不能理解为啥把html标签写到js里面呢。

好了，上面扯了那么多，下面就来一探React组件的究竟...

React组件基础

最开始，让我们先来了解一下React组件是如何定义的和分类的。

组件定义

React组件的声明方式有两种（React.createClass已弃用）：函数组件和class组件。它们的区别是什么呢？

如果一个组件只根据props渲染页面，没有内部状态state，我们完全可以用函数组件的形式来实现。也就是说，函数组件只是简单的负责展示数据，它里面没有生命周期函数和state状态，不能做业务逻辑处理。

函数组件（无状态组件）：

复制import React from "react";  function Welcome(props) {   return <h1>Hello, {props.name}</h1>; }

class组件：

复制import React, { Component } from "react";  class Welcome extends React.Component {   constructor(props) {     super(props);     // 设置 initial state     this.state = {       text: props.initialValue || 'placeholder'     };     // ES6 类中函数必须手动绑定     this.handleChange = this.handleChange.bind(this);   }   handleClick(event) {     this.setState({       text: event.target.value     });   }   componentDidMount() {   // do something   }   componentWillUnmount() {     clearInterval(this.timer);   }   render() {     return (