React日常学习笔记

React中文官网

1.Fragments

//完整写法
<React.Fragment key={...}>
	<div></div>
</React.Fragment>
//简写
<>
	<div></div>
</>

注意：简写 不接受 任何属性，完整写法只能接收 key属性（用于遍历）

2.classnames插件

classnames是react中用于动态传入多个class的一款常用插件

//安装
npm install classnames
npm install @types/classnames		//如果使用typescript模板，则需要多安装这一条

//使用
import classnames from 'classnames';
<div className={classnames('classA', { classB: true, classC: false })}></div>

3.redux原理

store：数据存储
state：获取某一时间的数据
view：一个state对应着一个view，即数据展示到页面
action：view上想触发数据变更，就需要生成一个action
dispatch：dispatch(action)将该action通知到store
reducer：store收到action后，交给reducer，reducer根据不同的action执行不同的逻辑，最后更新state，新state又映射到对应的view上

4.react-hook的路由模式

模式：HashRouter 和 BrowerRouter
用法：

import {BrowerRouter, HashRouter, Switch, Redirect, Route} from 'react-router-dom';
<BrowerRouter>	//官方推荐
	<Switch>
		<Route path='/' exact component={...}/>
		<Route path='/xxx' component={...}/>
	</Switch>
</BrowerRouter>

注意：BrowerRouter相当于是history模式，刷新的时候可能出现404界面，所以需要后台配置重定向。比如nginx中的配置文件设置，当访问到不存在的url时，try_files指回index.html即可。

路由相关的hook

useHistory：用于跳转路由，push({pathname:‘/xxx’, state: {…}})和goback
useParams：用于获取url中的参数，以{key:value}的形式返回
useLocation：用于获取url的所有信息，包括push中的state
useRouteMatch：用于与相同的方式匹配当前URL

5.hook原理解析

参考文档

6.Switch标签 和 exact属性 的作用

参考文档

7.react16 主要原理

React-Fiber 和 链表 的关系
react-fiber 其实就是通过将 vdom tree 改造为链表结构，以实现异步断点更新（牺牲更新时间，换取更流畅地渲染）。react15的更新优化主要依靠SCU（ShouldComponentUpdate）的手动优化，而react16的 fiber 相当于是一种内部的自动优化

React 的 Diff算法
Diff算法 通过比对新旧fiber节点的变化进行更新，不仅仅比对key，还比对新旧fiber节点的位置，能复用则复用，能少移动则少移动

React16 更新页面的 3个主要阶段
1）sheduler（调度阶段，不可打断）：根据任务的优先级进行调度，优先级高的进入调和阶段
2）reconciler（调和阶段，可打断）：其实就是进行diff比对，把vdom改造为fiber节点，同时比对新旧fiber节点，标记需要变更的节点
3）commit（提交阶段，不可打断）：将比对后需要更新的节点列表，一次性渲染到页面

参考文章：
详解 React 16 的 Diff 策略
React 16任务调度优势及原理解析
React 16 新特性全解
一篇长文帮你彻底搞懂React的调度机制原理
React Fiber架构