Electron学习之旅2，bootstrap小记，全局监听键盘事件，useRef（记值、获取节点)，react-fontawesome，清除黄色边框，状态提升，解构拿事件对象，classnames

0、bootstrap小记

container-fluid // 流式布局
px-0 mb-0 // 清除 padding X轴，清除 margin-bottom
row col-2 // 栅格化
no-gutters // 清除外边距
rounded-circle // 圆角
btn-primary // 按钮样式
list-group list-group-flush list-group-item // 列表相关
d-flex align-items-center justify-content-between // flex布局相关
form-control // input表单样式
nav nav-pills nav-item // 选项卡

spinner // 加载状态
text-center // 文字居中 text-primary // 文字蓝色

1、全局监听键盘事件 // 避免组件的重复监听

document.addEventListener('keyup', handleInputEvent);

2、useRef

使react提供的hook，用于记录值或节点。

let number = useRef(1);
number.current++; // 计数累加2,3,4...

let node = useRef(null);
console.log(node.current); // 获取绑定ref={node}组件的DOM节点

2.1 配合useRef，自动focus

第一种：用于获取当前组件element节点

const node = useRef(null);
useEffect(() => {
	node.current.focus(); // current获取node节点，focus()高亮
}, [inputActive])

第二种：用于自定义hook，返回传入的事件对象的节点

 let node = useRef(null);
 
 const handleContextMenu = (e) => {
   menu.popup({ window: remote.getCurrentWindow() });
   node.current = e.target;
 };
 return node.current;

2.2 直接获取Node

相关文章
react函数式组件和类组件创建ref的方法

3、react-fontawesome

react-fontawesome Git地址
1、依次安装三个依赖。
2、在想要的组件引入

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // 引入组件
import { faSearch } from '@fortawesome/free-solid-svg-icons'; // 找寻图标
// html中 ...
	<FontAwesomeIcon
	  title="搜索"
	  icon={faSearch}
	></FontAwesomeIcon>

3.1清除黄色边框

设置小方法

4、状态提升

多组件的公共状态，应该提升到距离这些组件最近的父组件中进行管理。

5、解构拿事件对象

const keyUpHandler = ({keyCode}) => {
  if (targetKeyCode === keyCode) {
    setKeyPressed(false);
  }
}

6、classnames

cnpm i classnames --save