Share

分享最近看的一部纪录片:《互联网之子》,该片讲述了亚伦·斯沃茨的一生。他是 RSS 和 Markdown 的开发者,也是 Creative Commons 的组织者;是 Web.py 的设计者,也是Reddit 的合伙人。他倡导互联网自由精神,却最终不堪政府逼迫英年早逝。

影片的开头引用了梭罗的一句话:

Unjust laws exist;(世有不公之法)
shall we be content to obey them,(我们是安于循守)
or shall we endeavor to amend them,
and obey them until we have succeeded,(还是且改且守,待其功成)

or shall we transgress them at once?(或是即刻起而破之?)


毫无疑问,艾伦选择了后者。

Tips

前端路由是设计单页应用时非常重要的一点。Vue 有官方提供的 vue-router,而 React 全家桶则有 react-router,这基本上也是 React 的唯一选择。

不过,说实话,个人觉得 v4 版本的 React router 挺难用的,在 v4 版本 react-router 使用路由嵌套而抛弃了配置化的路由,这就导致了路由的配置被分散到了各个组件中,变得难以管理。个人觉得,对于路由还是直接在单独文件中配置比较好,更加简洁明了。大概 react-router 现在这么搞是为了配合 React 组件化的设计理念?

React-router 有一个需要注意的是,其本身是不支持相对链接的。也就是说,所有的 Link 或者 Navlinkto 属性必须是相对于根路径的。解决方法也很简单,只要使用 this.props.location 即可,在 to 属性上拼接成完整的路径即可。也可以使用一个叫做react-router-relative-link的库。

Algorithm

35. Search Insert Position

题目很简单,要求查找一个给定值在一个升序排序的数组中的位置。

首先是 Naive 的思路,直接遍历查找,O(n)复杂度。

def searchInsert(nums, target):
    n = len(nums)
    if n==0:
        return 0
        
    for i in range(n):
        if nums[i]>=target:
            return i
    return n

再想想,可以使用二分查找法使时间复杂度降到 O(logn)。

def searchInsert(nums, target):
    n = len(nums)
    if target>nums[-1]:
        return n
    
    l = 0
    r = n-1
    while l<r:
        mid = (l+r)//2
        if nums[mid]==target:
            return mid
        elif nums[mid]>target:
            r = mid
        else:
            l = mid + 1
    return l

278. First Bad Version

这是一道类似的题目,题目本次要求找到一个数组中第一个为 true 的值。不过这次要想直接遍历就不行了,会超出内存限制,所以这里我们使用二分查找。

def firstBadVersion(n):
    l, r = 1, n
    while l<r:
        mid = (l+r)//2
        if isBadVersion(mid):
            r = mid
        else:
            l = mid + 1
    return l

Review

今天分享一篇经典的关于 React 中事件绑定的文章:The best way to bind event handlers in React

写过 React 的都知道,因为 this 指向的问题,在为组件绑定事件时需要手动绑定 this 到实例上。本文提到了三种方法:

  1. <div onClick={ this.handler.bind(this) }>

    这种方法的缺点在于:每次执行 rerender 时都会重新绑定一次,造成较大的性能开销。
  2. constructor(){ this.handler = this.handler.bind(this) }

    这也是 React 官方推荐的做法,这样可以避免每次 rerender 都重新绑定,不过会降低代码的可读性。
  3. ES6 箭头函数。 handler = () => {}

    这种方法其实本质上和上一种一样,但是利用了 ES6 的新特性,也是代码更加简洁。
    

    对于需要传递参数的情况,文章推荐了一种写法:

handler = (params) => (event) => {
    // doSomething(params)...
}

render() {
    return (
        <Component onClick={ this.handler(params) } />
    )
}

标签: ARTS, React, LeetCode

添加新评论