种类
类与函数式组件
对比点
class
function（函数式）
state
可选
无状态
props
有
有
生命周期
有
无
使用场景
需要用到生命周期，需要维护自身的状态，比如处理用户的输入
不需要生命周期，不需要维护自身的状态，所有的状态都通过 props 传入
强制：函数式组件必须使用箭头函数的形式定义。
强制：如果有多个函数式组件嵌套，里面的函数式组件定义的时候 props 参数用 _props 替代。
推荐：组件不需要生命周期且不需要维护自身状态的时候，优先使用函数式组件。
推荐：presentational 组件优先使用函数式组件。
受控组件与非受控组件
受控组件与非受控组件是React处理表单的入口。从React的思路来讲，作者肯定让状态控制一切，或者简单的理解为，页面的生成与更新得忠实地执行JSX的指令。但是表单元素有其特殊之处，用户可以通过键盘输入与鼠标选择，改变界面的显示。界面的改变也意味着有一些状态 被 改动。
受控组件和非受控组件主要用在表单的处理当中。controll 指的是对 value/checked(单选框和复选框) 属性的控制。以 input 为例，如果绑定了 value 属性则为受控组件，demo：
<input type="text" value={this.state.value} /> // 受控组件
<input type="text" value={this.state.value} onChange={::this.handleChange} /> // 受控组件
<input type="text" ref={n => this.myInput = n} defaultValue={this.state.value} /> // 非受控组件
<input type="text" ref={n => this.myInput = n} defaultValue={this.state.value} onChange={::this.handleChange} /> // 非受控组件受控组件将value和state进行了绑定，可以通过 react 的生命周期很方便地达到对value的控制，state相应值的变化也会影响到value的变化，使得应用整体的状态更加可控，所以说它是受控的。由于非受控组件没有 value 属性，所以要想控制输入框的内容不是那么方便和“原生自然“，当然通过 ref 反模式也可以达到相同的效果。
对比点
controlled
uncontrolled（反模式）
特征
有value/checked属性
无value/checked属性
优点
便于对输入的value作处理
可以不用绑定change事件
缺点
最好绑定change事件，有性能损耗
不受props/state控制
实时获取输入的value
e.target.value
e.target.value/this.refs.refName.value
获取组件的value
this.state.value
this.refs.refName.value
set value
this.setState()
不需要手动set，ref自动同步
注意：react 判断一个组件是否是受控组件不是单纯地看是否有value属性，而是要进一步判断value 属性的值 value != null，尤其要注意是 != 。
由于 undefined == null 是 true，如果value 绑定的值初始状态是null 或 undefined 的时候 react 会认为该组件是非受控组件，控制台会出现：
Warning: MyForm is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
强制：受控组件的 value/checked 属性的初始值必须是空字符串（''）。
示例：
<input type="text" value={this.state.name || ''} onChange={this.handleChange.bind(this)} />Ref
Last updated