[译] 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做一些操作, 你应该用类组件.