react点滴yan

介绍 Preact Signals
react context原理
React 中 key 的重要性是什么
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能

全栈潇晨-react源码解析
ReactPortals传送门
react的合成事件

React 的diff 算法采用了深度优先遍历算法。因为广度优先遍历可能会导致组件的生命周期时序错乱，而深度优先遍历算法就可以解决这个问题。

Mobx与Redux的异同
https://www.jianshu.com/p/f38207f33495
为什么说vue是局部更新，react是全量更新？

？？？react18 的增量更新逻辑
proxy 增量更新逻辑
详解react 15~18新增特性
详聊immer.js高效复制与冻结"对象"的原理于局限性
利用proxy做优化，只有修改了才监听
vue通过递归的方式实现了，proxy的深度监听

concurrent mode
concurrent rendering
lane React 的源码与原理解读（九）：Lanes
suspense React之Suspense尝鲜,处理前后端IO异步操作
react 在cpu 16.6ms渲染时间和io(网络,ajax延时情况)上做优化。
cpu: js styles layout
react 15 半自动处理，
reconciler协调器
renderer渲染器
react 16 concurrent mode
scheduler 高优先级
reconciler fiber重构

？？？react-demo项目：自定义实现一个弹框Dialog组件
vue封装单文件弹窗组件

keep-alive
【vue】通俗易懂了解keep-alive实现原理
react 中的 keep-alive
React18实现keepalive效果 react-router-dom@6 outlet 路由缓存 页面缓存

自己写一个阉割版的react
typescript点滴yan
写一个弹窗。
网上介绍ant design源码
类组件和函数组件之间有什么区别？
react动画
Typescript中的协变、逆变、双向协变

redux 中间方法实现 promise,function

----------斜体样式打印:

react常用的hooks
父如何调用子组件的方法
vue 和 react 的区别？
use-context和redux区别和联系
fiber vs stack
jsx和Fiber有什么关系
Fiber是什么，它为什么能提高性能
fiber双缓存技术
当调用 setState的时候
 真实 DOM 和虚拟 DOM
如何减少render渲染次数
react优化
解释React组件的生命周期方法
【React深入】从Mixin到HOC再到Hook
React.memo&useMemo的异同点
useMemo和useCallback的区别及使用场景
PureComponent 和 React.memo
React中元素（ element）和组件（ component）有什么区别
react 18
react 18 源码
react hooks的优缺点
类组件和函数组件之间有什么区别？
react是同步还是异步
useEffect它是componentDidMount，componentDidUpdate、componentWillUnmount三个生命周期的合集
hooks的实现原理
react的diff算法
react的组件通信方式
react的事件冒泡
react状态管理
react动画
路由
react的状态管理
flux和redux
react semi原理
useLayoutEffect
hooks写一个定时器，60秒自动销毁
不能直接在useEffect中使用async函数

====typescript
typescript优点，缺点
typescript的基本类型
(unknown,void,never的使用场景,非空断言运算符 ! 和 可选链运算符 ?.的区别,typeof,in)
type 与 interface 的区别
interface和class区别
泛型(泛型工具)
Partical
Record
Pick
Exclude
Omit
ReturnType
Required
类型定义文件(.d.ts)如何放置

---

react 写测试用例

react服务端渲染
手动实现一个useDebounce
create react app
npm run eject，把项目的webpack配置弹出来
React初级知识点汇总（笔记）
React Hooks 详解（2022的第一篇文章，献给 React Hooks）

https://xiaochen1024.com/series/600a9a104bf83f002edaf53f
react实现复杂的功能
react优缺点, jsx, 虚拟dom，真实dom, dom diff, setState之后发生了什么，常用的hooks,类组件和函数组件的差别，React中组件间过渡动画，react18, react事件，key,react的hooks,高阶组件，react与VUE, 是MVVP么
redux，常用的中间件，React中组件间过渡动画，
react的生命周期，React中refs的作用
react-router

react面试题

react源码解析20.总结&第一章的面试题解答
全栈潇晨-react源码解析
2021年React常见的面试题以及答案(持续更新中…)
2022react面试题整理
必须要会的 50 个React 面试题
30道常见React基础面试题（附答案）
面试题整理｜50个React面试题及解析
React 知识点理解
react和vue底层原理
react脑图
react fiber架构学习
React hooks useEffect中如何使用异步函数（即如何使用async/await）

---

异步组件-suspense形式 实现代码分包

---

react的错误边界
仅仅作用于类组件，如何函数组件想用错误边界，需要封装hooks。

---

React Router6学习(包括组件和Hooks)
Outlet

react-router-dom的基本使用

---

小知识点

react的事件冒泡

react的组件通信方式

---

react常用的hooks

常用的Hooks 库:
aHooks
react-use

useMemo, useCallback
useReducer,useContext, forwardRef 与 useImperativeHandle 
useLayout, useEffect, useLayoutEffect
useDebounce,useThrottle
useQs
usePolling
useModal
useEventListener
useReducer + createContext + useContext 

父如何调用子组件的方法

第一种方式  forwardRef 与 useImperativeHandle 
function Child(props,ref){
   
  const inputRef = useRef();
  useImperativeHandle(ref,()=>(
    {
   
      focus(){
   
        inputRef.current.focus();
      }
    }
  ));
  return (
    <input type="text" ref={
   inputRef}/>
  )
}
Child = forwardRef(Child);
function Parent(){
   
  let [number,setNumber] = useState(0); 
  const inputRef = useRef();
  function getFocus(){
   
    console.log(inputRef.current);
    inputRef.current.value = 'focus';
    inputRef.current.focus();
  }
  return (
      <>
        <Child ref={
   inputRef}/>
        <button onClick={
   ()=>setNumber({
   number:number+1})}>+</button>
        <button onClick={
   getFocus}>获得焦点</button>
      </>
  )
}


第二种方式 通过emit

vue 和 react 的区别？
React与Vue的区别和对比

相同点：
（1）都是用于创建UI的 JavaScript库。
（2）都以组件化的形式开发。
（3）都使用虚拟DOM。
（4）都可以放在单独的HTML文件中，或者放在 Webpack设置的一个更复杂的模块中。
（5）都有独立但常用的路由器和状态管理库。
它们最大的区别在于 Vue. js通常使用HTML模板文件，而 React完全使用 JavaScript创建虚拟DOM。 Vue. js还具有对于“可变状态”的“ reactivity”的重新渲染的自动化检测系统。
不同点：
1. 监听数据变化的实现原理不同。数据流的不同，框架本质不同
2. 组件通信的区别
3. 模板渲染方式的不同
5. 渲染过程不同.
6. Vuex和Redux的区别
7. HoC和mixins。

use-context和redux区别和联系

use-context 
1. 比较便捷，任意拆分。
2. 处理异步十分简单，不需要像redux中使用中间件来实现。redux可以有thunk, promise, 等中间件的支持，use-context 不需要。
3. 和ui组件强绑定的状态，有些状态需要脱离ui，进行初始化和消费。
4. redux的数据流更为清晰，use-context有点违背了违反了数据的不可变性。use-context 数据流更为清晰，仅仅子树都会重新渲染(凡事用到use-context的地方都会重新渲染)。
结论：如果全局状态比较少简单，建议用hooks,复杂的话，建议用redux。
use-context改变仅仅会出发使用useContext的组件，其他的子或者父都不会出发刷新。
那redux了呢，是全部组件都会渲染的过程么

Omit是无法用在联合类型上的

解决typescript中使用Object.keys报错的问题

---

路由原理+监听route query

react route基本使用
React 路由详解(超详细详解)
react路由守卫（路由拦截）

react-router-dom的钩子函数, 路由钩子函数主要有四种: 参考链接
useHistory
useLocation
useParams 用来获取?id=1&name=456
useRouteMatch
useSearchParams

history获取都可以通过hooks，也可以通过路由组建 react之路由导航

1. useLocation 获取location,监听location的改变。
const Header = function (props) {
  useEffect(() => {
    console.log(props.location);
  }, [props.location])

2. 通过history监听history的改变。
const history = useHistory();
useEffect(() => {
    const unlisten = history.listen((historyLocation) => {
        cnosole.log(historyLocation)
    });
    return () => {
        unlisten();
    };
}, [history]);

原理实现
[zf-本地讲解]

hash的改变本质自己通过改变window.location.hash = **; hash的改变本来就不会刷新页面，所以直接根据不同的hash值渲染就可以。
history 方式切换本质通过属性改变，自己主动调用pushState，调用后url改变了，也不会引起页面刷新，而我们根据hashname的改变做对应的主键渲染

每次link改变，我们都是通过pushState去改变ulr,另外通过context去修改当前location和history的状态值，所以我们switch监听的是context的location而不是window.location

---

react semi原理

字节跳动旗下抖音系企业应用设计系统 Semi Design 开源啦
Semi Design - UI组件库如何分层设计，使其具备适配多种mvvm框架能力
如何评价抖音前端开源的 Semi Design
https://xw.qq.com/cmsid/20211030A00CQO00

---

真实 DOM 和虚拟 DOM

1.真实DOM，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构。
Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应。
2.与jsx关系。真实Dom, 如果元素更新，则创建新DOM。虚拟Dom，如果元素更新，则更新 JSX。
3.与dom关系。
4.与操作dom管理
5.更新速度
6. 内存快慢

react优化

1. 组件不要太大，注意分割新的组件。React hooks 组件中尽量不要写流水线代码，保持在 200 行左右最佳，通过组件化降低耦合和复杂度，还能优化一定的性能。
2. 变量可以放到组件外边的不要放到里边。
3. 传给子组件的方法能用useCallback，注意使用useCallback，要不callback每次都是新的会导致子组建的.memo失效。
4. 减少渲染次数，合并state, 正确写好依赖，ref替换state.
5. react 18批处理。
6. 使用 shouldComponentUpdate 或 PureComponent
7. 虚拟列表，分页加载
8. 调整一些变量的位置，避免多余计算。
9. 使用 React.lazy 和 Suspense
10. useWhyDidYouUpdate 查看为啥引起的更新。
11. React实现控制减少useContext导致非必要的渲染详解_React
12. 自属性diff避免无效渲染
13. 借助 Chrome Performance 代码进行调试，录制一段操作，在 Timings 选项卡中分析耗时最长逻辑在什么地方，会展现出组件的层级栈，然后精准优化。

解决浅diff的问题，有时候有必要加上自己的逻辑进行深度diff

列表添加index属性
用pureComponent代替component
shouldComponentUpdate
bailoutOnAlreadyFinishedWork

解释React组件的生命周期方法

componentWillMount () – 在客户端和服务器端渲染之前执行。
componentDidMount () – 仅在第一次渲染后在客户端执行。
componentWillReceiveProps () – 一旦从父类接收到props并且在调用另一个渲染之前调用。
shouldComponentUpdate () – 根据特定条件返回 true 或 false 值。如果你希望组件更新，请返回true否则返回false。默认情况下，它返回 false。
componentWillUpdate () – 在 DOM 中进行渲染之前调用。
componentDidUpdate () – 在渲染发生后立即调用。
componentWillUnmount () – 在组件从 DOM 中卸载后调用。它用于清理内存空间。
----shouldComponentUpdate生命周期函数返回false,表示当前Person组件不会进行更新操作，因此componentWillUpdate生命周期函数也不会触发。

【React深入】从Mixin到HOC再到Hook

Mixin带来的危害
1-Mixin 可能会相互依赖，相互耦合，不利于代码维护
2-不同的Mixin中的方法可能会相互冲突
3-Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性
React现在已经不再推荐使用Mixin来解决代码复用问题，因为Mixin带来的危害比他产生的价值还要巨大，并且React全面推荐使用高阶组件来替代它。另外，高阶组件还能实现更多其他更强大的功能，在学习高阶组件之前，我们先来看一个设计模式.
HOC的缺陷:
HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难。
HOC可以劫持props，在不遵守约定的情况下也可能造成冲突。

useMemo 模拟usecallback

useCallback(f