React 组件概括

React中一切皆可为组件，组件从概念上类似于 JavaScript 函数，组件也可以理解为React中的一种状态机，它里面包括从外面获取的props 和内部保持状态的state，并返回用于描述页面展示内容的 React 元素，其中其数据是单向流动的。

一、组件的实现

    由于历史版本的原因，React组件可以有多种实现方式：

    1.1 ES6 组件

      使用关键字class 来定义组件一般如下：      

class Hello extends React.Component {
    render() {
        return <div>hello world</div>;
    }
}

    1.2 ES5组件

    不使用class 关键字来定义组件，React提供了create-react-class 模块：

var HelloMessage = React.createClass({
  render: function() {
       return <h1>Hello {this.props.name}</h1>;
  }
});

   1.3 纯JS函数组件    

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
}

二、分类：

根据表单input等元素处理方式不同，可分为受控组件，非受控组件。

2.1受控组件：

 “渲染表单的 React 组件还控制着用户输入过程中表单发生的操作”。input 表单元素的值是由 React 控制，当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

2.2 非受控组件：

“表单数据将交由 DOM 节点来处理，可以使用 ref 来从 DOM 节点中获取表单数据”。当用户将数据输入到表单字段（例如 input，dropdown 等）时，React 不需要做任何事情就可以映射更新后的信息。在非受控组件中，可以通过defaultValue 属性为表单元素设置默认值。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input 
             defaultValue="Bob"
             type="text" 
             ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

三、组件的生命周期：

每个组件都包含“生命周期方法”，可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。

生命周期图谱：

资料‘生命周期图谱’

四、组件间通信

组件内部状态由state对象保存，组件之间传值的方式简单叙述下：,

    3.1 父子节点

    3.1.1父组件通过属性向子组件传值，子组件通过props属性获取：  

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;   // 获取父组件APP传入的props
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

     React对props规定，组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。   

 3.1.2  子组件向父组件传值，通过由父组件传入的子组件的callback函数。在子组件中触发此callback，入参作为更新传递的值。

  3.2 兄弟节点

当兄弟节点需要同步state时，一般是进行状态提升。即将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。