函数定义组件

函数定义组件的例子

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

该函数接收一个单一的“props”对象并返回了一个React元素。

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

  1. 函数式组件不会被实例化,整体渲染性能得到提升函数式组件被精简成一个 render 方法的函数,所以它没有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。同时的,函数式组件本身是没有 this 的,所以在使用 Ref 等模块时与类组件也会有所区别。
  2. 函数式组件没有状态
    函数式组件本身没有自己的内部状态 state,数据依赖于 props 的传入,所以它又称无状态组件
  3. 函数式组件无访问生命周期的方法

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

何时该使用函数式组件

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

来源:【Next学院-React实践宝典】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值