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 时,出现下面提示

image.png

这是因为修改了 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 完成更新

image.png

阅读全文 »

解决下面 👇 的报错

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
阅读全文 »
0%