有一种选择叫做格子里

React class 类组件的缺点

大型组件很难拆分和重构，也很难测试
业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑
组件类引入了复杂的编程模式，比如 render props 和高阶组件,(再加入 Redux，就变得更复杂)

why hooks

React Hooks 的设计目的，就是加强版函数组件，完全不使用”类”，就能写出一个全功能的组件。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。

React 16.8 之前组件的书写方式

• ES5 React.createClass
• ES6 class xxxx extends Component
• 无状态 function

React 16.8 之后逐渐采用 hooks

1
2
3
4
5
6
7
8
9
10
11

import React, { useState } from "react";

export default function Button() {
  const [buttonText, setButtonText] = useState("Click me,   please");

  function handleClick() {
    return setButtonText("Thanks, been clicked!");
  }

  return <button onClick={handleClick}>{buttonText}</button>;
}

屏幕信息

• screen.height ：屏幕高度。
• screen.width ：屏幕宽度。
• screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度，可表示为软件最大化时的高度。
• screen.availWidth ：屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度，可表示为软件最大化时的宽度。

任务栏高/宽度 ：可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如：任务栏高度 = screen.height - screen.availHeight

浏览器信息

• window.outerHeight ：浏览器高度。
• window.outerWidth ：浏览器宽度。
• window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
• window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 ：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

页面信息

• body.offsetHeight ：body 总高度。
• body.offsetWidth ：body 总宽度。
• body.clientHeight ：body 展示的高度；表示 body 在浏览器内显示的区域高度。
• body.clientWidth ：body 展示的宽度；表示 body 在浏览器内显示的区域宽度。

滚动条高度/宽度 ：如高度，可通过浏览器内页面可用高度 - body 展示高度得出，即window.innerHeight - body.clientHeight

更新内容（2019-12-02）

这篇文章的介绍方式更好iTerm2 + Oh My Zsh 打造舒适终端体验

当无论是自动更新还是手动 upgrade_oh_my_zsh 更新 oh-my-zsh 时，出现下面提示

这是因为修改了 oh-my-zsh 的 git 文件，可以使用如下方式更新

1
2
3
4
5
6

cd ~/.oh-my-zsh
git status
git stash
upgrade_oh_my_zsh
git stash pop

ok 完成更新

解决下面 👇 的报错

Modal not found: Can't resolve '@babel/runtime/helpers/esm/extends'
公司项目 使用的是dva roadhog 搭建的，最近在 build 的时候 报错
删了 node_modules 重装也不行
重装@babel-runtime 也不行

1

Module not found: Error: Can't resolve '@babel/runtime/helpers/esm/extends' in '/var/www/genecast-h5/node_modules/history/esm'

各种查

Homebrew 可能会用到的命令记录

使用 MAC 开发，软件包的管理器最好用的我觉得就是Homebrew，谁用谁知道
记录下常用的Homebrew命令

MacOS 安装 Homebrew

将以下命令粘贴至终端,也可去Homebrew 官网查看安装
等待命令执行完毕

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

命令

以 Git 作为应用示例

查看 brew 的帮助

1

brew –help

安装软件

1

brew install git

卸载软件

1

brew uninstall git

搜索软件

1

brew search git

显示已经安装软件列表

1

brew list

更新软件

更新 Homebrew
把所有的 Formula 目录更新，并且会对本机已经安装并有更新的软件用*标明。

1

brew update