单位网站建设自查报告范文,全自动三次元网站建设,网站要怎么上传,优质ppt模板免费下载react diff 算法 我们知道React会维护两个虚拟DOM#xff0c;那么是如何来比较#xff0c;如何来判断#xff0c;做出最优的解呢#xff1f;这就用到了diff算法 diff算法的作用
计算出Virtual DOM中真正变化的部分#xff0c;并只针对该部分进行原生DOM操作#xff0c;而…react diff 算法 我们知道React会维护两个虚拟DOM那么是如何来比较如何来判断做出最优的解呢这就用到了diff算法 diff算法的作用
计算出Virtual DOM中真正变化的部分并只针对该部分进行原生DOM操作而非重新渲染整个页面。
传统diff算法 通过循环递归对节点进行依次对比算法复杂度达到 O(n^3) n是树的节点数这个有多可怕呢——如果要展示1000个节点得执行上亿次比较。。即便是CPU快能执行30亿条命令也很难在一秒内计算出差异。 React的diff算法
什么是调和 将Virtual DOM树转换成actual DOM树的最少操作的过程 称为 调和 。 什么是React diff算法 diff算法是调和的具体实现。 diff策略 React用 三大策略 将O(n^3)杂度 转化为 O(n)复杂度 策略一tree diff
Web UI中DOM节点跨层级的移动操作特别少可以忽略不计同级比较,既然DOM 节点跨层级的移动操作少到可以忽略不计那么React通过updateDepth 对 Virtual DOM 树进行层级控制也就是同一层在对比的过程中如果发现节点不在了会完全删除不会对其他地方进行比较这样只需要对树遍历一次就OK了
策略二component diff
拥有相同类的两个组件 生成相似的树形结构拥有不同类的两个组件 生成不同的树形结构。
策略三element diff
对于同一层级的一组子节点通过唯一id区分。
tree diff
React通过updateDepth对Virtual DOM树进行层级控制。对树分层比较两棵树 只对同一层次节点 进行比较。如果该节点不存在时则该节点及其子节点会被完全删除不会再进一步比较。只需遍历一次就能完成整棵DOM树的比较。 那么问题来了如果DOM节点出现了跨层级操作,diff会咋办呢 答diff只简单考虑同层级的节点位置变换如果是跨层级的话只有创建节点和删除节点的操作。 如上图所示以A为根节点的整棵树会被重新创建而不是移动因此 官方建议不要进行DOM节点跨层级操作可以通过CSS隐藏、显示节点而不是真正地移除、添加DOM节点 component diff React对不同的组件间的比较有三种策略 同一类型的两个组件按原策略层级比较继续比较Virtual DOM树即可。同一类型的两个组件组件A变化为组件B时可能Virtual DOM没有任何变化如果知道这点变换的过程中Virtual DOM没有改变可节省大量计算时间所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。不同类型的组件将一个将被改变的组件判断为dirty component脏组件从而替换 整个组件的所有节点。 注意如果组件D和组件G的结构相似但是 React判断是 不同类型的组件则不会比较其结构而是删除 组件D及其子节点创建组件G及其子节点。 element diff 当节点处于同一层级时diff提供三种节点操作删除、插入、移动。 插入组件 C 不在集合A,B中需要插入删除 组件 D 在集合A,B,D中但 D的节点已经更改不能复用和更新所以需要删除 旧的 D 再创建新的。组件 D 之前在 集合A,B,D中但集合变成新的集合A,B了D 就需要被删除。 移动组件D已经在集合A,B,C,D里了且集合更新时D没有发生更新只是位置改变如新集合A,D,B,CD在第二个无须像传统diff让旧集合的第二个B和新集合的第二个D 比较并且删除第二个位置的B再在第二个位置插入D而是 对同一层级的同组子节点 添加唯一key进行区分移动即可。
diff的不足与待优化的地方 尽量减少类似将最后一个节点移动到列表首部的操作当节点数量过大或更新操作过于频繁时会影响React的渲染性能 react-router4的核心
路由变成了组件分散到各个页面不需要配置 比如link route/route
什么是 React Fiber?
Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性并为不同类型的更新分配优先级以及新的并发原语。 React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块并将其分散到多个帧中。
如何 React.createElement
const element h1 classNamegreetingHello, world!/h1;上述代码如何使用 React.createElement 来实现:
const element React.createElement(h1, { className: greeting }, Hello, world!);如何创建 refs
Refs 是使用 React.createRef() 创建的并通过 ref 属性附加到 React 元素。在构造组件时通常将 Refs 分配给实例属性以便可以在整个组件中引用它们。
class MyComponent extends React.Component {constructor(props) {super(props);this.myRef React.createRef();}render() {return div ref{this.myRef} /;}
}或者这样用
class UserForm extends Component {handleSubmit () {console.log(Input Value is: , this.input.value);};render() {return (form onSubmit{this.handleSubmit}input typetext ref{(input) (this.input input)} / // Access DOM input in handle submitbutton typesubmitSubmit/button/form);}
}这三个点(…)在 React 干嘛用的
... 在React使用JSX代码中做什么它叫什么
Modal {...this.props} titleModal heading animation{false}/这个叫扩展操作符号或者展开操作符例如如果this.props包含a1和b2则
Modal {...this.props} titleModal heading animation{false}等价于下面内容
Modal a{this.props.a} b{this.props.b} titleModal heading animation{false}扩展符号不仅适用于该用例而且对于创建具有现有对象的大多数或全部属性的新对象非常方便在更新state 咱们就经常这么做
this.setState((prevState) {return { foo: { ...prevState.foo, a: updated } };
});参考 前端进阶面试题详细解答
如何配置 React-Router 实现路由切换
1使用Route 组件
路由匹配是通过比较 Route 的 path 属性和当前地址的 pathname 来实现的。当一个 Route 匹配成功时它将渲染其内容当它不匹配时就会渲染 null。没有路径的 Route 将始终被匹配。
// when location { pathname: /about }
Route path/about component{About}/ // renders About/
Route path/contact component{Contact}/ // renders null
Route component{Always}/ // renders Always/
2结合使用 Switch 组件和 Route 组件
Switch 用于将 Route 分组。
SwitchRoute exact path/ component{Home} /Route path/about component{About} /Route path/contact component{Contact} /
/Switch
Switch 不是分组 Route 所必须的但他通常很有用。 一个 Switch 会遍历其所有的子 Route元素并仅渲染与当前地址匹配的第一个元素。
3使用 Link、 NavLink、Redirect 组件
Link 组件来在你的应用程序中创建链接。无论你在何处渲染一个Link 都会在应用程序的 HTML 中渲染锚a。
Link to/Home/Link
// a href/Home/a
是一种特殊类型的 当它的 to属性与当前地址匹配时可以将其定义为活跃的。
// location { pathname: /react }
NavLink to/react activeClassNamehurrayReact
/NavLink
// a href/react classNamehurrayReact/a
当我们想强制导航时可以渲染一个Redirect当一个Redirect渲染时它将使用它的to属性进行定向。
useEffect 与 useLayoutEffect 的区别
1共同点
运用效果 useEffect 与 useLayoutEffect 两者都是用于处理副作用这些副作用包括改变 DOM、设置订阅、操作定时器等。在函数组件内部操作副作用是不被允许的所以需要使用这两个函数去处理。使用方式 useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的都是调用的 mountEffectImpl方法在使用上也没什么差异基本可以直接替换。
2不同点
使用场景 useEffect 在 React 的渲染过程中是被异步调用的用于绝大多数场景而 useLayoutEffect 会在所有的 DOM 变更之后同步调用主要用于处理 DOM 操作、调整样式、避免页面闪烁等问题。也正因为是同步处理所以需要避免在 useLayoutEffect 做计算量较大的耗时任务从而造成阻塞。使用效果 useEffect是按照顺序执行代码的改变屏幕像素之后执行先渲染后改变DOM当改变屏幕内容时可能会产生闪烁useLayoutEffect是改变屏幕像素之前就执行了会推迟页面显示的事件先改变DOM后渲染不会产生闪烁。useLayoutEffect总是比useEffect先执行。
在未来的趋势上两个 API 是会长期共存的暂时没有删减合并的计划需要开发者根据场景去自行选择。React 团队的建议非常实用如果实在分不清先用 useEffect一般问题不大如果页面有异常再直接替换为 useLayoutEffect 即可。
react 最新版本解决了什么问题增加了哪些东西
React 16.x的三大新特性 Time Slicing、Suspense、 hooks
Time Slicing解决CPU速度问题使得在执行任务的期间可以随时暂停跑去干别的事情这个特性使得react能在性能极其差的机器跑时仍然保持有良好的性能Suspense 解决网络IO问题 和lazy配合实现异步加载组件。 能暂停当前组件的渲染 当完成某件事以后再继续渲染解决从react出生到现在都存在的「异步副作用」的问题而且解决得非的优雅使用的是 T异步但是同步的写法这是最好的解决异步问题的方式提供了一个内置函数componentDidCatch当有错误发生时可以友好地展示 fallback 组件; 可以捕捉到它的子元素包括嵌套子元素抛出的异常; 可以复用错误组件。
1React16.8 加入hooks让React函数式组件更加灵活hooks之前React存在很多问题
在组件间复用状态逻辑很难复杂组件变得难以理解高阶组件和函数组件的嵌套过深。class组件的this指向问题难以记忆的生命周期
hooks很好的解决了上述问题hooks提供了很多方法
useState 返回有状态值以及更新这个状态值的函数useEffect 接受包含命令式可能有副作用代码的函数。useContext 接受上下文对象从 React.createContext返回的值并返回当前上下文值useReducer useState 的替代方案。接受类型为 stateaction newState的reducer并返回与dispatch方法配对的当前状态。useCalLback 返回一个回忆的memoized版本该版本仅在其中一个输入发生更改时才会更改。纯函数的输入输出确定性 o useMemo 纯的一个记忆函数 o useRef 返回一个可变的ref对象其Current 属性被初始化为传递的参数返回的 ref 对象在组件的整个生命周期内保持不变。useImperativeMethods 自定义使用ref时公开给父组件的实例值useMutationEffect 更新兄弟组件之前它在React执行其DOM改变的同一阶段同步触发useLayoutEffect DOM改变后同步触发。使用它来从DOM读取布局并同步重新渲染
2React16.9
重命名 Unsafe 的生命周期方法。新的 UNSAFE_前缀将有助于在代码 review 和 debug 期间使这些有问题的字样更突出废弃 javascrip:形式的 URL。以javascript:开头的URL 非常容易遭受攻击造成安全漏洞。废弃Factory组件。 工厂组件会导致 React 变大且变慢。act也支持异步函数并且你可以在调用它时使用 await。使用 React.ProfiLer 进行性能评估。在较大的应用中追踪性能回归可能会很方便
3React16.13.0
支持在渲染期间调用setState但仅适用于同一组件可检测冲突的样式规则并记录警告废弃 unstable_createPortal使用CreatePortal将组件堆栈添加到其开发警告中使开发人员能够隔离bug并调试其程序这可以清楚地说明问题所在并更快地定位和修复错误。
React.forwardRef有什么用
forwardRef
使用forwardRefforward在这里是「传递」的意思后就能跨组件传递ref。在例子中我们将inputRef从Form跨组件传递到MyInput中并与input产生关联
const MyInput forwardRef((props, ref) {return input {...props} ref{ref} /;
});function Form() {const inputRef useRef(null);function handleClick() {inputRef.current.focus();}return (MyInput ref{inputRef} /button onClick{handleClick}Focus the input/button/);
}useImperativeHandle 除了「限制跨组件传递ref」外还有一种「防止ref失控的措施」那就是useImperativeHandle他的逻辑是这样的既然「ref失控」是由于「使用了不该被使用的DOM方法」比如appendChild那我可以限制「ref中只存在可以被使用的方法」。用useImperativeHandle修改我们的MyInput组件 const MyInput forwardRef((props, ref) {const realInputRef useRef(null);useImperativeHandle(ref, () ({focus() {realInputRef.current.focus();},}));return input {...props} ref{realInputRef} /;
});现在Form组件中通过inputRef.current只能取到如下数据结构
{focus() {realInputRef.current.focus();},
}就杜绝了「开发者通过ref取到DOM后执行不该被使用的API出现ref失控」的情况 为了防止错用/滥用导致ref失控React限制「默认情况下不能跨组件传递ref」为了破除这种限制可以使用forwardRef。为了减少ref对DOM的滥用可以使用useImperativeHandle限制ref传递的数据结构。
React 高阶组件、Render props、hooks 有什么区别为什么要不断迭代
这三者是目前react解决代码复用的主要方式
高阶组件HOC是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分它是一种基于 React 的组合特性而形成的设计模式。具体而言高阶组件是参数为组件返回值为新组件的函数。render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术更具体的说render prop 是一个用于告知组件需要渲染什么内容的函数 prop。通常render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地例如一个虚拟滚动条组件或许会有一个 renderltem 属性或是一个可见的容器组件或许会有它自己的 DOM 结构。但在大部分场景下Hook 足够了并且能够帮助减少嵌套。
1HOC 官方解释∶ 高阶组件HOC是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分它是一种基于 React 的组合特性而形成的设计模式。 简言之HOC是一种组件的设计模式HOC接受一个组件和额外的参数如果需要返回一个新的组件。HOC 是纯函数没有副作用。
// hoc的定义
function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state {data: selectData(DataSource, props)};}// 一些通用的逻辑处理render() {// ... 并使用新数据渲染被包装的组件!return WrappedComponent data{this.state.data} {...this.props} /;}};// 使用
const BlogPostWithSubscription withSubscription(BlogPost,(DataSource, props) DataSource.getBlogPost(props.id));
HOC的优缺点∶
优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名进而被覆盖
2Render props 官方解释∶ render prop是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 具有render prop 的组件接受一个返回React元素的函数将render的渲染逻辑注入到组件内部。在这里render的命名可以是任何其他有效的标识符。
// DataProvider组件内部的渲染逻辑如下
class DataProvider extends React.Components {state {name: Tom}render() {return (divp共享数据组件自己内部的渲染逻辑/p{ this.props.render(this.state) } /div);}
}// 调用方式
DataProvider render{data (h1Hello {data.name}/h1
)}/
由此可以看到render props的优缺点也很明显∶
优点数据共享、代码复用将组件内的state作为props传递给调用者将渲染逻辑交给调用者。缺点无法在 return 语句外访问数据、嵌套写法不够优雅
3Hooks 官方解释∶ Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook可以复用代码逻辑。 // 自定义一个获取订阅数据的hook
function useSubscription() {const data DataSource.getComments();return [data];
}
//
function CommentList(props) {const {data} props;const [subData] useSubscription();...
}
// 使用
CommentList datahello /
以上可以看出hook解决了hoc的prop覆盖的问题同时使用的方式解决了render props的嵌套地狱的问题。hook的优点如下∶
使用直观解决hoc的prop 重名问题解决render props 因共享数据 而出现嵌套地狱的问题能在return之外使用数据的问题。
需要注意的是hook只能在组件顶层使用不可在分支语句中使用。、
为什么 React 元素有一个 $$typeof 属性 目的是为了防止 XSS 攻击。因为 Synbol 无法被序列化所以 React 可以通过有没有 $$typeof 属性来断出当前的 element 对象是从数据库来的还是自己生成的。 如果没有 $$typeof 这个属性react 会拒绝处理该元素。在 React 的古老版本中下面的写法会出现 XSS 攻击
// 服务端允许用户存储 JSON
let expectedTextButGotJSON {type: div,props: {dangerouslySetInnerHTML: {__html: /* 把你想的搁着 */},},// ...
};
let message { text: expectedTextButGotJSON };// React 0.13 中有风险
p{message.text}
/preact router
import React from react
import { render } from react-dom
import { browserHistory, Router, Route, IndexRoute } from react-routerimport App from ../components/App
import Home from ../components/Home
import About from ../components/About
import Features from ../components/Featuresrender(Router history{browserHistory} // history 路由Route path/ component{App}IndexRoute component{Home} /Route pathabout component{About} /Route pathfeatures component{Features} //Route/Router,document.getElementById(app)
)
render(Router history{browserHistory} routes{routes} /,document.getElementById(app)
)React Router 提供一个routerWillLeave生命周期钩子这使得 React组件可以拦截正在发生的跳转或在离开route前提示用户。routerWillLeave返回值有以下两种
return false 取消此次跳转 return 返回提示信息在离开 route 前提示用户进行确认。
高阶组件
高阶函数如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。
高阶组件如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。
react 中的高阶组件
React 中的高阶组件主要有两种形式属性代理和反向继承。
属性代理 Proxy
操作 props抽离 state通过 ref 访问到组件实例用其他元素包裹传入的组件 WrappedComponent
反向继承
会发现其属性代理和反向继承的实现有些类似的地方都是返回一个继承了某个父类的子类只不过属性代理中继承的是 React.Component反向继承中继承的是传入的组件 WrappedComponent。
反向继承可以用来做什么
1.操作 state
高阶组件中可以读取、编辑和删除WrappedComponent组件实例中的state。甚至可以增加更多的state项但是非常不建议这么做因为这可能会导致state难以维护及管理。
function withLogging(WrappedComponent) { return class extends WrappedComponent { render() { return ( div; h2;Debugger Component Logging...h2; p;state:p; pre;{JSON.stringify(this.state, null, 4)}pre; pprops:p; pre{JSON.stringify(this.props, null, 4)}pre; {super.render()} div; ); } };
}2.渲染劫持Render Highjacking
条件渲染通过 props.isLoading 这个条件来判断渲染哪个组件。
修改由 render() 输出的 React 元素树
为什么使用jsx的组件中没有看到使用react却需要引入react
本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。在React 17之前如果使用了JSX其实就是在使用React babel 会把组件转换为 CreateElement 形式。在React 17之后就不再需要引入因为 babel 已经可以帮我们自动引入react。
useEffect(fn, []) 和 componentDidMount 有什么差异 useEffect 会捕获 props 和 state。所以即便在回调函数里你拿到的还是初始的 props 和 state。如果想得到“最新”的值可以使用 ref。 react中这两个生命周期会触发死循环 componentWillUpdate生命周期在shouldComponentUpdate返回true后被触发。在这两个生命周期只要视图更新就会触发因此不能再这两个生命周期中使用setState。否则会导致死循环 在React中如何避免不必要的render
React 基于虚拟 DOM 和高效 Diff 算法的完美配合实现了对 DOM 最小粒度的更新。大多数情况下React 对 DOM 的渲染效率足以业务日常。但在个别复杂业务场景下性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能其很重要的一个方向就是避免不必要的渲染Render。这里提下优化的点
shouldComponentUpdate 和 PureComponent
在 React 类组件中可以利用 shouldComponentUpdate或者 PureComponent 来减少因父组件更新而触发子组件的 render从而达到目的。shouldComponentUpdate 来决定是否组件是否重新渲染如果不希望组件重新渲染返回 false 即可。
利用高阶组件
在函数组件中并没有 shouldComponentUpdate 这个生命周期可以利用高阶组件封装一个类似 PureComponet 的功能
使用 React.memo
React.memo 是 React 16.6 新的一个 API用来缓存组件的渲染避免不必要的更新其实也是一个高阶组件与 PureComponent 十分类似但不同的是 React.memo只能用于函数组件。
对 React-Intl 的理解它的工作原理
React-intl是雅虎的语言国际化开源项目FormatJS的一部分通过其提供的组件和API可以与ReactJS绑定。
React-intl提供了两种使用方法一种是引用React组件另一种是直接调取API官方更加推荐在React项目中使用前者只有在无法使用React组件的地方才应该调用框架提供的API。它提供了一系列的React组件包括数字格式化、字符串格式化、日期格式化等。
在React-intl中可以配置不同的语言包他的工作原理就是根据需要在语言包之间进行切换。
新版生命周期 在新版本中React 官方对生命周期有了新的 变动建议: 使用getDerivedStateFromProps替换componentWillMount使用getSnapshotBeforeUpdate替换componentWillUpdate避免使用componentWillReceiveProps 其实该变动的原因正是由于上述提到的 Fiber。首先从上面我们知道 React 可以分成 reconciliation 与 commit两个阶段对应的生命周期如下: reconciliation
componentWillMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdate
commit
componentDidMountcomponentDidUpdatecomponentWillUnmount 在 Fiber 中reconciliation 阶段进行了任务分割涉及到 暂停 和 重启因此可能会导致 reconciliation 中的生命周期函数在一次更新渲染循环中被 多次调用 的情况产生一些意外错误 新版的建议生命周期如下:
class Component extends React.Component {// 替换 componentWillReceiveProps // 初始化和 update 时被调用// 静态函数无法使用 thisstatic getDerivedStateFromProps(nextProps, prevState) {}// 判断是否需要更新组件// 可以用于组件性能优化shouldComponentUpdate(nextProps, nextState) {}// 组件被挂载后触发componentDidMount() {}// 替换 componentWillUpdate// 可以在更新之前获取最新 dom 数据getSnapshotBeforeUpdate() {}// 组件更新后调用componentDidUpdate() {}// 组件即将销毁componentWillUnmount() {}// 组件已销毁componentDidUnMount() {}
}使用建议:
在constructor初始化 state在componentDidMount中进行事件监听并在componentWillUnmount中解绑事件在componentDidMount中进行数据的请求而不是在componentWillMount需要根据 props 更新 state 时使用getDerivedStateFromProps(nextProps, prevState) 旧 props 需要自己存储以便比较
public static getDerivedStateFromProps(nextProps, prevState) {// 当新 props 中的 data 发生变化时同步更新到 state 上if (nextProps.data ! prevState.data) {return {data: nextProps.data}} else {return null1}
}可以在componentDidUpdate监听 props 或者 state 的变化例如: componentDidUpdate(prevProps) {// 当 id 发生变化时重新获取数据if (this.props.id ! prevProps.id) {this.fetchData(this.props.id);}
}在componentDidUpdate使用setState时必须加条件否则将进入死循环getSnapshotBeforeUpdate(prevProps, prevState)可以在更新之前获取最新的渲染数据它的调用是在 render 之后 update 之前shouldComponentUpdate: 默认每次调用setState一定会最终走到 diff 阶段但可以通过shouldComponentUpdate的生命钩子返回false来直接阻止后面的逻辑执行通常是用于做条件渲染优化渲染的性能。
