源码剖析
一、React18有哪些更新？
- setState主动批处理
在react17中，只有react事件会进行批处理，原生js事件、promise，setTimeout、setInterval不会
react18，将所有事件都进行批处理，即屡次setState会被合并为1次执行，进步了性能，在数据层，将多个状态更新合并成一次解决（在视图层，将屡次渲染合并成一次渲染）
- 引入了新的root API，反对new concurrent renderer(并发模式的渲染)
//React 17import React from "react"import ReactDOM from "react-dom"import App from "./App"const root = document.getElementById("root")ReactDOM.render(<App/>,root)// 卸载组件ReactDOM.unmountComponentAtNode(root) // React 18import React from "react"import ReactDOM from "react-dom/client"import App from "./App"const root = document.getElementById("root")ReactDOM.createRoot(root).render(<App/>)// 卸载组件root.unmount() - 去掉了对IE浏览器的反对，react18引入的新个性全副基于古代浏览器，如需反对须要退回到react17版本
- flushSync
批量更新是一个破坏性的更新，如果想退出批量更新，能够应用flushSync
import React,{useState} from "react"import {flushSync} from "react-dom"const App=()=>{ const [count,setCount]=useState(0) const [count2,setCount2]=useState(0) return ( <div className="App"> <button onClick=(()=>{ // 第一次更新 flushSync(()=>{ setCount(count=>count+1) }) // 第二次更新 flushSync(()=>{ setCount2(count2=>count2+1) }) })>点击</button> <span>count:{count}</span> <span>count2:{count2}</span> </div> )}export default App- react组件返回值更新
- 在react17中，返回空组件只能返回null，显式返回undefined会报错
- 在react18中，反对null和undefined返回
- strict mode更新
当你应用严格模式时，React会对每个组件返回两次渲染，以便你察看一些意想不到的后果,在react17中去掉了一次渲染的控制台日志，以便让日志容易浏览。react18勾销了这个限度，第二次渲染会以浅灰色呈现在控制台日志
- Suspense不再须要fallback捕捉
- 反对useId
在服务器和客户端生成雷同的惟一一个id，防止hydrating的不兼容
- useSyncExternalStore
用于解决内部数据撕裂问题
- useInsertionEffect
这个hooks只倡议在css in js库中应用，这个hooks执行机会在DOM生成之后，useLayoutEffect执行之前，它的工作原理大抵与useLayoutEffect雷同，此时无法访问DOM节点的援用，个别用于提前注入脚本
- Concurrent Mode
并发模式不是一个性能，而是一个底层设计。
它能够帮忙利用放弃响应，依据用户的设施性能和网速进行调整，它通过渲染可中断来修复阻塞渲染机制。在concurrent模式中，React能够同时更新多个状态
区别就是使同步不可中断更新变成了异步可中断更新
useDeferredValue和startTransition用来标记一次非紧急更新
二、React的设计思维
- 组件化
每个组件都合乎凋谢-关闭准则，关闭是针对渲染工作流来说的，指的是组件外部的状态都由本身保护，只解决外部的渲染逻辑。凋谢是针对组件通信来说的，指的是不同组件能够通过props（单项数据流）进行数据交互
- 数据驱动视图
UI=f(data)
通过下面这个公式得出，如果要渲染界面，不应该间接操作DOM，而是通过批改数据(state或prop)，数据驱动视图更新
- 虚构DOM
由浏览器的渲染流水线可知，DOM操作是一个低廉的操作，很耗性能，因而产生了虚构DOM。虚构DOM是对实在DOM的映射，React通过新旧虚构DOM比照，失去须要更新的局部，实现数据的增量更新
React设计模式
三、JSX是什么，它和JS有什么区别
JSX是react的语法糖，它容许在html中写JS，它不能被浏览器间接辨认，须要通过webpack、babel之类的编译工具转换为JS执行
JSX与JS的区别：
- JS能够被打包工具间接编译，不须要额定转换，jsx须要通过babel编译，它是React.createElement的语法糖，应用jsx等价于React.createElement
- jsx是js的语法扩大，容许在html中写JS；JS是原生写法，须要通过script标签引入
为什么在文件中没有应用react，也要在文件顶部import React from “react”
只有应用了jsx，就须要援用react，因为jsx实质就是React.createElement
为什么React自定义组件首字母要大写
jsx通过babel本义时，调用了React.createElement函数，它接管三个参数，别离是type元素类型，props元素属性，children子元素。
如下图所示，从jsx到实在DOM须要经验jsx->虚构DOM->实在DOM。如果组件首字母为小写，它会被当成字符串进行传递，在创立虚构DOM的时候，就会把它当成一个html标签，而html没有app这个标签，就会报错。组件首字母为大写，它会当成一个变量进行传递，React晓得它是个自定义组件就不会报错了
<app>lyllovelemon</app>// 本义后React.createElement("app",null,"lyllovelemon")<App>lyllovelemon</App>// 本义后React.createElement(App,null,lyllovelemon)React组件为什么不能返回多个元素
这个问题也能够了解为React组件为什么只能有一个根元素，起因：
- React组件最初会编译为render函数，函数的返回值只能是1个，如果不必独自的根节点包裹，就会并列返回多个值，这在js中是不容许的
class App extends React.Component{ render(){ return( <div> <h1 className="title">lyllovelemon</h1> <span>内容</span> </div> )}//编译后class App extends React.Component{ render(){ return React.createElement('div',null,[ React.createElement('h1',{className:'title'},'lyllovelemon'), React.createElement('span'),null,'内容' ]) }}- react的虚构DOM是一个树状构造，树的根节点只能是1个，如果有多个根节点，无奈确认是在哪棵树上进行更新
vue的根节点为什么只有一个也是同样的起因
React组件怎么能够返回多个组件
- 应用HOC（高阶函数）
- 应用React.Fragment,能够让你将元素列表加到一个分组中，而且不会创立额定的节点（相似vue的template)
renderList(){ this.state.list.map((item,key)=>{ return (<React.Fragment> <tr key={item.id}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.address}</td> </tr> </React.Fragment>) })}- 应用数组返回
renderList(){ this.state.list.map((item,key)=>{ return [ <tr key={item.id}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.address}</td> </tr> ] })}React中元素和组件的区别
react组件有类组件、函数组件
react元素是通过jsx创立的
const element = <div className="element">我是元素</div> 四、简述React的生命周期
生命周期指的是组件实例从创立到销毁的流程，函数组件没有生命周期，只有类组件才有，因为只有class组件会创立组件实例
组件的生命周期能够分为挂载、更新、卸载阶段
挂载
constructor 能够进行state和props的初始化
static getDerivedStateFromProps
render
componentDidMount 第一次渲染后调用，能够拜访DOM，进行异步申请和定时器、音讯订阅
更新
当组件的props或state变动会触发更新
static getDerivedStateFromProps
shouldComponentUpdate 返回一个布尔值，默认返回true，能够通过这个生命周期钩子进行性能优化，确认不须要更新组件时调用
render
getSnapShotBeforeUpdate
componentDidUpdate 在组件实现更新后调用
卸载
componentWillUnmount 组件从DOM中被移除的时候调用
谬误捕捉
static getDerivedStateFromError 在errorBoundary中应用
componentDidCatch
render是class组件中惟一必须实现的办法
五、React事件机制
什么是合成事件
React基于浏览器的事件机制实现了一套本身的事件机制，它合乎W3C标准，包含事件触发、事件冒泡、事件捕捉、事件合成和事件派发等
React事件的设计动机(作用)：
- 在底层磨平不同浏览器的差别，React实现了对立的事件机制，咱们不再须要解决浏览器事件机制方面的兼容问题，在下层面向开发者裸露稳固、对立的、与原生事件雷同的事件接口
- React把握了事件机制的主动权，实现了对所有事件的中心化管控
- React引入事件池防止垃圾回收，在事件池中获取或开释事件对象，防止频繁的创立和销毁
React事件机制和原生DOM事件流有什么区别
尽管合成事件不是原生DOM事件，但它蕴含了原生DOM事件的援用，能够通过e.nativeEvent拜访
DOM事件流是怎么工作的，一个页面往往会绑定多个事件，页面接管事件的程序叫事件流
W3C规范事件的流传过程：
- 事件捕捉
- 处于指标
- 事件冒泡
罕用的事件处理性能优化伎俩：事件委托
把多个子元素同一类型的监听函数合并到父元素上，通过一个函数监听的行为叫事件委托
咱们写的React事件是绑定在DOM上吗，如果不是绑定在哪里
React16的事件绑定在document上， React17当前事件绑定在container上,ReactDOM.render(app,container)
React事件机制总结如下：
事件绑定 事件触发
- React所有的事件绑定在container上(react17当前),而不是绑定在DOM元素上（作用：缩小内存开销，所有的事件处理都在container上，其余节点没有绑定事件）
- React本身实现了一套冒泡机制，不能通过return false阻止冒泡
- React通过SytheticEvent实现了事件合成
React实现事件绑定的过程
1.建设合成事件与原生事件的对应关系
registrationNameModule, 它建设了React事件到plugin的映射，它蕴含React反对的所有事件的类型，用于判断一个组件的prop是否是事件类型
{ onBlur:SimpleEventPlugin, onClick:SimpleEventPlugin, onClickCapture:SimpleEventPlugin, onChange:ChangeEventPlugin, onChangeCapture:ChangeEventPlugin, onMouseEnter:EnterLeaveEventPlugin, onMouseLeave:EnterLeaveEventPlugin, ... }registrationNameDependencies， 这个对象记录了React事件到原生事件的映射
{ onBlur: ['blur'], onClick: ['click'], onClickCapture: ['click'], onChange: ['blur', 'change', 'click', 'focus', 'input', 'keydown', 'keyup', 'selectionchange'], onMouseEnter: ['mouseout', 'mouseover'], onMouseLeave: ['mouseout', 'mouseover'],}plugins对象, 记录了所有注册的插件列表
plugins = [LegacySimpleEventPlugin, LegacyEnterLeaveEventPlugin, ...]为什么针对同一个事件，即便可能存在屡次回调，document（container）也只须要注册一次监听
因为React注册到document(container)上的并不是一个某个DOM节点具体的回调逻辑，而是一个对立的事件散发函数dispatchEvent - > 事件委托思维
dispatchEvent是怎么实现事件散发的
事件触发的实质是对dispatchEvent函数的调用
React事件处理为什么要手动绑定this
react组件会被编译为React.createElement,在createElement中，它的this失落了，并不是由组件实例调用的，因而须要手动绑定this
为什么不能通过return false阻止事件的默认行为
因为React基于浏览器的事件机制实现了一套本人的事件机制，和原生DOM事件不同，它采纳了事件委托的思维，通过dispatch对立散发事件处理函数
React怎么阻止事件冒泡
- 阻止合成事件的冒泡用e.stopPropagation()
- 阻止合成事件和最外层document事件冒泡，应用e.nativeEvent.stopImmediatePropogation()
- 阻止合成事件和除了最外层document事件冒泡，通过判断e.target防止
document.body.addEventListener('click',e=>{ if(e.target && e.target.matches('div.stop')){ return } this.setState({active:false})})HOC和hooks的区别
useEffect和useLayoutEffect区别
React性能优化伎俩
- shouldComponentUpdate
- memo
- getDerviedStateFromProps
- 应用Fragment
- v-for应用正确的key
- 拆分尽可能小的可复用组件，ErrorBoundary
- 应用React.lazy和React.Suspense提早加载不须要立马应用的组件
六、罕用组件
谬误边界
React局部组件的谬误不应该导致整个利用解体，为了解决这个问题，React16引入了谬误边界
应用办法：
React组件在外部定义了getDerivedStateFromError或者componentDidCatch，它就是一个谬误边界。getDerviedStateFromError和componentDidCatch的区别是前者展现降级UI，后者记录具体的错误信息，它只能用于class组件
import React from "react"class ErrorBoundary extends React.Component{ constructor(props){ super(props) this.state={ hasError:false } } staic getDerivedStateFromError(){ return { hasError:true} } componentDidCatch(err,info){ console.error(err,info) } render(){ if(this.state.hasError){ return <div>Oops,err</div> } return this.props.children }}// App.jsximport React from "react"import ErrorBoundary from "./components/ErrorBoundary"import ComponentA from "./components/ComponentA"export class App extends React.Component{ render(){ return ( <ErrorBoundary> <ComponentA></ComponentA> </ErrorBoundary> ) }}谬误边界无奈捕捉本身的谬误，也无奈捕捉事件处理、异步代码(setTimeout、requestAnimationFrame)、服务端渲染的谬误
Portal
Portal提供了让子组件渲染在除了父组件之外的DOM节点的形式,它接管两个参数，第一个是须要渲染的React元素，第二个是渲染的中央(DOM元素)
ReactDOM.createPortal(child,container)用处：弹窗、提示框等
Fragment
Fragment提供了一种将子列表分组又不产生额定DOM节点的办法
Context
惯例的组件数据传递是应用props，当一个嵌套组件向另一个嵌套组件传递数据时，props会被传递很多层，很多不须要用到props的组件也引入了数据，会造成数据起源不清晰，多余的变量定义等问题，Context提供了一种跨层级组件数据传递的办法
const ThemeContext = React.createContext('light')class App extends React.Component { render(){ return( <ThemeContext.Provider value="dark"> <ToolBar/> </ThemeContext> ) }}function ToolBar(){ return <div> <ThemeButton/> </div> }class ThemeButton extends React.Component { static contextType = ThemeContext render(){ return <Button theme={this.context}></Button> }}Suspense
Suspense使组件容许在某些操作完结后再进行渲染，比方接口申请,个别与React.lazy一起应用
Transition
Transition是React18引入的一个并发个性，容许操作被中断，防止回到可见内容的Suspense降级计划
七、Redux工作原理
Redux是一个状态治理库，应用场景：
- 跨层级组件数据共享与通信
- 一些须要长久化的全局数据，比方用户登录信息
Redux工作原理
应用单例模式实现
Store 一个全局状态治理对象
Reducer 一个纯函数，依据旧state和props更新新state
Action 扭转状态的惟一形式是dispatch action
八、React-Router工作原理
为什么须要前端路由
- 晚期：一个页面对应一个路由，路由跳转导致页面刷新，用户体验差
- ajax的呈现使得不刷新页面也能够更新页面内容，呈现了SPA（单页利用）。SPA不能记住用户操作，只有一个页面对URL做映射，SEO不敌对
- 前端路由帮忙咱们在仅有一个页面时记住用户进行了哪些操作
前端路由解决了什么问题
- 当用户刷新页面，浏览器会依据以后URL对资源进行重定向(发动申请)
- 单页面对服务端来说就是一套资源，怎么做到不同的URL映射不同的视图内容
- 拦挡用户的刷新操作，防止不必要的资源申请；感知URL的变动
react-router-dom有哪些组件
HashRouter/BrowserRouter 路由器
Route 路由匹配
Link 链接，在html中是个锚点
NavLink 以后流动链接
Switch 路由跳转
Redirect 路由重定向
<Link to="/home">Home</Link><NavLink to="/abount" activeClassName="active">About</NavLink><Redirect to="/dashboard">Dashboard</Redirect>React Router外围能力：跳转
路由负责定义门路和组件的映射关系
导航负责触发路由的扭转
路由器依据Route定义的映射关系为新的门路匹配对应的逻辑
BrowserRouter应用的HTML5的history api实现路由跳转
HashRouter应用URL的hash属性管制路由跳转
前端通用路由解决方案
- hash模式
扭转URL以#宰割的门路字符串，让页面感知路由变动的一种模式,通过hashchange事件触发
- history模式
通过浏览器的history api实现,通过popState事件触发
九、数据如何在React组件中流动
React组件通信
react组件通信形式有哪些
组件通信的形式有很多种，能够分为以下几种：
- 父组件向子组件通信
- 子组件向父组件通信
- 兄弟组件通信
- 父组件向后辈组件通信
- 无关组件通信
父组件向子组件通信
- props传递，利用React单向数据流的思维，通过props传递
function Child(props){ return ( <div className="child"> <input value={props.name} type="text"/> </div> )}const Parent = <Child name="我是儿子"/>子组件向父组件通信
- 回调函数
父组件向子组件传递一个函数，通过函数回调，拿到子组件传过来的值
import React from "react"class Parent extends React.Component{ constructor(){ super() this.state={ price:0 } } getPrice(val){ this.setState({ price:val }) } render(){ return (<div> <span className="label">价格:</span> <span className="value">{this.state.price}</span> <Child getPrice={this.getPrice.bind(this)}/> </div>) }}class Child extends React.Component{ getItemPrice(e){ this.props.getPrice(e) } render(){ return ( <div> <button onClick={this.getItemPrice.bind(this)}>廓形大衣</button> <button onClick={this.getItemPrice.bind(this)>牛仔裤</button> </div> ) }}- 事件冒泡
点击子组件的button按钮，事件会冒泡到父组件上
const Child = () => { return <button>点击</button>;};const Parent = () => { const sayName = name => { console.log(name); }; return ( <div onClick={() => sayName('lyllovelemon')}> <Child /> </div> );};export default Parent;- Ref
import React from "react"class Parent extends React.Component{ constructor(props){ super(props) this.myRef=React.createRef() } componentDidMount(){ this.myRef.current.changeVal('lyllovelemon') }}class Child extends React.Component{ constructor(props){ super(props) } changeVal(name){ console.log(name) } render(){ return (<div></div>) }}兄弟组件通信
实际上就是通过父组件直达数据的，子组件a传递给父组件，父组件再传递给子组件b
import React from "react"class Parent extends React.Component{ constructor(props){ super(props) this.state={ count:0 } } increment(){ this.setState({ count:this.state.count+1 }) } render(){ return ( <div> <ChildOne count={this.state.count} /> <ChildTwo onClick={this.increment} /> </div> ) }}父组件向后辈组件通信
Context
import React from "react"const PriceContext = React.createContext("price") export default class Parent extends React.Component{ constructor(props){ super(props) } render(){ return ( <PriceContext.Provider value={200}> </PriceContext> ) }}class Child extends React.Component{ ...}class SubChild extends React.Component{ constructor(props){ super(props) } render(){ return ( <PriceContext.Consumer> { price=> <div>price:{price}</div> } </PriceContext.Consumner> ) }}HOC
Redux
ref，useRef，forwardRef，useImperativeHandle
十、React Hooks
React hooks解决了什么问题
在React16.8以前，罕用的组件写法有class组件和function组件
class Demo extends React.Component{ constructor(props){ super(props) this.state={ name:'lyllovelemon' } } changeName(){ this.setState({ name:'lylmusiclover' }) } render(){ return ( <div> {this.state.name} <button onClick={this.changeName.bind(this)}>换名</button> </div> ) }}function Demo2({name,setName}){ return <div> {name} <button onClick={()=>setName('哈哈哈')}>换名</button> </div>}//App.jsxfunction App() { const [name,setName]=useState('lyl') return ( <div className="App"> <Demo/> <Demo2 setName={setName} name={name}/> </div> )}函数组件与类组件的区别:
- 类组件须要申明constructor，函数组件不须要
- 类组件须要手动绑定this，函数组件不须要
- 类组件有生命周期钩子，函数组件没有
- 类组件能够定义并保护本人的state，属于有状态组件，函数组件是无状态组件
- 类组件须要继承class，函数组件不须要
- 类组件应用的是面向对象的办法，封装：组件属性和办法都封装在组件外部 继承:通过extends React.Component继承;函数组件应用的是函数式编程思维
why React hooks
长处：
- 辞别难以了解的class组件
- 解决业务逻辑难以拆分的问题
- 使状态逻辑复用变的简略可行
- 函数组件从设计理念来看，更适宜react
局限性：
- hooks还不能残缺的为函数组件提供类组件的能力
- 函数组件给了咱们肯定水平的自在，却也对开发者的程度提出了更高的要求
- Hooks 在应用层面有着严格的规定束缚
罕用hooks
useState
十一、SetState是同步还是异步的
setState是一个异步办法，然而在setTimeout/setInterval等定时器里逃脱了React对它的掌控，变成了同步办法
实现机制相似于vue的$nextTick和浏览器的事件循环机制，每个setState都会被react退出到工作队列，屡次对同一个state应用setState只会返回最初一次的后果，因为它不是立即就更新，而是先放在队列中，等时机成熟在执行批量更新。React18当前，应用了createRoot api后，所有setState都是异步批量执行的
十二、fiber架构
什么是fiber，fiber解决了什么问题
在React16以前，React更新是通过树的深度优先遍历实现的，遍历是不能中断的，当树的层级深就会产生栈的层级过深，页面渲染速度变慢的问题，为了解决这个问题引入了fiber，React fiber就是虚构DOM，它是一个链表构造，返回了return、children、siblings，别离代表父fiber，子fiber和兄弟fiber，随时可中断
Fiber是纤程，比线程更精密，示意对渲染线程实现更精密的管制
利用目标
实现增量渲染，增量渲染指的是把一个渲染工作合成为多个渲染工作，而后将其扩散到多个帧里。增量渲染是为了实现工作的可中断、可复原，并按优先级解决工作，从而达到更顺滑的用户体验
Fiber的可中断、可复原怎么实现的
fiber是协程，是比线程更小的单元，能够被人为中断和复原，当react更新工夫超过1帧时，会产生视觉卡顿的成果，因而咱们能够通过fiber把浏览器渲染过程分段执行，每执行一会就让出主线程控制权，执行优先级更高的工作
fiber是一个链表构造，它有三个指针，别离记录了以后节点的下一个兄弟节点，子节点，父节点。当遍历中断时，它是能够复原的，只须要保留以后节点的索引，就能依据索引找到对应的节点
Fiber更新机制
初始化
- 创立fiberRoot（React根元素）和rootFiber(通过ReactDOM.render或者ReactDOM.createRoot创立进去的)
- 进入beginWork
workInProgress:正在内存中构建的fiber树叫workInProgress fiber，在第一次更新时，所有的更新都产生在workInProgress树，在第一次更新后，workInProgress树上的状态是最新状态，它会替换current树
current:正在视图层渲染的树叫current fiber树
currentFiber.alternate = workInProgressFiberworkInProgressFiber.alternate = currentFiber- 深度和谐子节点，渲染视图
在新建的alternate树上，实现整个子节点的遍历，包含fiber的创立，最初会以workInProgress树最为最新的渲染树，fiberRoot的current指针指向workInProgress使其变成current fiber，实现初始化流程
更新
- 从新创立workInProgress树，复用以后current树上的alternate，作为新的workInProgress
渲染实现后，workInProgress树又变成current树
双缓冲模式
话剧上演中，演员须要切换不同的场景，以一个一小时话剧来说，在舞台中切换场景，工夫来不及。个别是筹备两个舞台，切换场景从右边舞台到左边舞台上演
在计算机图形畛域，通过让图形硬件交替读取两套缓冲数据，能够实现画面的无缝切换，缩小视觉的抖动甚至卡顿。
react的current树和workInProgress树应用双缓冲模式，能够缩小fiber节点的开销，缩小性能损耗
React渲染流程
如图，React用JSX形容页面，JSX通过babel编译为render function，执行后产生VDOM，VDOM不是间接渲染的，会先转换为fiber，再进行渲染。vdom转换为fiber的过程叫reconcile，转换过程会创立DOM，全副转换实现后会一次性commit到DOM，这个过程不是一次性的，而是可打断的，这就是fiber架构的渲染流程
vdom（React Element对象）中只记录了子节点，没有记录兄弟节点，因而渲染不可打断
fiber（fiberNode对象）是一个链表，它记录了父节点、兄弟节点、子节点，因而是能够打断的