2019.03.11

[文章] 微软今天在 GitHub 上提供了其 Windows 计算器的源码，授权协议为 MIT License，提供了产品路线图，目的是希望与社区合作建立更好的用户体验：https://github.com/Microsoft/calculator (opens new window)

[文章] 前端架构杂思录：议 Function Component 与 Hooks：http://taobaofed.org/blog/2018/11/27/hooks-and-function-component/ (opens new window)

[工具] ArchiveBox 是可以把网站永久性存档，存储格式可选 HTML、PDF 等，方便在网站更换域名或关闭的情况下回顾历史，Docker 版说明：https://github.com/pirate/ArchiveBox/wiki/Docker (opens new window)

[资源] 一个用动态图片，帮助你理解算法的一个网站：https://visualgo.net/zh (opens new window)

[类库] 一个 SVG 颜色选择器（色轮），在线演示[https://iro.js.org/]：https://github.com/jaames/iro.js (opens new window)

配图 - 微软计算器

配图 - ArchiveBox

配图 - 在线学习算法

配图 - 色轮

示例 - Function Component 与 Hooks

import { useState, useContext, useEffect, createContext } from 'react';
const FooContext = createContext('foo');
const BarContext = createContext('bar');

function Hey(props, context) {
  const [name, setName] = useState('yiyi');
  const [emoji, setEmoji] = useState('😊');

  const foo = useContext(FooContext);
  const bar = useContext(BarContext);

  const handleClick = () => setEmoji('😢');

  useEffect(() => {
    console.log('componentDidMount or componentDidUpdate');
    return () => {
      console.log('componentWillUnmount');
    }
  }, [name]);

  return (
    <>
      <span onClick={handleClick}>Hey {name}, {emoji}</span>

      <FooContext.Provider>
        <BarContext.Provider>
          {foo}, {bar}
        </BarContext.Provider>
      </FooContext.Provider>
    </>
  )
}