函数定义组件的例子
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
该函数接收一个单一的“props”对象并返回了一个React元素。
函数定义组件 与 类组件的区别:
- 函数式组件不会被实例化,整体渲染性能得到提升函数式组件被精简成一个 render 方法的函数,所以它没有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。同时的,函数式组件本身是没有 this 的,所以在使用 Ref 等模块时与类组件也会有所区别。
- 函数式组件没有状态
函数式组件本身没有自己的内部状态 state,数据依赖于 props 的传入,所以它又称无状态组件。 - 函数式组件无访问生命周期的方法
函数式组件是不需要组件生命周期管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。
何时该使用函数式组件
函数式组件相比类组件,拥有更好的性能和更简单的职责,十分适合分割原本庞大的组件,未来 React 也会对函数式组件进行一系列的优化,譬如无意义检查和内存分配领域相关的优化。所以只有有可能,尽量使用函数式组件。
来源:【Next学院-React实践宝典】