React的组件

一、组件的几种创建方式

对于React来说组件Component算是它的核心之一。用了React的时间也不短了，记录一下以便以后翻看

1 createClass

用ES5的方法React.createClass来创建一个组件

import React from 'react';
class Test = React.createClass({
    render(){
        return(
        <div></div>
        )
    }
}) 
export default Test;

2 采用React.createClass的方法来创建组件

import React from 'react';

class Test extends React.Component {
    constructor(props) {
        super(props);
        }
        render() {
            return (
            <div></div>
        );
    }
}

export default Test;

ES6对类和继承有语法级别的支持，所以使用ES6来创建组件，看起来更加的优雅简单。在继承之后，通过super来调用父类的构造函数。同时组件的state是在this.state中进行赋值。对于组件来说，组件的props属性是父组件传递给子组件的，子组件内部不应该对props进行修改。state是组件内部自己维护的一种状态，组件可以通过setState来更新自己的状态。

3 无状态组件

和以上的组件创建方式不同还有一种叫做无状态组件。FB把它称为Stateless Function Componnet。在什么时候我们考虑使用这样的组件呢？当我们的组件只需要做一些展示而不需要去维护任何状态时候，无状态组件更加指的推荐。这种组件不需要关系

在antd form使用的过程中遇到了一个关于初始值（initialValue）的初始化和再更新的问题，究其原因原来是React的受控组件和非受控组件“捣鬼”。

官方文档永远是最好的学习材料：

https://reactjs.org/docs/forms.html#controlled-components
https://reactjs.org/docs/uncontrolled-components.html

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

受控组件

HTML表单元素与React中的其他DOM元素有所不同，因为表单元素天生就保留着一下内部状态。当用户提交表单时，HTML的默认行为会使这个表单跳转到一个新页面。在React中也是这样的。通常我们都会构造一个处理提交表单并可访问用户输入表单数据的函数，实现这一点的标准方法就是使用“受控组件”技术。

受控组件从形式上来说就是为表单组件添加value属性，表现如下，在这种情况下，你的任何输入都不能在去改变input的值。

<input type="text" value="hello world"/>

在HTML中，想input、textarea这类的表单元素都会为维持一个自身状态并且根据用户输入来进行更新，但是在React中可变的状态通常保存在组件的状态属性中并且通过setState方法来进行更新。在React中负责渲染表单的组件仍然控制用户后续输入时所需的变化。相应的，其值由React控制的输入表单元素称为“受控组件”。如下代码所示

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

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

  handleSubmit=(event)=>{
    event.preventDefault();
  }
//value的值由this.state.value进行设置，每次触发change时候，我们都会去动态的更新state
  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>
    );
  }
}

使用“受控组件”每个状态都需要有一个与之相关的处理函数。

很明显，受控组件的缺点在于：需要为数据可能变化的每一种方法都需要编写一个事件处理函数

非受控组件

从形式上来说就是没有为表单组件添加value属性，你的任何输入都是由input组件自身控制。非受控组件真是数据保存在DOM中，所以使用非受控组件可以更容易的集成

对于React的实现来说，如果需要编写一个非受控组件，而非为每个状态更新编写事件处理函数，我们可以使用ref从dom中来获取该组件的值：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
  }

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

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

对于非受控组件，你可以通过ref来获取它的值，这样的写法看起不是那么“React”。它也能够更加容易的和其他非React的代码进行耦合。缺点在于没有办法进行表单的校验等。

简单来说，其实就是你能不能够控制组件的值，可控组件的value是通过state的来做的赋值，所以你可以通过setState来动态的改变它的值。对于不可控组件，它的value是元素自身属性带有的，那么你是不能去操作而只能获取的，那它就是你不能够控制的。

简单来说，如果想要一个form变成可控的，那么你需要做的通过state/props来set它的值

在以下场景中推荐使用可控组件：

1 需要feedback，例如验证

2 提交按钮不可用除非所有表单数据都是合法数据

3 迫使用户输入一个符合规范的数据，例如信用卡或者电话

猜你喜欢