当前位置: 首页 > 面试题库 >

以箭头函数格式使用React生命周期方法的优缺点

归松
2023-03-14
问题内容

我正在使用公共类字段语法(handler = () => {...})来定义我所有的React组件的事件处理程序,这样我就可以this在不将其绑定到的情况下用于我的组件constructor。我想知道我是否也可以使用这种语法来使用React生命周期方法?用componentWillMount这种方式说:componentWillMount = () => {...}

如果使用箭头函数定义react的生命周期方法,有什么优缺点?


问题答案:

每次函数执行=>操作时,都必须创建一个新的函数对象。这样可以防止浏览器在渲染同一元素的多个副本时重用同一功能,从而使javascript引擎的优化工作更加困难。这将导致性能问题(但在大多数程序中,它不会引起注意)。

建议在React的生命周期方法中不要使用箭头功能

什么时候应该使用箭头功能



 类似资料:
  • 本文向大家介绍react生命周期函数相关面试题,主要包含被问及react生命周期函数时的应答技巧和注意事项,需要的朋友参考一下 这个问题要考察的是组件的生命周期 一、 初始化阶段: Constructor初始化状态 componentWillMount:组件即将被装载、渲染到页面上 render:组件在这里生成虚拟的DOM节点 componentDidMount:组件真正在被装载之后 二、 运行中

  • 问题内容: 在哪里进行调用将使我的状态失水的API调用的最佳位置是哪里?构造函数或生命周期方法之一,例如ComponentWillMount? 问题答案: 最好从生命周期方法进行api调用,反应文档也建议相同。 根据DOC: componentDidMount: 挂载组件后立即调用componentDidMount()。需要DOM节点的初始化应该在这里进行。 如果需要从远程端点加载数据,这是实例化

  • 忽视省略(elision)情况,带上生命周期的函数签名(function signature)有一些限制: 任何引用都必须拥有标注好的生命周期。 任何被返回的引用都必须有一个和输入量相同的生命周期或是静态类型(static)。 另外要注意,若会导致返回的引用指向无效数据,则返回不带输入量的引用是被禁止的。下面例子展示了一些带有生命周期的函数的有效形式: // 一个拥有生命周期 `'a` 的输入引用

  • 方法的标注和函数类似: struct Owner(i32); impl Owner { // 标注生命周期,就像独立的函数一样。 fn add_one<'a>(&'a mut self) { self.0 += 1; } fn print<'a>(&'a self) { println!("`print`: {}", self.0); } } fn

  • 用法 组件和虚拟 DOM 节点都有生命周期方法,也叫钩子,它们会在 DOM 元素的生命周期的对应时期被调用。 // 组件中的钩子 var ComponentWithHook = { oninit: function(vnode) { console.log("initialize component") }, view: function() { return "hello