react组件主要有两种形式，一种是类组件，一种是函数组件。类组件具有高度可扩展性并且编写起来很麻烦。函数式组件具有单一功能，但编写起来很简单。

类组件

class List extends React.Component {
  render() {
    return (
              {this.props.value}
      
    );
  }
}

功能组件

function List(props) {
  return (
    
      {props.value}

    
  );
}

生命周期

—mount,—，下例在组件挂载时设置定时器，在组件卸载时清空定时器。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
// 组件挂载
  componentDidMount() {
    this.timerID = setInterval(

      () => this.tick(),
      1000
    );
  }
// 组件卸载
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}
ReactDOM.render(
  ,
  document.getElementById('root')

);

状态

state 用于维护组件内部的数据状态。类似于vue2中的数据。通过方法改变状态。

class ZButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
  render() {
    return (

       this.setState({value: 'X'})}
      >
        {this.state.value}
      
    );
  }
}

重要的心态改善

通常，多个组件需要反映相同的变化数据，这种情况下建议将共享状态提升到最近的公共父组件。

单向数据流

数据从上到下传递。

不可变

当功能逻辑复杂时，复制一份数据进行操作，尽量不要对源数据进行操作，保持源数据不变。