Dan Abramov 接受油管 UP 主的面试挑战,差点没写出居中……?

  • 服务端数据 -> 可能需要被缓存。

  • 跨组件共享某些数据。

最后 Dan 说,如果现在新建一个项目,他可能不会选择 Redux 了,主持人蛤蛤大笑,问他会选择什么,Dan 说这取决于实际情况,如果是一些需要缓存的服务端数据,他可能会选择 react-query, relay, apollo 等一些现代的 react 请求状态库。

主持人接着追问,如果是需要提升到顶部的状态,你喜欢用 Context 吗?Dan 给出了肯定的答复。

dangerouslySetInnerHTML


接下来,主持人对 dangerouslySetInnerHTML 这个 API 的使用时机提出了疑问。624667d1d52fc72849dfb823eee9e2ee.png

Dan 回答说,这个 API 是在你可能从数据库或者什么地方拿到一串 HTML 想要展示到页面上时,在确保它是安全的 HTML 文本的前提下,可以使用。你可以提前对这串 HTML 消毒(santize),确保没有未经过消毒的用户输入。

居中

508d58ec1c69b4bfde7a29eaec4baae3.png

一个很常规的 CSS 问题,让这段文本在页面上水平垂直居中

Dan 慌慌张张的开始用 display: flex 起手,然后来了个 width: 100% 想让容器撑满,他显然已经忘了这是默认的块布局的行为了 XD。

97f570ce0a0820f9901b1dc47dd51b1b.png

翻译大误

Dan 写到这一步,开始迷茫了,为什么没生效!

503f5d8f2879dcdb35aa8dc76d6427a6.png

经过了大约整整 5 分钟的苦思冥想的调试,Dan 终于试出来了问题,因为 HTML 元素默认不是 100% 的高度,大师原来也会遗忘这些基础,哈哈。

50facaa33da6318734be9fad4fafce3f.png

我得意的笑

国际友人埃文尤也对此事发表了亲切的慰问。

cb50b56b6dfa291cc6b81c55519616f3.png

算法:反转二叉树


主持人:Dan 我要给你出个经典的算法题,你在 Facebook 工作,现在我要看看你能不能在 Google 工作。

没错,接下来他祭出了 homebrew 作者闻风丧胆的反转二叉树

7fae173d38e6280a6205dd21efee44e5.png

如图所示,把二叉树的节点左右反转。

Dan 很快给出了答案,看来常年维护 React,对树方面的操作必须是手到擒来了,主持人打趣说 Dan 破了他保持的最快反转二叉树的记录。

0e88d55e69fed84652ee078aeac34f73.png

奖金问题:找兔子


主持人神秘的拿出了他的额外奖金问题,找兔子。

这个问题大意是,一条直线上有 100 个洞,兔子藏在其中的一个洞里。

你一次只能查看一个洞,并且每次你查看洞的时候,兔子都会跳到它当前所在位置的相邻的洞里去。

举例来说,现在有 _ X _ _ 这四个洞,X 代表兔子的位置在第二个洞,如果你查看了第三个洞,那么兔子就可能会跳到它左边的第一个或右边第三个洞中去。

要求写出找到兔子的算法,并且给出复杂度。

b50731470ae620a509305441f2d4cf6e.png

这是一个比较开放性的问题,具体 Dan 调试和解答的过程可以直接去油管看原视频,占据了整整二十多分钟时间。这题是真的有难度了,不过 Dan 会把他思考的过程转化成代码或者文字写在 IDE 里,帮助自己找到更多线索,并且不断的和面试官进行沟通来确认细节,我觉得这是非常值得学习的。

最后,主持人说他决定雇佣 Dan 了,当他在回答 let vs const、redux、dangerouslySetInnerHTML 的问题时,展现出的思考过程就已经足够打动他了。

e7e12b75fafce896fe4ffa8b1f19632e.png

主持人说,谷歌也会雇佣 Dan,因为他解决了反转二叉树问题(笑),而且在遇到困难的兔子问题时,他能够一步步的写下自己的思考,和面试官不断进行互动获得更多提示,这是非常关键的。

这也可以给我们自己一些启发。当你在面试中遇到难题的时候,不要闷着头一声不吭的写,最好把你的思考过程转化成文字写下来,多和面试官进行一些提问和细节的确认。不然面试官也不知道你在想什么,该如何提示你。从我个人的感觉来说,没有面试官会喜欢沉默寡言的面试者,毕竟面试招进来的人是要在日后的工作中紧密合作的,确定你的思考过程很清晰,确定你在沟通交流方面友好和耐心也是面试官考察的重要因素,大家共勉。

caff3475803ce70e309f3fb53df2b657.png

彩蛋:油管高赞评论

油管地址:https://www.youtube.com/watch?v=XEt09iK8IXs





  • 334cab336da600695c7b76a3d329a5be.png

  • 公众号后台回复【加群】加入群

  • 如果文章对你有帮助,点个在看,谢谢!

  • 你的在看很重要

ES6

  • 列举常用的ES6特性:

  • 箭头函数需要注意哪些地方?

  • let、const、var

  • 拓展:var方式定义的变量有什么样的bug?

  • Set数据结构

  • 拓展:数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求?

  • 有哪些参数传值的方法?

  • 你使用过哪些方法,来提高微信小程序的应用速度?

  • 小程序和原生App哪个好?

  • 简述微信小程序原理?

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值