[译] React组件 是采用Functional 仍是 Class编写 ?

在React里面有两种组件, Class components(类组件) 和 Functional components(函数式组件).二者有明显的区别,好比

• Class Components 是属于ES6的类
• Functional Components 是一个函数,它返回一个JSX组件

什么是Functional Components

先看一段代码:

function Hello(props){
   return <div>Hello {props.name}</div>
}

这是一个函数式组件(Functional Component), 它和类组件(Class Component)最关键的区别就是: 函数式组件没有state和一系列的钩子函数,这也是函数式组件常常被用做无状态组件的缘由

若是你比较熟悉ES6语法,还能够这样写:

const Hello = ({name}) => <div>Hello {{name}}</div>

两者的做用是彻底一致的

若是用类组件(Class Components)来实现呢

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

它仅仅包含一个render方法 正如以前所说,若是你的某个组件只有一个render方法,你能够把它转换成类组件(Class Component)

因此为何要用函数式组件(Functional Components)呢

1. 函数式组件易于追溯.
   函数式组件具备很好的可读性
2. 易于测试,debug
3. 有更好的性能
4. 能更好的复用
5. 能更好的下降代码之间的耦合

这些状况下不要用函数式组件(Funcional Components)!!!

• 列表若是你的组件须要在生命周期的钩子函数里作一些事情, 或者对state作一些操做, 你应该用类组件.