[React] 函数定义组件

函数定义组件的例子

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

该函数是一个有效的 React 组件，它接收一个单一的 “props” 对象并返回了一个 React 元素。

函数定义组件 与 类组件的区别

1.函数式组件不会被实例化，整体渲染性能得到提升

函数式组件被精简成一个 render 方法的函数，所以它没有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。同时的，函数式组件本身是没有 this 的，所以在使用 Ref 等模块时与类组件也会有所区别。

2.函数式组件没有状态

函数式组件本身没有自己的内部状态 state，数据依赖于 props 的传入，所以它又称无状态组件。

3.函数式组件无访问生命周期的方法

函数式组件是不需要组件生命周期管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。

何时该使用函数式组件

函数式组件相比类组件，拥有更好的性能和更简单的职责，十分适合分割原本庞大的组件，未来 React 也会对函数式组件进行一系列的优化，譬如无意义检查和内存分配领域相关的优化。所以只有有可能，尽量使用函数式组件。

原文：https://www.jianshu.com/p/8e8f49020ebe