智能组件和木偶组件

<b>智能组件和木偶组件是react中常用的组件</b>

• 智能组件
  通俗来讲就是比较聪明的组件，它是数据的所有者，它拥有数据、且拥有操作数据的action，但是它不实现任何具体功能。它会将数据和操作action传递给子组件，让子组件来完成UI或者功能。这就是智能组件，也就是项目中的各个页面。例如：
  class SearchBar extends React.Component {
  constructor(props) {//props需要作为参数传入
  super(props);//需要使用super，如果没有this就会是undefined
  this.state = {
  value: '',
  };
  this.handlerChange = this.handlerChange.bind(this);//ES6写法
  }
  handlerChange(event) {
  this.setState({
  value: event.target.value,
  });
  }
  render() {
  return <input onChange={this.handlerChange} />;
  }
  }

• 木偶组件
  通俗来讲就是比较傻的组件，它就是一个工具，不拥有任何数据、及操作数据的action，给它什么数据它就显示什么数据，给它什么方法，它就调用什么方法。例如：
  class Hello extends React.Component {//第一种写法
  constructor(props) {//props需要作为参数传入
  super(props);//需要使用super，如果没有this就会是undefined
  }

      render() {
          return <div>Hello {props.value}</div>;
      }
  }      
  
  //Stateless Functions 第二种写法
  function Hello(props) {
      return <div>Hello {props.value}</div>;
  }