React.js

hooks 为什么不能放在条件判断里以 setState 为例，在 react 外部，每个组件(Fiber)的 hooks 都是以链表的模式存在 memoizeState 属性中 update 阶段，每次调用 setState，链表就会执行 next 向后挪动一步。如果将 setState 写在条件判断中，假如条件判断不成立，没有执行外面的 setState 办法，会导致接下来所有的 setState 的取值呈现偏移，从而导致异样产生。React 高阶组件、Render props、hooks 有什么区别，为什么要一直迭代这三者是目前react解决代码复用的次要形式： 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 本身不是 React API 的一部分，它是一种基于 React 的组合个性而造成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。render props是指一种在 React 组件之间应用一个值为函数的 prop 共享代码的简略技术，更具体的说，render prop 是一个用于告知组件须要渲染什么内容的函数 prop。通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个应用场景更加简略。这两种模式仍有用武之地，（例如，一个虚构滚动条组件或者会有一个 renderltem 属性，或是一个可见的容器组件或者会有它本人的 DOM 构造）。但在大部分场景下，Hook 足够了，并且可能帮忙缩小嵌套。（1）HOC 官网解释∶ 高阶组件（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的优缺点∶ ...

前言最近始终在学习对于React方面的常识，并有幸正好失去一个机会将其用在了理论的我的项目中。所以我打算以博客的模式，将我在学习和开发（React）过程中遇到的问题记录下来。 这两天遇到了对于组件不必要的反复渲染问题，看了很多遍官网文档以及网上各位大大们的介绍，上面我会通过一些demo联合本人的了解进行汇总，并以此作为学习React的第一篇笔记（本人学习，什么都好，就是费头发...）。 本文次要介绍以下三种优化形式（三种形式有着类似的实现原理）： shouldComponentUpdateReact.PureComponentReact.memo其中shouldComponentUpdate和React.PureComponent是类组件中的优化形式，而React.memo是函数组件中的优化形式。 引出问题新建Parent类组件。import React, { Component } from 'react'import Child from './Child'class Parent extends Component { constructor(props) { super(props) this.state = { parentInfo: 'parent', sonInfo: 'son' } this.changeParentInfo = this.changeParentInfo.bind(this) } changeParentInfo() { this.setState({ parentInfo: `扭转了父组件state：${Date.now()}` }) } render() { console.log('Parent Component render') return ( <div> <p>{this.state.parentInfo}</p> <button onClick={this.changeParentInfo}>扭转父组件state</button> <br/> <Child son={this.state.sonInfo}></Child> </div> ) }}export default Parent新建Child类组件。import React, {Component} from 'react'class Child extends Component { constructor(props) { super(props) this.state = {} } render() { console.log('Child Component render') return ( <div> 这里是child子组件： <p>{this.props.son}</p> </div> ) }}export default Child关上控制台，咱们能够看到控制台中先后输入了Parent Component render和Child Component render。 点击按钮，咱们会发现又输入了一遍Parent Component render和Child Component render。 点击按钮时咱们只扭转了父组件Parentstate中的parentInfo的值，Parent更新的同时子组件Child也进行了从新渲染，这必定是咱们不违心看到的。所以上面咱们就围绕这个问题介绍本文的次要内容。shouldComponentUpdateReact提供了生命周期函数shouldComponentUpdate()，依据它的返回值（true | false），判断 React 组件的输入是否受以后 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会从新渲染（这也就阐明了下面Child组件从新渲染的起因）。 ...

1.开发环境 react18+antd52.电脑系统 windwos11专业版3.在应用react+antd开发的过程中,咱们在应用日期组件的时候会遇到显示中英文的问题,上面我来分享一下我的解决办法。4.react18+antd5应用日期组件显示中英文: 有很多人都遇到了这种状况;什么样的说法都有;然而就是没有一个能解决的;可能是因为react和antd的版本不同的起因,上面我来分享一下我的办法4-1.解决思路: // 先查看官网,看官网是怎么形容的 //找到示例,看是怎么解决的 // 示例代码如下 1 // 示例代码如下 2 通过剖析示例代码,发现官网是通过 dayjs 来实现的,接下来咱们就能够装置 dayjs 来测试一下4-2.装置dayjs npm i dayjs -S// 在index.js中应用import { ConfigProvider } from 'antd';import zhCN from 'antd/locale/zh_CN';/** 解决 工夫组件显示英文问题* */import dayjs from 'dayjs';import 'dayjs/locale/zh-cn';dayjs.locale('zh-cn');<ConfigProvider locale={zhCN}> <Router /></ConfigProvider>//成果如下 留神:应用moment.js 仍然会显示英文,尝试多种办法仍然无奈解决,可能是因为antd版本和moment版本的问题。5.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

hello，这里是潇晨，明天咱们来聊聊react源码，作为应用react多年的前端工程师，咱们是否还在应用着各种利用层面的库、框架呢，是否在面试过程中遇到一些对于react源码方面的问题呢，如果是，那么是否尝试过来看看react底层运行逻辑呢？ 为什么要学react源码？成为高级或资深前端工程师的必备条件：作为前端工程师，如果不满足只停留在利用层面的开发，或者想成为高级或资深前端工程师，那相熟远吗将是一个很必要的能力，为什么这么说呢，react作为前端常常要用到的库，响应式jsx申明、virtual-dom、diff算法、fiber调度、current-mode等思维曾经成为了构建前端疾速响应页面的一种卓有成效的思维。有些同学会说，底层源码我日常开发中用不到啊，的确，如果只是满足复制黏贴，或者构建简略的页面，用一些社区曾经有的库，的确没必要，然而咱们是新一代有现实有志气的年轻人呐，而且要想在职业生涯走的更远，只停留在应用层面，咱们的竞争力会大打折扣，就算是为了晋升技能或者晋升薪资，这也是咱们必须要想学习的一项能力。面试的须要：当初1年以上的前端岗根本都开始要求相熟一个常常用到的库、或者框架的源码，如果你日常开发中react用的比拟多的话，那相熟react源码对你的面试来说必定是一个加分项，如果能将react中各个模块的运行机制、以及它们是怎么配合工作的联合起来，加上一些开发过程中遇到的问题，而后通过浏览源码有了新的意识，必定会让面试官另眼相看。晋升日常开发技能的须要：日常开发中尽管咱们不会间接接触源码，然而组件的性能优化、调试某些渲染过程中bug，或者和react相干的降级，以及它的设计思维，这些都是须要从源码层面来了解或者解决的，就像盖房子一样，没有巩固的根底或者底层逻辑，怎么能盖好上层建筑呢。react源码难学吗？ 当然难学，react从15版本到当初17版本，很快18版本也快进去了，两头的迭代始终没停，尽管你可能感觉它的api没太多变动，然而它的外部却经验着天翻地覆的重构，从最开始的stack reconcile到起初的为了解决疾速响应而生的current mode、Scheduler(调度fiber)、Lane(解决细粒度工作优先级)、以及在此基础上的batchedUpdates和Suspense，这所有的目标无不是朝着构建更快的利用而进化的， 上面这两张图就是应用异步可中断更新前后的区别，能够领会一下 如果你尝试着关上react源码，你会发现它的代码量特地多，如果你挨个浏览，会齐全没有思路，如果你关上react利用的函数调用栈，顺着调用栈，一不小心你就会陷入各种函数的调用栈之中。这个是否是不是脑壳疼呢？ 怎么学习react源码？不要泄气，学习办法还是有的，尽管源码多，并且难懂，然而如果成体系的学习各个模块，剖析为什么这么设计，它的目标是为了什么，你就会了解react开发者设计初衷和对此进行的致力 了解react的设计理念：从设计理念登程，剖析react构建的利用的目标、局限性和背景，前因后果都理解分明了，才算是理解了它的脾气，是不是有点像找女朋友，你先得理解她的爱好吧，而后理解她的过来，而后顺着react的设计理念，开始思考为什么它会这么设计，比照vue等其余构建页面的库，它的劣势和局限又在哪里。分模块学习：常识得掰碎了消化，瘦子也是一口口吃进去的呢，遇到一个艰难的挑战，能够对它进行合成，先理解整个框架的逻辑，而后对各个模块的性能和作用有个大抵的意识，接着就是深刻每个模块的细节，就像盖房子一样，有了学习的路线或者思路，才不会陷入各个模块或者函数的调用关系之中，第一次浏览源码切记纠结每个函数的实现，先相熟它们的性能和作用，而后才是啃具体细节，学习源码不是久而久之的事，须要重复的去琢磨react开发者的用意。跟着调用栈和例子调试：能够尝试写一些小demo，顺着最开始调用函数调试各个函数，联合源码的正文或者查阅我之前学的react源码解析系列文章，各个模块一一击破，比方看到了hook相干的源码，能够尝试着写一个带有useState的组件，看mount和update的时候，hook是怎么挂载和更新的，也能够看在不同模式下它们的状态更新的区别，比方legacy和current模式下的区别，等相熟了hook源码之后也能够尝试手写一个hook，加深对hook的了解。带上问题学习：依据常见的面试题，尝试在源码中需找答案，最初能够向你的共事答复这些问题的，一方面输入才是最好的学习，另一方面也是一个沟通交流的机会 相干参考视频解说：进入学习

hello，这里是潇晨，明天就带着大家一起来手写一个迷你版的hooks，不便大家了解hook在源码中的运行机制，配有图解，保姆级的教程，只求同学一个小小的，。 第一步：引入React和ReactDOM因为咱们要将jsx转变为virtual-dom，这一步分工作就交给babel吧，而jsx被babel进行词法解析之后会造成React.createElement()的调用，而React.createElement()执行之后的返回后果就是jsx对象或者叫virtual-dom。 又因为咱们要将咱们的demo渲染到dom上，所以咱们引入ReactDOM。 import React from "react";import ReactDOM from "react-dom";第二步：咱们来写一个小demo咱们定义两个状态count和age，在点击的时候触发更新，让它们的值加1。 在源码中useState是保留在一个Dispatcher对象下面的，并且在mount和update的时候取到的是不同的hooks，所以咱们先临时从Dispatcher上拿到useState，等下在来定义Dispatcher。 接下来定义一个schedule函数，每次调用的时候会从新渲染组件。 function App() { let [count, setCount] = Dispatcher.useState(1); let [age, setAge] = Dispatcher.useState(10); return ( <> <p>Clicked {count} times</p> <button onClick={() => setCount(() => count + 1)}> Add count</button> <p>Age is {age}</p> <button onClick={() => setAge(() => age + 1)}> Add age</button> </> );}function schedule() { //每次调用会从新渲染组件 ReactDOM.render(<App />, document.querySelector("#root"));}schedule();第三步：定义Dispatcher在看这部分前，先来捋分明fiber、hook、update的关系，看图： Dispatcher是什么：Dispatcher在源码中就是一个对象，下面寄存着各种各样的hooks，在mount和update的时候会应用过不同的Dispatcher，来看看在源码中Dispatcher是什么样子： 在调用useState之后，会调用一个resolveDispatcher的函数，这个函数调用之后会返回一个dispatcher对象，这个对象上就有useState等钩子。 那咱们来看看这个函数做了啥事件，这个函数比较简单，间接从ReactCurrentDispatcher对象上拿到current，而后返回进去的这个current就是dispatcher，那这个ReactCurrentDispatcher又是个啥？别急，持续在源码中来找一下。 在源码中有这样一段代码，如果是在正式环境中，分为两种状况 ...

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 版本差别react16.8 hooks React 16之后有三个生命周期被废除(但并未删除) componentWillMountcomponentWillReceivePropscomponentWillUpdate官网打算在17版本齐全删除这三个函数，只保留UNSAVE_前缀的三个函数，目标是为了向下兼容， react 16.4 新增 getSnapshotBeforeUpdate getDerivedStateFromProps 对于废除的生命周期函数，官网会采纳逐渐迁徙的形式来实现版本的迁徙： 16.3：为不平安的生命周期引入别名，UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps 和 UNSAFE_componentWillUpdate。（旧的生命周期名称和新的别名都能够在此版本中应用。） 将来 16.x 版本：为 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 启用废除告警。（旧的生命周期名称和新的别名都将在这个版本中工作，然而旧的名称在开发模式下会产生一个正告。） 17.0：删除 componentWillMount、componentWillReceiveProps 和 componentWillUpdate。（在此版本之后，只有新的 “UNSAFE_” 生命周期名称能够应用。）。 虚构 DOM 的引入与间接操作原生 DOM 相比，哪一个效率更高，为什么虚构DOM绝对原生的DOM不肯定是效率更高，如果只批改一个按钮的文案，那么虚构 DOM 的操作无论如何都不可能比实在的 DOM 操作更快。在首次渲染大量DOM时，因为多了一层虚构DOM的计算，虚构DOM也会比innerHTML插入慢。它能保障性能上限，在实在DOM操作的时候进行针对性的优化时，还是更快的。所以要依据具体的场景进行探讨。 ...

前言：最近接触到一种新的（对我集体而言）状态治理形式，它没有采纳现有的开源库，如redux、mobx等，也没有应用传统的useContext，而是用useState + useEffect写了一个公布订阅者模式进行状态治理，这一点对我来说感觉比拟离奇，以前从没接触过这种写法，于是决定钻研一下目前比拟罕用的状态治理形式。 ps：这里谈到的状态治理是指全局状态治理，部分的应用useState即可 状态治理形式目前比拟罕用的状态治理形式有hooks、redux、mobx三种，上面我将具体介绍一下这三类的应用办法以及剖析各自的优缺点，以供各位进行参考。 Hooks状态治理用hooks进行状态治理次要有两种形式： useContext+useReduceruseState+useEffectuseContext+useReducer应用办法1.创立store和reducer以及全局contextsrc/store/reducer.ts import React from "react";// 初始状态export const state = { count: 0, name: "ry",};// reducer 用于批改状态export const reducer = (state, action) => { const { type, payload } = action; switch (type) { case "ModifyCount": return { ...state, count: payload, }; case "ModifyName": return { ...state, name: payload, }; default: { return state; } }};export const GlobalContext = React.createContext(null);2.根组件通过 Provider 注入 contextsrc/App.tsx ...

如何解决 props 层级过深的问题应用Context API：提供一种组件之间的状态共享，而不用通过显式组件树逐层传递props；应用Redux等状态库。react 实现一个全局的 dialogimport React, { Component } from 'react';import { is, fromJS } from 'immutable';import ReactDOM from 'react-dom';import ReactCSSTransitionGroup from 'react-addons-css-transition-group';import './dialog.css';let defaultState = { alertStatus:false, alertTip:"提醒", closeDialog:function(){}, childs:''}class Dialog extends Component{ state = { ...defaultState }; // css动画组件设置为指标组件 FirstChild = props => { const childrenArray = React.Children.toArray(props.children); return childrenArray[0] || null; } //关上弹窗 open =(options)=>{ options = options || {}; options.alertStatus = true; var props = options.props || {}; var childs = this.renderChildren(props,options.childrens) || ''; console.log(childs); this.setState({ ...defaultState, ...options, childs }) } //敞开弹窗 close(){ this.state.closeDialog(); this.setState({ ...defaultState }) } renderChildren(props,childrens) { //遍历所有子组件 var childs = []; childrens = childrens || []; var ps = { ...props, //给子组件绑定props _close:this.close //给子组件也绑定一个敞开弹窗的事件 }; childrens.forEach((currentItem,index) => { childs.push(React.createElement( currentItem, { ...ps, key:index } )); }) return childs; } shouldComponentUpdate(nextProps, nextState){ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) } render(){ return ( <ReactCSSTransitionGroup component={this.FirstChild} transitionName='hide' transitionEnterTimeout={300} transitionLeaveTimeout={300}> <div className="dialog-con" style={this.state.alertStatus? {display:'block'}:{display:'none'}}> {this.state.childs} </div> </ReactCSSTransitionGroup> ); }}let div = document.createElement('div');let props = { };document.body.appendChild(div);let Box = ReactD子类： ...

先来思考一个陈词滥调的问题，setState是同步还是异步? 再深刻思考一下，useState是同步还是异步呢？ 咱们来写几个 demo 试验一下。 先看 useState同步和异步状况下，间断执行两个 useState 示例function Component() { const [a, setA] = useState(1) const [b, setB] = useState('b') console.log('render') function handleClickWithPromise() { Promise.resolve().then(() => { setA((a) => a + 1) setB('bb') }) } function handleClickWithoutPromise() { setA((a) => a + 1) setB('bb') } return ( <Fragment> <button onClick={handleClickWithPromise}> {a}-{b} 异步执行 </button> <button onClick={handleClickWithoutPromise}> {a}-{b} 同步执行 </button> </Fragment> )}论断： 当点击同步执行按钮时，只从新 render 了一次当点击异步执行按钮时，render 了两次同步和异步状况下，间断执行两次同一个 useState 示例function Component() { const [a, setA] = useState(1) console.log('a', a) function handleClickWithPromise() { Promise.resolve().then(() => { setA((a) => a + 1) setA((a) => a + 1) }) } function handleClickWithoutPromise() { setA((a) => a + 1) setA((a) => a + 1) } return ( <Fragment> <button onClick={handleClickWithPromise}>{a} 异步执行</button> <button onClick={handleClickWithoutPromise}>{a} 同步执行</button> </Fragment> )}当点击同步执行按钮时，两次 setA 都执行，但合并 render 了一次，打印 3当点击异步执行按钮时，两次 setA 各自 render 一次，别离打印 2，3再看 setState同步和异步状况下，间断执行两个 setState 示例class Component extends React.Component { constructor(props) { super(props) this.state = { a: 1, b: 'b', } } handleClickWithPromise = () => { Promise.resolve().then(() => { this.setState({...this.state, a: 'aa'}) this.setState({...this.state, b: 'bb'}) }) } handleClickWithoutPromise = () => { this.setState({...this.state, a: 'aa'}) this.setState({...this.state, b: 'bb'}) } render() { console.log('render') return ( <Fragment> <button onClick={this.handleClickWithPromise}>异步执行</button> <button onClick={this.handleClickWithoutPromise}>同步执行</button> </Fragment> ) }}当点击同步执行按钮时，只从新 render 了一次当点击异步执行按钮时，render 了两次参考 前端进阶面试题具体解答 ...

render阶段的入口render阶段的次要工作是构建Fiber树和生成effectList，在第5章中咱们晓得了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个办法别离会调用workLoopSync或者workLoopConcurrent //ReactFiberWorkLoop.old.jsfunction workLoopSync() { while (workInProgress !== null) { performUnitOfWork(workInProgress); }}function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}这两函数的区别是判断条件是否存在shouldYield的执行，如果浏览器没有足够的工夫，那么会终止while循环，也不会执行前面的performUnitOfWork函数，天然也不会执行前面的render阶段和commit阶段，这部分属于scheduler的知识点，咱们在第15章解说。 workInProgress：新创建的workInProgress fiberperformUnitOfWork：workInProgress fiber和会和曾经创立的Fiber连接起来造成Fiber树。这个过程相似深度优先遍历，咱们暂且称它们为‘捕捉阶段’和‘冒泡阶段’。伪代码执行的过程大略如下function performUnitOfWork(fiber) { if (fiber.child) { performUnitOfWork(fiber.child);//beginWork } if (fiber.sibling) { performUnitOfWork(fiber.sibling);//completeWork }}render阶段整体执行流程用demo_0看视频调试 捕捉阶段从根节点rootFiber开始，遍历到叶子节点，每次遍历到的节点都会执行beginWork，并且传入以后Fiber节点，而后创立或复用它的子Fiber节点，并赋值给workInProgress.child。冒泡阶段在捕捉阶段遍历到子节点之后，会执行completeWork办法，执行实现之后会判断此节点的兄弟节点存不存在，如果存在就会为兄弟节点执行completeWork，当全副兄弟节点执行完之后，会向上‘冒泡’到父节点执行completeWork，直到rootFiber。示例，demo_0调试function App() { return ( <> <h1> <p>count</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root"));当执行完深度优先遍历之后造成的Fiber树： 图中的数字是遍历过程中的程序，能够看到，遍历的过程中会从利用的根节点rootFiber开始，顺次执行beginWork和completeWork，最初造成一颗Fiber树，每个节点以child和return相连。 留神：当遍历到只有一个子文本节点的Fiber时，该Fiber节点的子节点不会执行beginWork和completeWork，如图中的‘chen’文本节点。这是react的一种优化伎俩beginWorkbeginWork次要的工作是创立或复用子fiber节点 function beginWork( current: Fiber | null,//以后存在于dom树中对应的Fiber树 workInProgress: Fiber,//正在构建的Fiber树 renderLanes: Lanes,//第12章在讲): Fiber | null { // 1.update时满足条件即可复用current fiber进入bailoutOnAlreadyFinishedWork函数 if (current !== null) { const oldProps = current.memoizedProps; const newProps = workInProgress.pendingProps; if ( oldProps !== newProps || hasLegacyContextChanged() || (__DEV__ ? workInProgress.type !== current.type : false) ) { didReceiveUpdate = true; } else if (!includesSomeLane(renderLanes, updateLanes)) { didReceiveUpdate = false; switch (workInProgress.tag) { // ... } return bailoutOnAlreadyFinishedWork( current, workInProgress, renderLanes, ); } else { didReceiveUpdate = false; } } else { didReceiveUpdate = false; } //2.依据tag来创立不同的fiber 最初进入reconcileChildren函数 switch (workInProgress.tag) { case IndeterminateComponent: // ... case LazyComponent: // ... case FunctionComponent: // ... case ClassComponent: // ... case HostRoot: // ... case HostComponent: // ... case HostText: // ... }}相干参考视频解说：进入学习 ...

在render阶段更新Fiber节点时，咱们会调用reconcileChildFibers比照current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指以后dom对应的fiber树，jsx是class组件render办法或者函数组件的返回值。 在reconcileChildFibers中会依据newChild的类型来进入单节点的diff或者多节点diff //ReactChildFiber.old.jsfunction reconcileChildFibers( returnFiber: Fiber, currentFirstChild: Fiber | null, newChild: any,): Fiber | null { const isObject = typeof newChild === 'object' && newChild !== null; if (isObject) { switch (newChild.$$typeof) { case REACT_ELEMENT_TYPE: //繁多节点diff return placeSingleChild( reconcileSingleElement( returnFiber, currentFirstChild, newChild, lanes, ), ); } } //... if (isArray(newChild)) { //多节点diff return reconcileChildrenArray( returnFiber, currentFirstChild, newChild, lanes, ); } // 删除节点 return deleteRemainingChildren(returnFiber, currentFirstChild);}diff过程的次要流程如下图： ...

第一次发文章 not only（尽管）版式可能有点烂 but also （然而）最初赋有手稿钻研 finally看完他你有播种 diff算法：对于update的组件，他会将以后组件与该组件在上次更新是对应的Fiber节点比拟，将比拟的后果生成新的Fiber节点。 ! 为了避免概念混同，强调 一个DOM节点，在某一时刻最多会有4个节点和他相干。- 1.current Fiber。如果该DOM节点已在页面中，current Fiber代表该DOM节点对应的Fiber节点。- 2.workInProgress Fiber。如果该DOM节点将在本次更新中渲染到页面中，workInProgress Fiber代表该DOM节点对应的Fiber节点。- 3.DOM节点自身。- 4.JSX对象。即ClassComponent的render办法的返回后果，或者FunctionComponent的调用后果，JSX对象中蕴含形容DOM节点信息。diff算法的实质上是比照1和4，生成2。Diff的瓶颈以及React如何应答因为diff操作自身也会带来性能损耗，React文档中提到，即便在最前沿的算法中将前后两棵树齐全比对的算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量。如果在React中应用了该算法，那么展现1000个元素所须要执行的计算量将在十亿的量级范畴。这个开销切实是太过昂扬。所以为了升高算法复杂度，React的diff会预设3个限度： 1.同级元素进行Diff。如果一个DOM节点在前后两次更新中逾越了层级，那么React不会尝试复用他。 2.不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。 3.者能够通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。那么咱们接下来看一下Diff是如何实现的 咱们能够从同级的节点数量将Diff分为两类： 1.当newChild类型为object、number、string，代表同级只有一个节点- 2.当newChild类型为Array，同级有多个节点单节点diff以类型Object为例，会进入这个函数reconcileSingleElement 这个函数会做如下事件： 让咱们看看第二步判断DOM节点是否能够复用是如何实现的。参考 前端进阶面试题具体解答 从代码能够看出，React通过先判断key是否雷同，如果key雷同则判断type是否雷同，只有都雷同时一个DOM节点能力复用。 这里有个细节须要关注下： 1.当child !== null且key雷同且type不同时执行deleteRemainingChildren将child及其兄弟fiber都标记删除。2.当child !== null且key不同时仅将child标记删除。例子：以后页面有3个li，咱们要全副删除，再插入一个p。 因为本次更新时只有一个p，属于繁多节点的Diff，会走下面介绍的代码逻辑。 解释：在reconcileSingleElement中遍历之前的3个fiber（对应的DOM为3个li），寻找本次更新的p是否能够复用之前的3个fiber中某个的DOM。当key雷同且type不同时，代表咱们曾经找到本次更新的p对应的上次的fiber，然而 p 与 li 的type不同，不能复用。既然惟一的可能性曾经不能复用，则剩下的fiber都没有机会了，所以都须要标记删除。当key不同时只代表遍历到的该fiber不能被p复用，前面还有兄弟fiber还没有遍历到。所以仅仅标记该fiber删除。练习题： 习题1: 未设置key prop默认 key = null;，所以更新前后key雷同，都为null，然而更新前type为div，更新后为p，type扭转则不能复用。习题2: 更新前后key扭转，不须要再判断type，不能复用。习题3: 更新前后key没变，然而type扭转，不能复用。习题4: 更新前后key与type都未扭转，能够复用。children变动，DOM的子元素须要更新。多节点diff同级多个节点的Diff，肯定属于上面3中状况的一种或多种。 状况1：节点更新 状况2：节点新增或缩小 状况3：节点地位变动 留神在这里diff算法无奈应用双指针优化在咱们做数组相干的算法题时，常常应用双指针从数组头和尾同时遍历以提高效率，然而这里却不行。尽管本次更新的JSX对象 newChildren为数组模式，然而和newChildren中每个组件进行比拟的是current fiber同级的Fiber节点是由sibling指针链接造成的单链表。即 newChildren[0]与fiber比拟，newChildren[1]与fiber.sibling比拟。所以无奈应用双指针优化。基于以上起因，Diff算法的整体逻辑会经验两轮遍历： 1.第一轮遍历：解决更新的节点。2.第二轮遍历：解决剩下的不属于更新的节点第一轮遍历： 第一轮遍历步骤如下： let i = 0，遍历newChildren，将newChildren[i]与oldFiber比拟，判断DOM节点是否可复用。如果可复用，i++，持续比拟newChildren[i]与oldFiber.sibling，能够复用则持续遍历。如果不可复用，立刻跳出整个遍历，第一轮遍历完结。如果newChildren遍历完（即i === newChildren.length - 1）或者oldFiber遍历完（即oldFiber.sibling === null）跳出遍历，第一轮遍历完结。下面3跳出的遍历此时newChildren没有遍历完，oldFiber也没有遍历完。上例子：前2个节点可复用，遍历到key === 2的节点发现type扭转，不可复用，跳出遍历。此时oldFiber剩下key === 2未遍历，newChildren剩下key === 2、key === 3未遍历。下面4跳出的遍历可能newChildren遍历完，或oldFiber遍历完，或他们同时遍历完。上例子： ...

概述下 React 中的事件处理逻辑抹平浏览器差别，实现更好的跨平台。防止垃圾回收，React 引入事件池，在事件池中获取或开释事件对象，防止频繁地去创立和销毁。不便事件对立治理和事务机制。为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件雷同的接口，不过它们屏蔽了底层浏览器的细节差别，保障了行为的一致性。另外有意思的是，React 并没有间接将事件附着到子元素上，而是以繁多事件监听器的形式将所有的事件发送到顶层进行解决。这样 React 在更新 DOM 的时候就不须要思考如何去解决附着在 DOM 上的事件监听器，最终达到优化性能的目标React最新的⽣命周期是怎么的？React 16之后有三个⽣命周期被废除(但并未删除) componentWillMountcomponentWillReceivePropscomponentWillUpdate官⽅打算在17版本齐全删除这三个函数，只保留UNSAVE_前缀的三个函数，⽬的是为了向下兼容，然而对于开发者⽽⾔应该尽量避免使⽤他们，⽽是使⽤新增的⽣命周期函数代替它们。 ⽬前React16.8+的⽣命周期分为三个阶段，别离是挂载阶段、更新阶段、卸载阶段。 挂载阶段： constructor：构造函数，最先被执⾏，咱们通常在构造函数⾥初始化state对象或者给⾃定义⽅法绑定this；getDerivedStateFromProps：static getDerivedStateFromProps(nextProps, prevState)，这是个动态⽅法，当咱们接管到新的属性想去批改咱们state， 能够使⽤getDerivedStateFromPropsrender：render函数是纯函数，只返回须要渲染的东⻄，不应该蕴含其它的业务逻辑，能够返回原⽣的DOM、React组件、Fragment、Portals、字符串和数字、 Boolean和null等内容；componentDidMount：组件装载之后调⽤，此时咱们能够获取到DOM节点并操作，⽐如对canvas，svg的操作，服务器申请，订阅都能够写在这个⾥⾯，然而记得在componentWillUnmount中勾销订阅；更新阶段： getDerivedStateFromProps: 此⽅法在更新个挂载阶段都可能会调⽤；shouldComponentUpdate：shouldComponentUpdate(nextProps, nextState)，有两个参数nextProps和nextState，示意新的属性和变动之后的state，返回⼀个布尔值，true示意会触发从新渲染，false示意不会触发从新渲染，默认返回true，咱们通常利⽤此⽣命周期来优化React程序性能；render：更新阶段也会触发此⽣命周期；getSnapshotBeforeUpdate：getSnapshotBeforeUpdate(prevProps, prevState),这个⽅法在render之后，componentDidUpdate之前调⽤，有两个参数prevProps和prevState，示意之前的属性和之前的state，这个函数有⼀个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，能够返回null，此⽣命周期必须与componentDidUpdate搭配使⽤；componentDidUpdate：componentDidUpdate(prevProps, prevState, snapshot)，该⽅法在getSnapshotBeforeUpdate⽅法之后被调⽤，有三个参数prevProps，prevState，snapshot，示意之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的，如果触发某些回调函数时须要⽤到DOM元素的状态，则将对⽐或计算的过程迁徙⾄getSnapshotBeforeUpdate，而后在componentDidUpdate中统⼀触发回调或更新状态。卸载阶段: -componentWillUnmount：当咱们的组件被卸载或者销毁了就会调⽤，咱们能够在这个函数⾥去革除⼀些定时器，勾销⽹络申请，清理⽆效的DOM元素等垃圾清理⼯作。 总结： componentWillMount：在渲染之前执行，用于根组件中的 App 级配置；componentDidMount：在第一次渲染之后执行，能够在这里做AJAX申请，DOM的操作或状态更新以及设置事件监听器；componentWillReceiveProps：在初始化render的时候不会执行，它会在组件承受到新的状态(Props)时被触发，个别用于父组件状态更新时子组件的从新渲染shouldComponentUpdate：确定是否更新组件。默认状况下，它返回true。如果确定在state或props更新后组件不须要在从新渲染，则能够返回false，这是一个进步性能的办法；componentWillUpdate：在shouldComponentUpdate返回true确定要更新组件之前件之前执行；componentDidUpdate：它次要用于更新DOM以响应props或state更改；componentWillUnmount：它用于勾销任何的网络申请，或删除与组件关联的所有事件监听器。React 中的key是什么？为什么它们很重要？key能够帮忙 React跟踪循环创立列表中的虚构DOM元素，理解哪些元素已更改、增加或删除。每个绑定key的虚构DOM元素，在兄弟元素之间都是举世无双的。在 React的和解过程中，比拟新的虛拟DOM树与上一个虛拟DOM树之间的差别，并映射到页面中。key使 React解决列表中虛拟DOM时更加高效，因为 React能够应用虛拟DOM上的key属性，疾速理解元素是新的、须要删除的，还是批改过的。如果没有key,Rat就不晓得列表中虚构DOM元素与页面中的哪个元素绝对应。所以在创立列表的时候，不要疏忽key。 形容事件在 React中的解决形式。为了解决跨浏览器兼容性问题， React中的事件处理程序将传递 SyntheticEvent的实例，它是跨浏览器事件的包装器。这些 SyntheticEvent与你习惯的原生事件具备雷同的接口，它们在所有浏览器中都兼容。React实际上并没有将事件附加到子节点自身。而是通过事件委托模式，应用单个事件监听器监听顶层的所有事件。这对于性能是有益处的。这也意味着在更新DOM时， React不须要放心跟踪事件监听器。 调用 setState 之后产生了什么在代码中调用 setState 函数之后，React 会将传入的参数与之前的状态进行合并，而后触发所谓的和谐过程（Reconciliation）。通过和谐过程，React 会以绝对高效的形式依据新的状态构建 React 元素树并且着手从新渲染整个 UI 界面。在 React 失去元素树之后，React 会计算出新的树和老的树之间的差别，而后依据差别对界面进行最小化从新渲染。通过 diff 算法，React 可能准确制导哪些地位产生了扭转以及应该如何扭转，这就保障了按需更新，而不是全副从新渲染。在 setState 的时候，React 会为以后节点创立一个 updateQueue 的更新列队。而后会触发 reconciliation 过程，在这个过程中，会应用名为 Fiber 的调度算法，开始生成新的 Fiber 树， Fiber 算法的最大特点是能够做到异步可中断的执行。而后 React Scheduler 会依据优先级高下，先执行优先级高的节点，具体是执行 doWork 办法。在 doWork 办法中，React 会执行一遍 updateQueue 中的办法，以取得新的节点。而后比照新旧节点，为老节点打上 更新、插入、替换 等 Tag。以后节点 doWork 实现后，会执行 performUnitOfWork 办法取得新节点，而后再反复下面的过程。当所有节点都 doWork 实现后，会触发 commitRoot 办法，React 进入 commit 阶段。在 commit 阶段中，React 会依据后面为各个节点打的 Tag，一次性更新整个 dom 元素生命周期调用办法的程序是什么？React生命周期分为三大周期，11个阶段，生命周期办法调用程序别离如下。（1）在创立期的五大阶段，调用办法的程序如下。 ...

diff算法是怎么运作每一种节点类型有本人的属性，也就是prop，每次进行diff的时候，react会先比拟该节点类型，如果节点类型不一样，那么react会间接删除该节点，而后间接创立新的节点插入到其中，如果节点类型一样，那么会比拟prop是否有更新，如果有prop不一样，那么react会断定该节点有更新，那么重渲染该节点，而后在对其子节点进行比拟，一层一层往下，直到没有子节点 react和vue的区别相同点： 数据驱动页面，提供响应式的试图组件都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents标准数据流动单向，都反对服务器的渲染SSR都有反对native的办法，react有React native， vue有wexx不同点： 数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的数据渲染：大规模的数据渲染，react更快应用场景：React配合Redux架构适宜大规模多人合作简单我的项目，Vue适宜小快的我的项目开发格调：react举荐做法jsx + inline style把html和css都写在js了vue是采纳webpack +vue-loader单文件组件格局，html, js, css同一个文件在哪个生命周期中你会收回Ajax申请？为什么？Ajax申请应该写在组件创立期的第五个阶段，即 componentDidMount生命周期办法中。起因如下。在创立期的其余阶段，组件尚未渲染实现。而在存在期的5个阶段，又不能确保生命周期办法肯定会执行（如通过 shouldComponentUpdate办法优化更新等）。在销毀期，组件行将被销毁，申请数据变得无意义。因而在这些阶段发岀Ajax申请显然不是最好的抉择。在组件尚未挂载之前，Ajax申请将无奈执行结束，如果此时发出请求，将意味着在组件挂载之前更新状态（如执行 setState），这通常是不起作用的。在 componentDidMount办法中，执行Ajax即可保障组件曾经挂载，并且可能失常更新组件。 简述flux 思维Flux 的最大特点，就是数据的"单向流动"。用户拜访 ViewView收回用户的 ActionDispatcher 收到Action，要求 Store 进行相应的更新Store 更新后，收回一个"change"事件View 收到"change"事件后，更新页面说说 React组件开发中对于作用域的常见问题。在 EMAScript5语法标准中，对于作用域的常见问题如下。（1）在map等办法的回调函数中，要绑定作用域this（通过bind办法）。（2）父组件传递给子组件办法的作用域是父组件实例化对象，无奈扭转。（3）组件事件回调函数办法的作用域是组件实例化对象（绑定父组件提供的办法就是父组件实例化对象），无奈扭转。在 EMAScript6语法标准中，对于作用域的常见问题如下。（1）当应用箭头函数作为map等办法的回调函数时，箭头函数的作用域是以后组件的实例化对象（即箭头函数的作用域是定义时的作用域），毋庸绑定作用域。（2）事件回调函数要绑定组件作用域。（3）父组件传递办法要绑定父组件作用域。总之，在 EMAScript6语法标准中，组件办法的作用域是能够扭转的。 如何用 React构建（ build）生产模式？通常，应用 Webpack的 DefinePlugin办法将 NODE ENV设置为 production。这将剥离 propType验证和额定的正告。除此之外，还能够缩小代码，因为 React应用 Uglify的dead-code来打消开发代码和正文，这将大大减少包占用的空间。 参考 前端进阶面试题具体解答 如何防止反复发动ajax获取数据？数据放在redux外面React如何进行组件/逻辑复用?抛开曾经被官网弃用的Mixin,组件形象的技术目前有三种比拟支流:高阶组件: 属性代理反向继承渲染属性react-hookssetState到底是异步还是同步?先给出答案: 有时体现出异步,有时体现出同步setState只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的setState 的“异步”并不是说外部由异步代码实现，其实自身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用程序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，造成了所谓的“异步”，当然能够通过第二个参数setState(partialState, callback)中的callback拿到更新后的后果setState 的批量更新优化也是建设在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行屡次setState，setState的批量更新策略会对其进行笼罩，取最初一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新Redux 中间件原理指的是action和store之间，沟通的桥梁就是dispatch，action就是个对象。比方你用了redux-thunk，action也能够是个函数，怎么实现这个过程，就是通过中间件这个桥梁帮你实现的。action达到store之前会走中间件，这个中间件会把函数式的action转化为一个对象，在传递给storeHOC(高阶组件)HOC(Higher Order Componennt) 是在 React 机制下社区造成的一种组件模式，在很多第三方开源库中体现弱小。简述: 高阶组件不是组件，是 加强函数，能够输出一个元组件，返回出一个新的加强组件；高阶组件的次要作用是 代码复用，操作 状态和参数；用法: 属性代理 (Props Proxy): 返回出一个组件，它基于被包裹组件进行 性能加强；默认参数: 能够为组件包裹一层默认参数；function proxyHoc(Comp) { return class extends React.Component { render() { const newProps = { name: 'tayde', age: 1, } return <Comp {...this.props} {...newProps} /> } }}提取状态: 能够通过 props 将被包裹组件中的 state 依赖外层，例如用于转换受控组件:function withOnChange(Comp) { return class extends React.Component { constructor(props) { super(props) this.state = { name: '', } } onChangeName = () => { this.setState({ name: 'dongdong', }) } render() { const newProps = { value: this.state.name, onChange: this.onChangeName, } return <Comp {...this.props} {...newProps} /> } }}应用姿态如下，这样就能十分疾速的将一个 Input 组件转化成受控组件。 ...

前言不晓得大家有没有过这个疑难，React 中 setState() 为什么是异步的？我一度认为 setState() 是同步的，晓得它是异步的之后很是困惑，甚至期待 React 能出一个 setStateSync() 之类的 API。同样有此疑难的还有 MobX 的作者 Michel Weststrate，他认为常常听到的答案都很容易反驳，并认为这可能是一个历史包袱，所以开了一个 issue 询问真正的起因。最终这个 issue 失去了 React 核心成员 Dan Abramov 的回复，Dan 的回复表明这不是一个历史包袱，而是一个通过三思而行的设计。 留神：这篇文章依据 Dan 的回复写成，但不是一篇翻译。我疏忽了很多不太重要的内容，Dan 的残缺回复请看这里。 注释Dan 在回复中示意为什么 setState() 是异步的，这并没有一个显著的答案（obvious answer），每种计划都有它的衡量。然而 React 的设计有以下几点考量： 一、保障外部的一致性首先，我想咱们都批准推延并批量解决重渲染是无益而且对性能优化很重要的，无论 setState() 是同步的还是异步的。那么就算让 state 同步更新，props 也不行，因为当父组件重渲染（re-render ）了你才晓得 props。 当初的设计保障了 React 提供的 objects（state，props，refs）的行为和体现都是统一的。为什么这很重要？Dan 举了个栗子： 假如 state 是同步更新的，那么上面的代码是能够按预期工作的： console.log(this.state.value) // 0this.setState({ value: this.state.value + 1 });console.log(this.state.value) // 1this.setState({ value: this.state.value + 1 });console.log(this.state.value) // 2然而，这时你须要将状态晋升到父组件，以供多个兄弟组件共享： ...

1.根本规定• 一个文件申明一个组件： 只管能够在一个文件中申明多个 React 组件，然而最好不要这样做；举荐一个文件申明一个 React 组件，并只导出一个组件； • 应用 JSX 表达式： 不要应用 React.createElement 的写法； • react 18尽量应用函数组件。 2.命名标准• 扩展名: 用 .tsx 作为组件扩展名。 • 文件名: 用大驼峰作为文件名，如：ReservationCard.tsx。 • 参数命名: React 组件用大驼峰，组件的实例用小驼峰。eslint: [react/jsx-pascal-case](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) // badimport reservationCard from './ReservationCard';// goodimport ReservationCard from './ReservationCard';// badconst ReservationItem = <ReservationCard />;// goodconst reservationItem = <ReservationCard />;• 组件命名: 文件名作为组件名。例如：ReservationCard.jsx 应该用 ReservationCard 作为参数名。 然而，对于一个文件夹里的跟组件，应该用 index.jsx 作为文件名，同时用文件夹名作为组件名 // badimport Footer from './Footer/Footer';// badimport Footer from './Footer/index';// goodimport Footer from './Footer';• 高阶组件HOC命名: 用高阶组件名和传入的组件名组合作为生成的组件的 displayName。 举个例子，一个高阶组件 withFoo()， 当传入一个组件 Bar 应该生成一个新的组件，他的 displayName 属性是 withFoo(Bar)。 ...

我的项目多？文件多？团队成员难治理？为了解决这些问题，给大家举荐一款十分不便的在线共享云桌面:希尔桌面。能够创立多个桌面空间，把罕用的文件、网址、视频、图片等资源寄存到希尔桌面。 既难看又实用！https://www.sharezm.com/ 即可拜访希尔桌面 性能概述1、微信扫码登录2、反对创立多个云桌面3、反对多种文件格式（doc/docx/ppt/pptx/xls/xlsx/mp3/mp4/png/jpg/gif/svg/md/txt等等）在线预览4、可自定义桌面壁纸，动静/动态壁纸均反对5、反对多人协同办公6、反对文件拖拽上传 多桌面空间可创立多个桌面空间，点击空间名称即可疾速切换空间 自带Todolist鼠标右键新建即可疾速创立todoList 快捷性能能够将电脑中的文件间接拖入希尔桌面 ctrl + c 复制文本，ctrl + v 疾速创立文本ctrl + c 复制网址，ctrl + v 疾速创立超链接微信/QQ截图，ctrl + v疾速保留图片到希尔桌面 有了希尔桌面，当前不必啥文件都保留到本人电脑桌面上了！ 更多功能继续更新中...

状态治理的产生为什么须要状态治理 状态治理随同着古代前端框架的崛起而诞生，在经典的单页利用中，组件外部状态随着组件的挂载而产生，销毁而销毁，全局状态则随着利用挂载而始终存在，这时候，全局状态的共享，传递，变更就被抽离进去成了一个通用的解决方案。 Vue与React都有较为简单的全局状态管理策略（Store模式，Context），然而当利用足够简单，全局状态较多的时候，还是须要第三方的状态治理库进行对立治理。 React体系的状态治理 相比于Vue的官网举荐，React因为官网并没有明确举荐库，理论状况就会更盘根错节一些。在晚期阶段，Redux根本占据了最支流地位，然而因为其过于繁琐的模版代码，让后期开发与前期保护都变得麻烦至极，Mobx怀才不遇，被很多开发者认可而应用。直到React 16.8版本引入了Hooks，Redux受到越来越多的批评，状态治理库也随着产生了一些变动。Redux退出了Redux Toolkit，Recoil的呈现，pmndrs三大状态治理Zustand、Jotai、Valtio的崛起，还有小众的Rematch, Hookstate, Akita，React状态治理库更加的百花齐放。 下一代状态治理库Redux与Mobx的问题 Redux因其繁琐简短的语法与个性，让开发者往往要写大量的模版代码，加上异步解决须要用到复杂度更高的Redux中间件，让开发者不胜其烦。话虽如此，在最新的npm trends中，Redux的下载量还是居高不下，因为通过多年的考验，社区的生态与解决方案也是最为齐备的，如果当初须要应用Redux，那么留神肯定要应用其官网举荐的Redux Toolkit，写法简化了很多。 Mobx是一个响应式编程库，相比于Redux少了很多模版代码，不过因为其理念与React不太相符，被称为没有template的Vue，有很多相似于Vue的新增概念，比方observable, computed, reaction, autorun...对于新人来说多了更多的心智累赘，再加上其对代码的构造与实现没有限度，会让团队中状态治理的代码比拟凌乱，Mobx也始终没能取代Redux。 Zustand、Jotai、Valtio 这次咱们重点须要介绍的，是pmndrs所属的三个状态治理库，pmndrs是一个开源开发者个体，开源了很多有新意或者细分畛域的工具，这三个状态治理库的次要开发者都是Daishi Kato。因为React状态治理库的长期混沌状态，没有一个库能接替Redux的大旗一统全局，三个状态库都是为不同的细分畛域而存在。 Zustand，为代替Redux而生，也是现阶段举荐大家应用的状态治理库，它的npm下载量曾经和老牌选手Mobx并驾齐驱了，并且增长趋势非常可观。 其最次要的特点就是api极其简洁，打包后的大小仅为1kb，然而性能上却能完满代替Redux，被越来越多的开发者举荐。 既然有个这么优良的Redux替代品，为什么pmndrs还要推出另外两个库呢？这里就不得不先说Recoil，这是Facebook外部创立的库，在20年5月被Dave McCabe在演讲中颁布了进去，起初被开源。这个库带来了一个新的理念，原子状态。Redux保护的全局状态个别是对象模式，外面蕴含了多个状态，被封装成一个整体的store。Recoil则是将状态宰割为一个一个的最小单元，这与Hooks的理念是统一的。因为Recoil有着Facebook官网背景，加上新的状态治理理念彻底摈弃了Redux的固有的思路，与Hooks深度符合，所以一经面世就有很大的关注度。然而因为Recoil的api设计的有些怪异和繁琐，也始终没有很大的倒退态势。而Jotai这个库，就是从Recoil理念借鉴而来的，然而提供了一套更简洁明了的api，为得是能让原子状态这个理念更好的倒退上来。 Valtio则是与Mobx相似的库，实现原理也是与Vue相似，应用Proxy拦挡对象的读写操作，能够通过间接扭转对象属性的值，来实现响应式渲染更新。相比于Mobx，Valtio有着更简略间接的api，更低的上手难度，大有取而代之之意。 总的来说，如果你因为我的项目起因须要应用Redux，那么应用Redux Toolkit。否则的话，我更举荐大家应用更简洁轻量的下一代状态治理库，应用Zustand代替Redux，Jotai代替Recoil，Valtio代替Mobx。

React hookshooks 的次要作用 不便状态逻辑的复用函数组件性能加强useStateconst [state, setState]=useState(initState)定义组件的state, 承受一个初始state的值，返回一个元组，一个是state 另一个是批改state的办法。 export default function Test() { const [count, setCount] = useState(0) function add() { setCount(count + 1) } return <div> {count} <button onClick={add} >+1</button> </div>}useEffect用来解决React的生命周期钩子useEffect(callbackFn, deps) 在componentDidimount 和，deps 中的值产生扭转的时候执行回调函数，deps 应该蕴含回调中所有的依赖当 deps 为 [] 空数组的时，只有在 componentDidMounte 的时候执行一次当 callbackFn 返回一个函数的时候，函数会在组件销毁前执行。 useReducer当state 有比较复杂的逻辑时，能够应用useReducer进行状态治理，他返回两个参数一个是状态另一个是状态对应的 dispatch 办法，他相似redux中的reducer。 如 export default function TestReducer() { const [count, dispatch] = useReducer((state, action) => { if (action === '+1') { state = state + 1 } else if (action === '-1') { state = state - 1 } return state }, 0) return <div> count:{count} <button onClick={()=>{dispatch('+1')}}>+1</button> <button onClick={()=>{dispatch('-1')}}>-1</button> </div>}useCallback首先不得不吐槽一下 react 的官网文档，这部分看了好几遍愣是没看明确 useCallback 的应用场景。 ...

背景随着 React 我的项目越来越大，在本地开发时常常会遇到这样一个场景，想改页面上的一个组件，然而比拟难去定位到这个组件在源码中对应的地位。react1s 就是一个能够反对 Option+Click 一键点击页面元素间接跳转到编辑器对应 React 组件的 Chrome 浏览器插件。 个性无需任何配置，不须要在我的项目中减少一行配置代码反对任何脚手架，Webpack、Vite等等都行响应快，毫秒级，命名为 react1s 就是意味着在 1 秒内实现全副动作预览图 应用装置地址：Chrome 利用商店 react1s github地址：react1s 实现原理外围原理就是借助 @babel/plugin-transform-react-jsx-source（ps：这个 babel 插件曾经蕴含在了@babel/preset-react 内，所以个别不须要额定配置） ，它的作用就是给 JSX 元素生成一个 source 属性，咱们能够这个属性获取元素对应的本地文件名以及行列数。 例子： 从 React Fiber 源码 中能够看出，咱们能够从 Fiber 节点 debugSource 里的拿到这个 source 属性： 而后，咱们遍历对应元素，来拿到它的 Fiber 节点信息： for (const key in element) { if (key.startsWith("__reactInternalInstance") || key.startsWith("__reactFiber$")) { fiberNodeInstance = element[key] }}咱们能够从 Fiber 节点信息中拿到 fileName、columnNumber、lineNumber： 以 VS Code 为例，咱们只须要拼接以上三个地位信息值，即可实现跳转到编辑器中对应的 React 组件： ...

简介比方你有一个react组件须要配置路由，你可能会这样引入这个组件： import Demo from "./demo.jsx"可是你配置路由后会发现，Demo组件并没有懒加载，而是和以后组件作为一个包。 如何实现路由懒加载？只须要应用这里提供的办法批改一下引入形式即可： let Demo = LazyComponent(() => import('./demo.jsx'))本办法反对jsx和tsx，能够在所有应用react的中央应用。 舒适提醒：应用中如果遇到任何问题，都能够点击此处给咱们提Issue。 引入你须要执行上面的装置命令： npm install --save jsdoor而后在须要应用中央引入： import LazyComponent from 'jsdoor/react/lazy-component/index'应用let Demo = LazyComponent(() => import('./demo.jsx'))这个Demo就是一个组件，和一般形式引入的组件一样应用即可，不过成果却是懒加载。 阐明咱们反对js或ts环境应用，除了jsx组件外，也能够是tsx。须要留神的是，都须要批改配置使得babel能够进行本义。 上面咱们以webpack为例（别的相似）： { test: /\.(js|jsx|ts|tsx)$/, include: [ path.resolve(__dirname, './src'), path.resolve(__dirname, './node_modules/jsdoor/react/lazy-component') ], loader: 'babel-loader'}

简而言之，immer简化了扭转嵌套/简单数据结构的形式。看看这两种形式：先看useState的应用办法 const [product, updateProduct] = useState({ name: "Product 1", SKU: "SKU-001", availability: 30, stock: [ { id: 1, store: "Store 1", quantity: 10 }, { id: 2, store: "Store 2", quantity: 20 } ] });为了对此进行操作，您应该传递整个对象并笼罩您心愿更新/更改的属性： updateProduct({ ...product, name: "Product 1 - Updated" })然而，如果您应用"useImmer“，您能够发送您想要更改的惟一局部，immer自身将在幕后解决其余部分。 const [product, updateProduct] = useImmer({ name: "Product 1", SKU: "SKU-001", availability: 30, stock: [ { id: 1, store: "Store 1", quantity: 10 }, { id: 2, store: "Store 2", quantity: 20 } ] });所以更新一下： ...

前言最近我的项目中应用antd的tooltip组件的时候发现它有点不稳固，常常会呈现沉没到左上角的状况，让人困惑之余还不晓得如何解决，再加上它是在每个dom下面增加的tooltip这样数据量一大的话就会产生冗余的dom元素，于是想起react-tooltip组件，它能够在全局设置tooltip，并且只有在想要提醒的dom下面增加data-tip='xxxx'即可，而且我我的项目中也是用的这个组件，然而最近发现一个问题，就是v5版本的写法和v4差异十分大，于是激动之下本人写一个tooltip以满足本身需要，分享给大家。 操作tooltip组件的实现步骤：1、创立一个悬浮的dom div，并且设置一下根本款式且是暗藏状态 组件： const tooltipRef = useRef(null)const [content, setContent] = useState(null)<div className={styles.tooltip} ref = {tooltipRef }> {content}</div>这里代码解释一下const tooltipRef = useRef(null)的作用就是通过ref管制tooltip元素的地位，前面会讲到。const [content, setContent] = useState(null)的应用就是你tooltip想显示的内容，这里能够自定义。 款式： .tooltip{ display: flex; position: fixed; align-items: center; justify-content: center; height: 34px; width: 170px; background-color: #000; color: #fff; visibility: hidden; z-index: 100; border-radius: 6px; font-size: 12px;}// 制作三角箭头.tooltip::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;}下面都是根底款式加三角箭头。 ...

总结至此咱们介绍了react的理念，如果解决cpu和io的瓶颈，要害是实现异步可中断的更新 咱们介绍了react源码架构（ui=fn(state)），从scheduler开始调度（依据过期事件判断优先级），通过render阶段的深度优先遍历造成effectList（两头会执行reconcile|diff），交给commit解决实在节点（两头交叉生命周期和局部hooks），而这些调度的过程都离不开Fiber的撑持，Fiber是工作单元，也是节点优先级、更新UpdateQueue、节点信息的载体，Fiber双缓存则提供了比照前后节点更新的根底。咱们还介绍了jsx是React.createElement的语法糖。Lane模型则提供了更细粒度的优先级比照和计算，这所有都为concurrent mode提供了根底，在这之上变能够实现Suspense和batchedUpdate（16、17版本实现的逻辑不一样），18章context的valueStack和valueCursor在整个架构中运行机制，19章介绍了新版事件零碎，包含事件生产、监听和触发， 面试题简答（详见视频源码角度解说）jsx和Fiber有什么关系 答：mount时通过jsx对象（调用createElement的后果）调用createFiberFromElement生成Fiberupdate时通过reconcileChildFibers或reconcileChildrenArray比照新jsx和老的Fiber（current Fiber）生成新的wip Fiber树 react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了 答：jsx通过编译之后编程React.createElement，不引入React就会报错，react17扭转了编译形式，变成了jsx.createElement function App() { return <h1>Hello World</h1>;}//转换后import {jsx as _jsx} from 'react/jsx-runtime';function App() { return _jsx('h1', { children: 'Hello world' });}Fiber是什么，它为什么能进步性能 答：Fiber是一个js对象，能承载节点信息、优先级、updateQueue，同时它还是一个工作单元。 Fiber双缓存能够在构建好wip Fiber树之后切换成current Fiber，内存中间接一次性切换，进步了性能Fiber的存在使异步可中断的更新成为了可能，作为工作单元，能够在工夫片内执行工作，没工夫了交还执行权给浏览器，下次工夫片继续执行之前暂停之后返回的FiberFiber能够在reconcile的时候进行相应的diff更新，让最初的更新利用在实在节点上hooks 为什么hooks不能写在条件判断中 答：hook会按顺序存储在链表中，如果写在条件判断中，就没法放弃链表的程序 状态/生命周期 setState是同步的还是异步的 答：legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的 concurrent模式下：都是异步的 componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE 答：新的Fiber架构能在scheduler的调度下实现暂停持续，排列优先级，Lane模型能使Fiber节点具备优先级，在高优先级的工作打断低优先级的工作时，低优先级的更新可能会被跳过，所有以上生命周期可能会被执行屡次，和之前版本的行为不统一。 组件 react元素$$typeof属性什么 答：用来示意元素的类型，是一个symbol类型 react怎么辨别Class组件和Function组件 答：Class组件prototype上有isReactComponent属性 函数组件和类组件的相同点和不同点 答：相同点：都能够接管props返回react元素 不同点： 编程思维：类组件须要创立实例，面向对象，函数组件不须要创立实例，接管输出，返回输入，函数式编程 内存占用：类组建须要创立并保留实例，占用肯定的内存 值捕捉个性：函数组件具备值捕捉的个性 上面的函数组件换成类组件打印的num一样吗 export default function App() { const [num, setNum] = useState(0); const click = () => { setTimeout(() => { console.log(num); }, 3000); setNum(num + 1); }; return <div onClick={click}>click {num}</div>;}export default class App extends React.Component { state = { num: 0 }; click = () => { setTimeout(() => { console.log(this.state.num); }, 3000); this.setState({ num: this.state.num + 1 }); }; render() { return <div onClick={this.click}>click {this.state.num}</div>; }}可测试性：函数组件不便测试 ...

这一章的目标是让咱们认识一下react源码架构和各个模块。 在真正的代码学习之前，咱们须要在大脑中有一个react源码的地图，晓得react渲染的大抵流程和框架，这样能力从上帝视角看react是怎么更新的，来吧少年。 react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上一图胜千言： jsxjsx是js语言的扩大，react通过babel词法解析（具体怎么转换能够查阅babel相干插件），将jsx转换成React.createElement，React.createElement办法返回virtual-dom对象（内存中用来形容dom阶段的对象），所有jsx实质上就是React.createElement的语法糖，它能申明式的编写咱们想要组件呈现出什么样的ui成果。在第5章jsx咱们会具体介绍jsx解析之后的后果。 Fiber双缓存Fiber对象下面保留了包含这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来造成Fiber树，还保留了更新状态时用于计算state的updateQueue，updateQueue是一种链表构造，下面可能存在多个未计算的update，update也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。 双缓存是指存在两颗Fiber树，current Fiber树形容了以后出现的dom树，workInProgress Fiber是正在更新的Fiber树，这两颗Fiber树都是在内存中运行的，在workInProgress Fiber构建实现之后会将它作为current Fiber利用到dom上 在mount时（首次渲染），会依据jsx对象（Class Component或的render函数者Function Component的返回值），构建Fiber对象，造成Fiber树，而后这颗Fiber树会作为current Fiber利用到实在dom上，在update（状态更新时如setState）的时候，会依据状态变更后的jsx对象和current Fiber做比照造成新的workInProgress Fiber，而后workInProgress Fiber切换成current Fiber利用到实在dom就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对dom好性能的操作。 例如上面代码的Fiber双缓存构造如下，在第7章会具体解说 function App() { const [count, setCount] = useState(0); return ( <> <h1 onClick={() => { // debugger; setCount(() => count + 1); }} > <p title={count}>{count}</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root")); schedulerScheduler的作用是调度工作，react15没有Scheduler这部分，所以所有工作没有优先级，也不能中断，只能同步执行。 咱们晓得了要实现异步可中断的更新，须要浏览器指定一个工夫，如果没有工夫残余了就须要暂停工作，requestIdleCallback貌似是个不错的抉择，然而它存在兼容和触发不稳固的起因，react17中采纳MessageChannel来实现。 //ReactFiberWorkLoop.old.jsfunction workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) {//shouldYield判断是否暂停工作 workInProgress = performUnitOfWork(workInProgress); }}在Scheduler中的每的每个工作的优先级应用过期工夫示意的，如果一个工作的过期工夫离当初很近，阐明它马上就要过期了，优先级很高，如果过期工夫很长，那它的优先级就低，没有过期的工作寄存在timerQueue中，过期的工作寄存在taskQueue中，timerQueue和timerQueue都是小顶堆，所以peek取出来的都是离当初工夫最近也就是优先级最高的那个工作，而后优先执行它。 ...

什么是上下文ContextContext 通过组件树提供了一个传递数据的办法，从而防止了在每一个层级手动的传递 props 属性。 用法：在父组件上定义getChildContext办法，返回一个对象，而后它的子组件就能够通过this.context属性来获取import React,{Component} from 'react';import ReactDOM from 'react-dom';import PropTypes from 'prop-types';class Header extends Component{ render() { return ( <div> <Title/> </div> ) }}class Title extends Component{ static contextTypes={ color:PropTypes.string } render() { return ( <div style={{color:this.context.color}}> Title </div> ) }}class Main extends Component{ render() { return ( <div> <Content> </Content> </div> ) }}class Content extends Component{ static contextTypes={ color: PropTypes.string, changeColor:PropTypes.func } render() { return ( <div style={{color:this.context.color}}> Content <button onClick={()=>this.context.changeColor('green')}>绿色</button> <button onClick={()=>this.context.changeColor('orange')}>橙色</button> </div> ) }}class Page extends Component{ constructor() { super(); this.state={color:'red'}; } static childContextTypes={ color: PropTypes.string, changeColor:PropTypes.func } getChildContext() { return { color: this.state.color, changeColor:(color)=>{ this.setState({color}) } } } render() { return ( <div> <Header/> <Main/> </div> ) }}ReactDOM.render(<Page/>,document.querySelector('#root'));React-Router 4的Switch有什么用？Switch 通常被用来包裹 Route，用于渲染与门路匹配的第一个子 <Route> 或 <Redirect>，它外面不能放其余元素。 ...

1.虚构dom原生的JS DOM操作十分耗费性能，而React把实在原生JS DOM转换成了JavaScript对象。这就是虚构Dom（Virtual Dom） 每次数据更新后，从新计算虚构Dom，并和上一次生成的虚构dom进行比照，对发生变化的局部作批量更新。在此其中，React提供了componentShouldUpdate生命周期来让开发者手动管制缩小数据变动后不必要的虚构dom比照，晋升性能和渲染效率。 原生html元素代码： <div class="title"> <span>Hello ConardLi</span> <ul> <li>苹果</li> <li>橘子</li> </ul></div>在React可能存储为这样的JS代码： const VitrualDom = { type: 'div', props: { class: 'title' }, children: [ { type: 'span', children: 'Hello ConardLi' }, { type: 'ul', children: [ { type: 'li', children: '苹果' }, { type: 'li', children: '橘子' } ] } ]}当咱们须要创立或更新元素时，React首先会让这个VitrualDom对象进行创立和更改，而后再将VitrualDom对象渲染成实在DOM； 当咱们须要对DOM进行事件监听时，首先对VitrualDom进行事件监听，VitrualDom会代理原生的DOM事件从而做出响应。 虚构DOM的组成： 通过JSX或React.createElement，React.createClass等形式创立虚构元素和组件。即ReactElementelement对象，咱们的组件最终会被渲染成上面的构造： type：元素的类型，能够是原生html类型（字符串），或者自定义组件（函数或class）key：组件的惟一标识，用于Diff算法，上面会具体介绍ref：用于拜访原生dom节点props：传入组件的props，chidren是props中的一个属性，它存储了以后组件的孩子节点，能够是数组（多个孩子节点）或对象（只有一个孩子节点）owner：以后正在构建的Component所属的Componentself：（非生产环境）指定以后位于哪个组件实例_source：（非生产环境）指定调试代码来自的文件(fileName)和代码行数(lineNumber)<div className="title"> <span>Hello ConardLi</span> <ul> <li>苹果</li> <li>橘子</li> </ul></div>将此JSX元素打印进去，证实虚构DOM实质就是js对象： 其中，在jsx中应用的原生元素标签，其type为标签名。而如果是函数组件或class组件，其type就是对应的class或function对象 2.diff算法React须要同时保护两棵虚构DOM树：一棵示意以后的DOM构造，另一棵在React状态变更将要从新渲染时生成。React通过比拟这两棵树的差别，决定是否须要批改DOM构造，以及如何批改。这种算法称作Diff算法。 这个算法问题有一些通用的解决方案，即生成将一棵树转换成另一棵树的最小操作数。 然而，即便在最前沿的算法中，该算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量。 ...

createElement和 cloneElement有什么区别？createElement是JSX被转载失去的，在 React中用来创立 React元素（即虚构DOM）的内容。cloneElement用于复制元素并传递新的 props。 辨别状态和 props条件StateProps1. 从父组件中接管初始值YesYes2. 父组件能够扭转值NoYes3. 在组件中设置默认值YesYes4. 在组件的外部变动YesNo5. 设置子组件的初始值YesYes6. 在子组件的外部更改NoYesReact-Router 4怎么在路由变动时从新渲染同一个组件？当路由变动时，即组件的props产生了变动，会调用componentWillReceiveProps等生命周期钩子。那须要做的只是： 当路由扭转时，依据路由，也去申请数据： class NewsList extends Component { componentDidMount () { this.fetchData(this.props.location); } fetchData(location) { const type = location.pathname.replace('/', '') || 'top' this.props.dispatch(fetchListData(type)) } componentWillReceiveProps(nextProps) { if (nextProps.location.pathname != this.props.location.pathname) { this.fetchData(nextProps.location); } } render () { ... }}利用生命周期componentWillReceiveProps，进行从新render的预处理操作。 Redux 申请中间件如何解决并发应用redux-Saga redux-saga是一个治理redux利用异步操作的中间件，用于代替 redux-thunk 的。它通过创立 Sagas 将所有异步操作逻辑寄存在一个中央进行集中处理，以此将react中的同步操作与异步操作辨别开来，以便于前期的治理与保护。 redux-saga如何解决并发： takeEvery能够让多个 saga 工作并行被 fork 执行。 import { fork, take} from "redux-saga/effects"const takeEvery = (pattern, saga, ...args) => fork(function*() { while (true) { const action = yield take(pattern) yield fork(saga, ...args.concat(action)) }})takeLatesttakeLatest 不容许多个 saga 工作并行地执行。一旦接管到新的发动的 action，它就会勾销后面所有 fork 过的工作（如果这些工作还在执行的话）。在解决 AJAX 申请的时候，如果只心愿获取最初那个申请的响应， takeLatest 就会十分有用。 ...

1、JSX在React17之前，咱们写React代码的时候都会去引入React，并且本人的代码中没有用到，这是为什么呢？ 这是因为咱们的 JSX 代码会被 Babel 编译为 React.createElement，咱们来看一下babel的示意模式。 须要留神的是： 自定义组件时须要首字母用大写，会被辨认出是一个组件，这是一个规定。小写默认会认为是一个html标签，编译成字符串。 论断：JSX 的实质是React.createElement这个 JavaScript 调用的语法糖。是JS的语法扩大 2、React.createElement源码浏览从下面咱们晓得jsx通过babel编译成React.createElement，上面咱们就去看一下相干源码： 2.1 入参解读入参解读：发明一个元素须要晓得哪些信息 export function createElement(type, config, children)createElement 有 3 个入参，这 3 个入参囊括了 React 创立一个元素所须要晓得的全副信息。 type：用于标识节点的类型。它能够是相似“h1”“div”这样的规范 HTML 标签字符串，也能够是 React 组件类型或 React fragment 类型。config：以对象模式传入，组件所有的属性都会以键值对的模式存储在 config 对象中。children：以对象模式传入，它记录的是组件标签之间嵌套的内容，也就是所谓的“子节点”“子元素”。React.createElement("ul", { // 传入属性键值对 className: "list" // 从第三个入参开始往后，传入的参数都是 children}, React.createElement("li", { key: "1"}, "1"), React.createElement("li", { key: "2"}, "2"));对应的DOM构造 <ul className="list"> <li key="1">1</li> <li key="2">2</li></ul>从入口文件React.js文件可知，React.createElement办法是从ReactElement文件引入进来的，咱们就进入这个文件，定位到createElement办法。 2.1.1 先来看config参数的解决// config 对象中存储的是元素的属性 if (config != null) { // 进来之后做的第一件事，是顺次对 ref、key、self 和 source 属性赋值 if (hasValidRef(config)) { ref = config.ref; } // 此处将 key 值字符串化 if (hasValidKey(config)) { key = '' + config.key; } self = config.__self === undefined ? null : config.__self; source = config.__source === undefined ? null : config.__source; // 接着就是要把 config 外面的属性都一个一个挪到 props 这个之前申明好的对象外面 for (propName in config) { if ( // 筛选出能够提进 props 对象里的属性 hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName) ) { props[propName] = config[propName]; } } }这段代码对 ref 以及 key 做了个验证解决，具体如何验证咱们先不关怀，从办法名称上来分别一下，而后遍历 config 并把属性提进 props 对象里。 ...

迷你react和真正的源码有哪些区别呢在render阶段咱们遍历了整颗Fiber树，在源码中如果节点什么都没扭转会命中优化的逻辑，而后跳过这个节点的遍历commit咱们也遍历了整颗Fiber树，源码中只遍历带有effect的Fiber节点，也就是遍历effectList每次遍历的时候咱们都是新建节点，源码中某些条件会复用节点没有用到优先级第一步：渲染器和入口函数 const React = { createElement, render,};const container = document.getElementById("root");const updateValue = (e) => { rerender(e.target.value);};const rerender = (value) => { const element = ( <div> <input onInput={updateValue} value={value} /> <h2>Hello {value}</h2> </div> ); React.render(element, container);};rerender("World");第二步：创立dom节点函数 //创立elementfunction createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => (typeof child === "object" ? child : createTextElement(child))), }, };}//创立text类型function createTextElement(text) { return { type: "TEXT_ELEMENT", props: { nodeValue: text, children: [], }, };}//创立domfunction createDom(fiber) { const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type); updateDom(dom, {}, fiber.props); return dom;}第三步：更新节点函数 ...

异步可中断React15慢在哪里在讲这部分之前，须要讲是那些因素导致了react变慢，并且须要重构呢。 React15之前的协调过程是同步的，也叫stack reconciler，又因为js的执行是单线程的，这就导致了在更新比拟耗时的工作时，不能及时响应一些高优先级的工作，比方用户的输出，所以页面就会卡顿，这就是cpu的限度。 解决方案如何解决这个问题呢，试想一下，如果咱们在日常的开发中，在单线程的环境中，遇到了比拟耗时的代码计算会怎么做呢，首先咱们可能会将工作宰割，让它可能被中断，在其余工作到来的时候让出执行权，当其余工作执行后，再从之前中断的局部开始异步执行剩下的计算。所以要害是实现一套异步可中断的计划。 实现在方才的解决方案中提到了工作宰割，和异步执行，并且能让出执行权，由此能够带出react中的三个概念 Fiber：react15的更新是同步的，因为它不能将工作宰割，所以须要一套数据结构让它既能对应实在的dom又能作为分隔的单元，这就是Fiber。let firstFiberlet nextFiber = firstFiberlet shouldYield = false//firstFiber->firstChild->siblingfunction performUnitOfWork(nextFiber){ //... return nextFiber.next}function workLoop(deadline){ while(nextFiber && !shouldYield){ nextFiber = performUnitOfWork(nextFiber) shouldYield = deadline.timeReaming < 1 } requestIdleCallback(workLoop)}requestIdleCallback(workLoop)Scheduler：有了Fiber，咱们就须要用浏览器的工夫片异步执行这些Fiber的工作单元，咱们晓得浏览器有一个api叫做requestIdleCallback，它能够在浏览器闲暇的时候执行一些工作，咱们用这个api执行react的更新，让高优先级的工作优先响应不就能够了吗，但事实是requestIdleCallback存在着浏览器的兼容性和触发不稳固的问题，所以咱们须要用js实现一套工夫片运行的机制，在react中这部分叫做scheduler。Lane：有了异步调度，咱们还须要细粒度的治理各个工作的优先级，让高优先级的工作优先执行，各个Fiber工作单元还能比拟优先级，雷同优先级的工作能够一起更新，想想是不是更cool呢。产生进去的下层实现 因为有了这一套异步可中断的机制，咱们就能实现batchedUpdates批量更新和Suspense 上面这两张图就是应用异步可中断更新前后的区别，能够领会一下 代数效应（Algebraic Effects）除了cpu的瓶颈问题，还有一类问题是和副作用相干的问题，比方获取数据、文件操作等。不同设施性能和网络情况都不一样，react怎么去解决这些副作用，让咱们在编码时最佳实际，运行利用时体现统一呢，这就须要react有拆散副作用的能力，为什么要拆散副作用呢，因为要解耦，这就是代数效应。 发问：咱们都写过获取数据的代码，在获取数据前展现loading，数据获取之后勾销loading，假如咱们的设施性能和网络情况都很好，数据很快就获取到了，那咱们还有必要在一开始的时候展现loading吗？如何能力有更好的用户体验呢？ 看下上面这个例子 function getPrice(id) { return fetch(`xxx.com?id=${productId}`).then((res)=>{ return res.price })}async function getTotalPirce(id1, id2) { const p1 = await getPrice(id1); const p2 = await getPrice(id2); return p1 + p2;}async function run(){ await getTotalPrice('001', '002'); }getPrice是一个异步获取数据的办法，咱们能够用async+await的形式获取数据，然而这会导致调用getTotalPrice的run办法也会变成异步函数，这就是async的传染性，所以没法拆散副作用。 ...

state 和 props 触发更新的生命周期别离有什么区别？state 更新流程： 这个过程当中波及的函数： shouldComponentUpdate: 当组件的 state 或 props 产生扭转时，都会首先触发这个生命周期函数。它会接管两个参数：nextProps, nextState——它们别离代表传入的新 props 和新的 state 值。拿到这两个值之后，咱们就能够通过一些比照逻辑来决定是否有 re-render（重渲染）的必要了。如果该函数的返回值为 false，则生命周期终止，反之持续；留神：此办法仅作为性能优化的形式而存在。不要希图依附此办法来“阻止”渲染，因为这可能会产生 bug。应该思考应用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()componentWillUpdate：当组件的 state 或 props 产生扭转时，会在渲染之前调用 componentWillUpdate。componentWillUpdate 是 React16 废除的三个生命周期之一。过来，咱们可能心愿能在这个阶段去收集一些必要的信息（比方更新前的 DOM 信息等等），当初咱们齐全能够在 React16 的 getSnapshotBeforeUpdate 中去做这些事；componentDidUpdate：componentDidUpdate() 会在UI更新后会被立刻调用。它接管 prevProps（上一次的 props 值）作为入参，也就是说在此处咱们依然能够进行 props 值比照（再次阐明 componentWillUpdate 的确鸡肋哈）。 props 更新流程： 绝对于 state 更新，props 更新后惟一的区别是减少了对 componentWillReceiveProps 的调用。对于 componentWillReceiveProps，须要晓得这些事件： componentWillReceiveProps：它在Component承受到新的 props 时被触发。componentWillReceiveProps 会接管一个名为 nextProps 的参数（对应新的 props 值）。该生命周期是 React16 废除掉的三个生命周期之一。在它被废除前，能够用它来比拟 this.props 和 nextProps 来从新setState。在 React16 中，用一个相似的新生命周期 getDerivedStateFromProps 来代替它。React组件的state和props有什么区别？（1）props ...

先来几个术语： 官网我的说法对应代码React elementReact元素let element=<span>A爆了</span>Component组件class App extends React.Component {}无App为父元素，App1为子元素<App><App1></App1></App>本文重点： 组件有两个个性 1、传入了一个“props”2、返回了一个React元素组件的构造函数 如果须要从新定义constructor，必须super一下，能力激活this，也就是能够用来自React.component办法组件的props 是可读的，也就是不能在组件中批改prop的属性JSX中传入对象的props，能够通过{...object}的形式父子元素之间的通信（高级版本） 父=>子，通过父元素的render既可扭转子元素的内容。子=>夫，通过父元素传入子元素中的props上挂载的办法，让子元素触发父元素中的办法，从而进行通信。Component上回说到JSX的用法，这回要开讲react组件之间的一个沟通。那么什么是组件？我晓得英文是Component，但这对我而言就是一个单词，毫无意义。要理解Component之间是如何进行敌对交换的，那就要先理解Component是个什么鬼。 上回说到的JSX，咱们能够这么创建对象： let element=<h1 className="aaa">A爆了</h1>//等同于let element=React.createElement( "h1", {className:"aaa"}, "A爆了")还是老老实实地用h1、div这种规范的HTML标签元素去生成React元素。然而这样的话，咱们的JS就会变得微小无比，全部都是新建的React元素，有可能到时候咱们连对象名都不知道怎么起了，兴许就变成let div1;let div2这样的。哈哈哈开个玩笑。然而拆散是必定要拆散的。这个时候就有了名为Component的概念。他能够做些什么呢？简略的说就是创立一个个独立的，可复用的小组件。话不多说，咱们来瞅瞅来自官网的写法： 写法一：函数型创立组件，大家能够看到我就间接定义一个名为App的办法，每次执行App()的时候就会返回一个新的React元素。而这个办法咱们能够称之为组件Component。有些曾经上手React的敌人，可能傻了了，这是什么操作，我的高大上class呢？extend呢？很遗憾地通知你，这也是组件，因为他合乎官网定义：1、传入了一个“props” ，2、返回了一个React元素。满足上述两个条件就是Component！ function App(props) { return <span>{props.name}！A爆了</span> }这个是最繁难的Component了，在我看来Component自身是对React.createElement的一种封装，他的render办法就相当于React.createElement的性能。高大上的组件性能来啦： import React, { Component } from 'react';class App extends Component { render() { return <span>{this.props.name}！A爆了</span> }}export default App;这个class版本的组件和上方纯办法的组件，从React的角度上来说，并无不同，然而！毕竟我class的形式还继承了React.Component，不多点小性能都说不过去对吧？所以说咱们这么想继承了React.Component的组件的初始性能要比纯办法return的要多。所以每个React的Component咱们都能够当作React元素间接应用。 好了，咱们来钻研钻研Component这个类的办法吧。 首先是一个神奇的constructor函数，这个函数在类中，能够说是用于初始化的函数。如果省去不写，也不会出错，因为咱们的组件都是React.Component的子类，所以都继承了React.Component的constructor办法。如果咱们在子类Component中定义了constructor相当于是笼罩了父类的办法，这样React.Component的构造函数就生效了。简略地来说就是很多默认的赋值都生效了。你是获取不到props的。因而官网为了揭示大家不要遗记super一下，也就是继承父类的constructor，因而会报"this hasn't been initialised - super() hasn't been called"这个谬误。意思就是你先继承一下。也就是说super是执行了父类的constructor的办法。所以！！！重点来了——咱们写super的时候不能遗记传入props。不传入props，程序就无奈获取定义的组件属性了。 constructor(props) { super(props);//相当于React.Component.call(this,props)}官网也给大家划重点了： Class components should always call the base constructor with props.（类组建在执行根本constructor的时候，必须和props一起。）对于咱们没有写constructor，但在其余自带办法中，比方render，也能够间接获取到props，这个诡异的操作就能够解释了。因为咱们省略了重定义，然而constructor自身不仅是存在的而且也执行了，只不过没有在咱们写的子类中体现进去而已。 ...

redux与mobx的区别？两者对⽐： redux将数据保留在单⼀的store中，mobx将数据保留在扩散的多个store中redux使⽤plain object保留数据，须要⼿动解决变动后的操作；mobx适⽤observable保留数据，数据变动后⾃动解决响应的操作redux使⽤不可变状态，这意味着状态是只读的，不能间接去批改它，⽽是应该返回⼀个新的状态，同时使⽤纯函数；mobx中的状态是可变的，能够间接对其进⾏批改mobx相对来说⽐较简略，在其中有很多的形象，mobx更多的使⽤⾯向对象的编程思维；redux会⽐较简单，因为其中的函数式编程思维把握起来不是那么容易，同时须要借助⼀系列的中间件来解决异步和副作⽤ mobx中有更多的形象和封装，调试会⽐较艰难，同时后果也难以预测；⽽redux提供可能进⾏工夫回溯的开发⼯具，同时其纯函数以及更少的形象，让调试变得更加的容易场景辨析： 基于以上区别，咱们能够简略得剖析⼀下两者的不同使⽤场景。mobx更适宜数据不简单的应⽤：mobx难以调试，很多状态⽆法回溯，⾯对复杂度⾼的应⽤时，往往⼒不从⼼。redux适宜有回溯需要的应⽤：⽐如⼀个画板应⽤、⼀个表格应⽤，很多时候须要撤销、重做等操作，因为redux不可变的个性，人造⽀持这些操作。mobx适宜短平快的项⽬：mobx上⼿简略，样板代码少，能够很⼤水平上提⾼开发效率。当然mobx和redux也并不⼀定是⾮此即彼的关系，你也能够在项⽬中⽤redux作为全局状态治理，⽤mobx作为组件部分状态管理器来⽤。Redux 怎么实现属性传递，介绍下原理react-redux 数据传输∶ view-->action-->reducer-->store-->view。看下点击事件的数据是如何通过redux传到view上： view 上的AddClick 事件通过mapDispatchToProps 把数据传到action ---> click:()=>dispatch(ADD)action 的ADD 传到reducer上reducer传到store上 const store = createStore(reducer);store再通过 mapStateToProps 映射穿到view上text:State.text代码示例∶ import React from 'react';import ReactDOM from 'react-dom';import { createStore } from 'redux';import { Provider, connect } from 'react-redux';class App extends React.Component{ render(){ let { text, click, clickR } = this.props; return( <div> <div>数据:已有人{text}</div> <div onClick={click}>加人</div> <div onClick={clickR}>减人</div> </div> ) }}const initialState = { text:5}const reducer = function(state,action){ switch(action.type){ case 'ADD': return {text:state.text+1} case 'REMOVE': return {text:state.text-1} default: return initialState; }}let ADD = { type:'ADD'}let Remove = { type:'REMOVE'}const store = createStore(reducer);let mapStateToProps = function (state){ return{ text:state.text }}let mapDispatchToProps = function(dispatch){ return{ click:()=>dispatch(ADD), clickR:()=>dispatch(Remove) }}const App1 = connect(mapStateToProps,mapDispatchToProps)(App);ReactDOM.render( <Provider store = {store}> <App1></App1> </Provider>,document.getElementById('root'))React中发动网络申请应该在哪个生命周期中进行？为什么？对于异步申请，最好放在componentDidMount中去操作，对于同步的状态扭转，能够放在componentWillMount中，个别用的比拟少。 ...

一、写一个时钟用 react 写一个每秒都能够更新一次的时钟import React from 'react'import ReactDOM from 'react-dom'function tick() { let ele = <h1>{ new Date().toLocaleTimeString() }</h1> // Objects are not valid as a React child (found: Sun Aug 04 2019 20:34:51 GMT+0800 (中国规范工夫)). If you meant to render a collection of children, use an array instead. // new Date() 是一个对象数据类型的值，React 元素不接管对象作为其子元素 ReactDOM.render(ele, document.querySelector('#root'))}tick()setInterval(tick, 1000) // 如果不包在一个函数中，时钟是不会每秒更新一次然而 React 和 Vue 雷同都是数据驱动的，然而这个时候和数据驱动没啥关系，每隔1秒钟从新创立一个 ele，而后再渲染到页面中，视图才发生变化；为了应用数据驱动，咱们须要应用 React 的组件 二、React 的组件在 React 组件中，jsx 元素（也称 react 元素）是组件的根本组成单位在 react 中定义组件有两种形式： ...

查看视频调试demo_7context流程图 cursor/valueStackreact源码中存在一个valueStack和valueCursor用来记录context的历史信息和以后context，另外还有一个didPerformWorkStackCursor用来示意以后的context有没有变动 //ReactFiberNewContext.new.jsconst valueCursor: StackCursor<mixed> = createCursor(null);const didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);//ReactFiberStack.new.jsconst valueStack: Array<any> = [];function pushProvider(providerFiber, nextValue) { var context = providerFiber.type._context; { push(valueCursor, context._currentValue, providerFiber); context._currentValue = nextValue; }}function popProvider(providerFiber) { var currentValue = valueCursor.current; pop(valueCursor, providerFiber); var context = providerFiber.type._context; { context._currentValue = currentValue; }}在render阶段调用updateContextProvider的时候会执行pushProvider，将新的值push进valueStack中在commit阶段调用completeWork的时候会执行popProvider，将栈顶context pop进去，为什么会有这样一个机制呢，因为咱们的context是跨层级的，在之前讲到render阶段和commit阶段的时候，咱们会以深度优先遍历的形式遍历节点，如果波及跨层级读取状态就有点力不从心了，就须要一层一层往下传递咱们的props，所以咱们能够用一个stack记录咱们的context，在render阶段pushProvider，在commit阶段popProvider，在每个具体的层级能依据valueCursor取以后value createContextexport function createContext<T>( defaultValue: T, calculateChangedBits: ?(a: T, b: T) => number,): ReactContext<T> { if (calculateChangedBits === undefined) {//能够传入计算bit的函数 calculateChangedBits = null; } else { //... } const context: ReactContext<T> = { $$typeof: REACT_CONTEXT_TYPE, _calculateChangedBits: calculateChangedBits,//计算value变动的函数 _currentValue: defaultValue,//dom环境的value _currentValue2: defaultValue,//art环境的value _threadCount: 0, Provider: (null: any), Consumer: (null: any), }; context.Provider = { $$typeof: REACT_PROVIDER_TYPE, _context: context, }; if (__DEV__) { } else { context.Consumer = context; } return context;}//示例const NameChangedBits = 0b01;const AgeChangedBits = 0b10;const AppContext = createContext({}, (prevValue, nextValue) => { let result = 0; if (prevValue.name !== nextValue.name) { result |= NameChangedBits; }; if (prevValue.age !== nextValue.age) { result |= AgeChangedBits; }; return result;});在简化之后的createContext中能够看到，context和Provider、Consumer的关系是这样的： ...

从一个bug说起上面这个demo_13在react17和react16中有什么不同吗？代码也很简略，模仿一个modal框，点击显示呈现，点击其余中央，相当于点击了mask，modal隐没，因为react事件都是委托到下层，所以须要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无奈显示。然而在react16上发现这样做还是不行，须要调用e.nativeEvent.stopImmediatePropagation()能力实现，而react17上没什么影响 究其原因就是react16和17在委托事件的容器上做出了扭转，react16的事件会冒泡的document上，而17则会冒泡到root容器上，也就是ReactDom.render的第二个参数 export default class Demo13 extends React.Component { state = { show: false }; componentDidMount() { document.addEventListener("click", () => { this.setState({ show: false }); }); } handleClick = (e) => { e.stopPropagation();//react17中失效 // e.nativeEvent.stopImmediatePropagation(); //react16中失效 stopImmediatePropagation也阻止本级监听函数执行 this.setState({ show: true }); }; render() { return ( <div> <button onClick={this.handleClick}>显示</button> {this.state.show && <div onClick={(e) => e.nativeEvent.stopImmediatePropagation()}>modal</div>} </div> ); }}大家也能够看下demo_11、demo_12在react16、17触发程序有何差别，同时demo我的项目中的event.html也模仿了react16、17的事件代理机制 事件零碎架构图 咱们以SimpleEvent为例看事件注册、绑定和触发的过程，看视频的调试过程 事件注册DOMPluginEventSystem.js会调用SimpleEventPlugin插件的registerEvents办法注册事件，//DOMPluginEventSystem.jsSimpleEventPlugin.registerEvents();registerSimpleEventsfunction registerSimpleEvents() { registerSimplePluginEventsAndSetTheirPriorities(discreteEventPairsForSimpleEventPlugin, DiscreteEvent); //...}function registerSimplePluginEventsAndSetTheirPriorities(eventTypes, priority) { for (var i = 0; i < eventTypes.length; i += 2) { var topEvent = eventTypes[i]; var event = eventTypes[i + 1]; var capitalizedEvent = event[0].toUpperCase() + event.slice(1); var reactName = 'on' + capitalizedEvent; eventPriorities.set(topEvent, priority); topLevelEventsToReactNames.set(topEvent, reactName); registerTwoPhaseEvent(reactName, [topEvent]);//注册捕捉和冒泡两个阶段的事件 }}registerTwoPhaseEventfunction registerTwoPhaseEvent(registrationName, dependencies) { registerDirectEvent(registrationName, dependencies); registerDirectEvent(registrationName + 'Capture', dependencies);}registerDirectEventfunction registerDirectEvent(registrationName, dependencies) {//... for (var i = 0; i < dependencies.length; i++) { allNativeEvents.add(dependencies[i]);//生成allNativeEvents对象 }}事件绑定listenToAllSupportedEvents//由函数createRootImpl调用，也就是在创立根节点之后执行function listenToAllSupportedEvents(rootContainerElement) { allNativeEvents.forEach(function (domEventName) { if (!nonDelegatedEvents.has(domEventName)) { listenToNativeEvent(domEventName, false, rootContainerElement, null); } listenToNativeEvent(domEventName, true, rootContainerElement, null); }); }}listenToNativeEventfunction listenToNativeEvent(domEventName, isCapturePhaseListener, rootContainerElement, targetElement) {//... if (!listenerSet.has(listenerSetKey)) { if (isCapturePhaseListener) { eventSystemFlags |= IS_CAPTURE_PHASE; } addTrappedEventListener(target, domEventName, eventSystemFlags, isCapturePhaseListener); listenerSet.add(listenerSetKey); }}addTrappedEventListenerfunction addTrappedEventListener(targetContainer, domEventName, eventSystemFlags, isCapturePhaseListener, isDeferredListenerForLegacyFBSupport) { //创立具备优先级的监听函数 var listener = createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags); //... targetContainer = targetContainer; var unsubscribeListener; if (isCapturePhaseListener) {//节点上增加事件 if (isPassiveListener !== undefined) { unsubscribeListener = addEventCaptureListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener); } else { unsubscribeListener = addEventCaptureListener(targetContainer, domEventName, listener); } } else { if (isPassiveListener !== undefined) { unsubscribeListener = addEventBubbleListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener); } else { unsubscribeListener = addEventBubbleListener(targetContainer, domEventName, listener); } }}相干参考视频解说：进入学习 ...

类组件(Class component)和函数式组件(Functional component)之间有何不同类组件不仅容许你应用更多额定的性能，如组件本身的状态和生命周期钩子，也能使组件间接拜访 store 并维持状态当组件仅是接管 props，并将组件本身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，能够应用一个纯函数来创立这样的组件。这种组件也被称为哑组件(dumb components)或展现组件refs 是什么refs是react中援用的简写，有主语存储特定 React 元素或组件的援用的属性，它将由组件渲染配置函数返回当咱们须要输入框的内容，触发动画等时候能够应用refs组件通信的形式有哪些⽗组件向⼦组件通信: ⽗组件能够向⼦组件通过传 props 的⽅式，向⼦组件进⾏通信⼦组件向⽗组件通信: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通信，此props为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中兄弟组件通信: 找到这两个兄弟节点独特的⽗节点,联合上⾯两种⽅式由⽗节点转发信息进⾏通信跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如以后认证的⽤户、主题或⾸选语⾔，对于逾越多层的全局数据通过 Context 通信再适宜不过公布订阅模式: 发布者公布事件，订阅者监听事件并做出反馈,咱们能够通过引⼊event模块进⾏通信全局状态治理⼯具: 借助Redux或者Mobx等全局状态治理⼯具进⾏通信,这种⼯具会保护⼀个全局状态中⼼Store,并依据不同的事件产⽣新的状态类组件与函数组件有什么异同？相同点： 组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染的 React 元素。也正因为组件是 React 的最小编码单位，所以无论是函数组件还是类组件，在应用形式和最终出现成果上都是完全一致的。 咱们甚至能够将一个类组件改写成函数组件，或者把函数组件改写成一个类组件（尽管并不举荐这种重构行为）。从使用者的角度而言，很难从应用体验上辨别两者，而且在古代浏览器中，闭包和类的性能只在极其场景下才会有显著的差异。所以，根本可认为两者作为组件是完全一致的。 不同点： 它们在开发时的心智模型上却存在微小的差别。类组件是基于面向对象编程的，它主打的是继承、生命周期等外围概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、援用通明等特点。之前，在应用场景上，如果存在须要应用生命周期的组件，那么主推类组件；设计模式上，如果须要应用继承，那么主推类组件。但当初因为 React Hooks 的推出，生命周期概念的淡出，函数组件能够齐全取代类组件。其次继承并不是组件最佳的设计模式，官网更推崇“组合优于继承”的设计概念，所以类组件在这方面的劣势也在淡出。性能优化上，类组件次要依附 shouldComponentUpdate 阻断渲染来晋升性能，而函数组件依附 React.memo 缓存渲染后果来晋升性能。从上手水平而言，类组件更容易上手，从将来趋势上看，因为React Hooks 的推出，函数组件成了社区将来主推的计划。类组件在将来工夫切片与并发模式中，因为生命周期带来的复杂度，并不易于优化。而函数组件自身轻量简略，且在 Hooks 的根底上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的将来倒退。React 事件机制<div onClick={this.handleClick.bind(this)}>点我</div>React并不是将click事件绑定到了div的实在DOM上，而是在document处监听了所有的事件，当事件产生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的形式不仅仅缩小了内存的耗费，还能在组件挂在销毁时对立订阅和移除事件。 除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react本人实现的合成事件（SyntheticEvent）。因而如果不想要是事件冒泡的话应该调用event.preventDefault()办法，而不是调用event.stopProppagation()办法。 JSX 上写的事件并没有绑定在对应的实在 DOM 上，而是通过事件代理的形式，将所有的事件都对立绑定在了 document 上。这样的形式不仅缩小了内存耗费，还能在组件挂载销毁时对立订阅和移除事件。 另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 本人实现的合成事件（SyntheticEvent）。因而咱们如果不想要事件冒泡的话，调用 event.stopPropagation 是有效的，而应该调用 event.preventDefault。 实现合成事件的目标如下： 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；对于原生浏览器事件来说，浏览器会给监听器创立一个事件对象。如果你有很多的事件监听，那么就须要调配很多的事件对象，造成高额的内存调配问题。然而对于合成事件来说，有一个事件池专门来治理它们的创立和销毁，当事件须要被应用时，就会从池子中复用对象，事件回调完结后，就会销毁事件对象上的属性，从而便于下次复用事件对象。React的事件和一般的HTML事件有什么不同？区别： 对于事件名称命名形式，原生事件为全小写，react 事件采纳小驼峰；对于事件函数解决语法，原生事件为字符串，react 事件为函数；react 事件不能采纳 return false 的形式来阻止浏览器的默认行为，而必须要地明确地调用preventDefault()来阻止默认行为。合成事件是 react 模仿原生 DOM 事件所有能力的一个事件对象，其长处如下： ...

一、React 渲染流程和更新流程react渲染流程：jsx -> 虚构dom -> 实在domreact更新流程：props/state扭转 -> render函数从新执行 -> 生成新的虚构dom树 -> 新旧虚构dom树进行diff -> 计算出差别进行更新 ->更新到实在的dom树所以在每次更新的时候，React须要基于这两颗不同的树之间的差异来判断如何无效的更新UI，如果一棵树参考另外一棵树进行齐全比拟更新，那么即便是最先进的算法，该算法的复杂程度为 O(n3)，其中 n 是树中元素的数量，如果在React中应用了该算法，那么展现1000个元素所须要执行的计算量将在十亿的量级范畴，这个开销太过低廉了，React的更新性能会变得十分低效；于是React对这个算法进行了优化，将其优化成了O(n)，这也就是传说中的diff算法， 二、diff 算法diff 算法做了三处优化 同层节点之间互相比拟，不会垮节点比拟不同类型的节点，产生不同的树结构开发中，能够通过key来指定哪些节点在不同的渲染下保持稳定2-1 比照不同类型的元素当节点为不同的元素，React会装配原有的树，并且建设起新的树：当一个元素从<a>变成<img>，从<Article>变成<Comment>，或从<Button>变成<div>都会触发一个残缺的重建流程当卸载一棵树时，对应的DOM节点也会被销毁，组件实例将执行 componentWillUnmount() 办法；当建设一棵新的树时，对应的 DOM 节点会被创立以及插入到 DOM 中，组件实例将执行 componentWillMount()办法，紧接着 componentDidMount() 办法比方上面的代码更改：React 会销毁 Comment 组件并且从新装载一个新的组件，而不会对Counter进行复用；<div> <Comment /></div><span> <Comment /></span>2-2 比照同一类型的元素当比对两个雷同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有扭转的属性比方上面的代码更改：通过比对这两个元素，React 晓得只须要批改 DOM 元素上的 className 属性<div className="before" title="stu" /><div className="after" title="stu" />比方上面的代码更改：当更新 style 属性时，React 仅更新有所更变的属性。通过比对这两个元素，React 晓得只须要批改 DOM 元素上的 color 款式，无需批改 fontWeight。<div style={{color="red",fontWeight:"bold"}} /><div style={{color="green",fontWeight:"bold"}} />如果是同类型的组件元素：组件会放弃不变，React会更新该组件的props，并且调用componentWillReceiveProps() 和 componentWillUpdate() 办法，下一步调用 render() 办法，diff 算法将在之前的后果以及新的后果中进行递归；2-3 对子节点递归在默认条件下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差别时，生成一个mutation（扭转）。如果在最初插入一条数据的状况：后面两个比拟是完全相同的，所以不会产生mutation,最初一个比拟，产生一个mutation，将其插入到新的DOM树中即可，然而如果是在后面插入一条数据，React会对每一个子元素产生一个mutation，而不是放弃 <li>星际穿梭</li>和<li>盗梦空间</li>的不变；这种低效的比拟形式会带来肯定的性能问题，所以就得应用key来优化前面插一条数据<ul> <li>星际穿梭</li> <li>盗梦空间</li> </ul> <ul> <li>星际穿梭</li> <li>盗梦空间</li> <li>大话西游</li> </ul> 后面插一条数据 <ul> <li>星际穿梭</li> <li>盗梦空间</li> </ul> <ul> <li>大话西游</li> <li>星际穿梭</li> <li>盗梦空间</li> </ul>参考 前端进阶面试题具体解答 ...

高阶组件高阶函数：如果一个函数承受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。 高阶组件：如果一个函数 承受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。 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>; <p>props:<p>; <pre>{JSON.stringify(this.props, null, 4)}<pre>; {super.render()} <div>; ); } }; }2.渲染劫持（Render Highjacking） 条件渲染通过 props.isLoading 这个条件来判断渲染哪个组件。 批改由 render() 输入的 React 元素树 什么是状态晋升应用 react 常常会遇到几个组件须要共用状态数据的状况。这种状况下，咱们最好将这部分共享的状态晋升至他们最近的父组件当中进行治理。咱们来看一下具体如何操作吧。 import React from 'react'class Child_1 extends React.Component{ constructor(props){ super(props) } render(){ return ( <div> <h1>{this.props.value+2}</h1> </div> ) }}class Child_2 extends React.Component{ constructor(props){ super(props) } render(){ return ( <div> <h1>{this.props.value+1}</h1> </div> ) }}class Three extends React.Component { constructor(props){ super(props) this.state = { txt:"牛逼" } this.handleChange = this.handleChange.bind(this) } handleChange(e){ this.setState({ txt:e.target.value }) } render(){ return ( <div> <input type="text" value={this.state.txt} onChange={this.handleChange}/> <p>{this.state.txt}</p> <Child_1 value={this.state.txt}/> <Child_2 value={this.state.txt}/> </div> ) }}export default ThreeReact.Children.map和js的map有什么区别？JavaScript中的map不会对为null或者undefined的数据进行解决，而React.Children.map中的map能够解决React.Children为null或者undefined的状况。 ...

咱们先看下 React 官网文档对这两个 hook 的介绍，建设个整体意识 useEffect(create, deps): 该 Hook 接管一个蕴含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）扭转 DOM、增加订阅、设置定时器、记录日志以及执行其余蕴含副作用的操作都是不被容许的，因为这可能会产生莫名其妙的 bug 并毁坏 UI 的一致性。应用 useEffect 实现副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你能够把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。useLayoutEffect(create, deps): 其函数签名与 useEffect 雷同，但它会在所有的 DOM 变更之后同步调用 effect。能够应用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 外部的更新打算将被同步刷新。留神加粗的字段，React 官网的文档其实把两个 hook 的执行机会说的很分明，上面咱们深刻到 react 的执行流程中来了解下 问题useEffect 和 useLayoutEffect 的区别？useEffect 和 useLayoutEffect 哪一个与 componentDidMount，componentDidUpdate 的是等价的？useEffect 和 useLayoutEffect 哪一个与 componentWillUnmount 的是等价的？为什么倡议将批改 DOM 的操作里放到 useLayoutEffect 里，而不是 useEffect？流程react 在 diff 后，会进入到 commit 阶段，筹备把虚构 DOM 产生的变动映射到实在 DOM 上在 commit 阶段的后期，会调用一些生命周期办法，对于类组件来说，须要触发组件的 getSnapshotBeforeUpdate 生命周期，对于函数组件，此时会调度 useEffect 的 create destroy 函数留神是调度，不是执行。在这个阶段，会把应用了 useEffect 组件产生的生命周期函数入列到 React 本人保护的调度队列中，给予一个一般的优先级，让这些生命周期函数异步执行// 能够近似的认为，React 做了这样一步，理论流程中要简单的多setTimeout(() => { const preDestory = element.destroy; if (!preDestory) prevDestroy(); const destroy = create(); element.destroy= destroy;}, 0);随后，就到了 React 把虚构 DOM 设置到实在 DOM 上的阶段，这个阶段次要调用的函数是 commitWork，commitWork 函数会针对不同的 fiber 节点调用不同的 DOM 的批改办法，比方文本节点和元素节点的批改办法是不一样的。commitWork 如果遇到了类组件的 fiber 节点，不会做任何操作，会间接 return，进行收尾工作，而后去解决下一个节点，这点很容易了解，类组件的 fiber 节点没有对应的实在 DOM 构造，所以就没有相干操作但在有了 hooks 当前，函数组件在这个阶段，会同步调用上一次渲染时 useLayoutEffect(create, deps) create 函数返回的 destroy 函数留神一个节点在 commitWokr 后，这个时候，咱们曾经把产生的变动映射到实在 DOM 上了但因为 JS 线程和浏览器渲染线程是互斥的，因为 JS 虚拟机还在运行，即便内存中的实在 DOM 曾经变动，浏览器也没有立即渲染到屏幕上此时会进行收尾工作，同步执行对应的生命周期办法，咱们说的componentDidMount，componentDidUpdate 以及 useLayoutEffect(create, deps) 的 create 函数都是在这个阶段被同步执行。对于 react 来说，commit 阶段是不可打断的，会一次性把所有须要 commit 的节点全副 commit 完，至此 react 更新结束，JS 进行执行浏览器把发生变化的 DOM 渲染到屏幕上，到此为止 react 仅用一次回流、重绘的代价，就把所有须要更新的 DOM 节点全副更新实现浏览器渲染实现后，浏览器告诉 react 本人处于闲暇阶段，react 开始执行本人调度队列中的工作，此时才开始执行 useEffect(create, deps) 的产生的函数解答useEffect 和 useLayoutEffect 的区别？useEffect 在渲染时是异步执行，并且要等到浏览器将所有变动渲染到屏幕后才会被执行。 ...

当咱们在相似上面的搜寻框组件进行搜寻时会发现，组件分为搜寻局部和搜寻后果展现列表，咱们冀望输入框能立即响应，后果列表能够有期待的工夫，如果后果列表数据量很大，在进行渲染的时候，咱们又输出了一些文字，因为用户输出事件的优先级是很高的，所以就要进行后果列表的渲染，这就引出了不同工作之间的优先级和调度 Scheduler咱们晓得如果咱们的利用占用较长的js执行工夫，比方超过了设施一帧的工夫，那么设施的绘制就会出不的景象。 Scheduler次要的性能是工夫切片和调度优先级，react在比照差别的时候会占用肯定的js执行工夫，Scheduler外部借助MessageChannel实现了在浏览器绘制之前指定一个工夫片，如果react在指定工夫内没比照完，Scheduler就会强制交出执行权给浏览器 工夫切片 在浏览器的一帧中js的执行工夫如下 requestIdleCallback是在浏览器重绘重排之后，如果还有闲暇就能够执行的机会，所以为了不影响重绘重排，能够在浏览器在requestIdleCallback中执行耗性能的计算，然而因为requestIdleCallback存在兼容和触发机会不稳固的问题，scheduler中采纳MessageChannel来实现requestIdleCallback，以后环境不反对MessageChannel就采纳setTimeout。 在之前的介绍中咱们晓得在performUnitOfWork之后会执行render阶段和commit阶段，如果在浏览器的一帧中，cup的计算还没实现，就会让出js执行权给浏览器，这个判断在workLoopConcurrent函数中，shouldYield就是用来判断残余的工夫有没有用尽。在源码中每个工夫片时5ms，这个值会依据设施的fps调整。 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}function forceFrameRate(fps) {//计算工夫片 if (fps < 0 || fps > 125) { console['error']( 'forceFrameRate takes a positive int between 0 and 125, ' + 'forcing frame rates higher than 125 fps is not supported', ); return; } if (fps > 0) { yieldInterval = Math.floor(1000 / fps); } else { yieldInterval = 5;//工夫片默认5ms }}工作的暂停在shouldYield函数中有一段，所以能够晓得，如果以后工夫大于工作开始的工夫+yieldInterval，就打断了工作的进行。 ...

concurrent modereact17反对concurrent mode，这种模式的基本目标是为了让利用放弃cpu和io的疾速响应，它是一组新性能，包含Fiber、Scheduler、Lane，能够依据用户硬件性能和网络情况调整利用的响应速度，外围就是为了实现异步可中断的更新。concurrent mode也是将来react次要迭代的方向。 cup：让耗时的reconcile的过程能让出js的执行权给更高优先级的工作，例如用户的输出，io：依附SuspenseFiberFiber咱们之前介绍过，这里咱们来看下在concurrent mode下Fiber的意义，react15之前的reconcile是同步执行的，当组件数量很多，reconcile时的计算量很大时，就会呈现页面的卡顿，为了解决这个问题就须要一套异步可中断的更新来让耗时的计算让出js的执行权给高优先级的工作，在浏览器有闲暇的时候再执行这些计算。所以咱们须要一种数据结构来形容实在dom和更新的信息，在适当的时候能够在内存中中断reconcile的过程，这种数据结构就是Fiber。 SchedulerScheduler独立于react自身，相当于一个独自的package，Scheduler的意义在于，当cup的计算量很大时，咱们依据设施的fps算出一帧的工夫，在这个工夫内执行cup的操作，当工作执行的工夫快超过一帧的工夫时，会暂停工作的执行，让浏览器有工夫进行重排和重绘。在适当的时候持续工作。 在js中咱们晓得generator也能够暂停和持续工作，然而咱们还须要用优先级来排列工作，这个是generator无奈实现的。在Scheduler中应用MessageChannel实现了工夫切片，而后用小顶堆排列工作优先级的高下，达到了异步可中断的更新。 Scheduler能够用过期工夫来代表优先级的高下。 优先级越高，过期工夫越短，离以后工夫越近，也就是说过一会就要执行它了。 优先级越低，过期工夫越长，离以后工夫越长，也就是过很久了能力轮到它执行。 laneLane用二进制位示意工作的优先级，不便优先级的计算，不同优先级占用不同地位的‘赛道’，而且存在批的概念，优先级越低，‘赛道’越多。高优先级打断低优先级，新建的工作须要赋予什么优先级等问题都是Lane所要解决的问题。 batchedUpdates简略来说，在一个上下文中同时触发屡次更新，这些更新会合并成一次更新，例如 onClick() { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 });} 在之前的react版本中如果脱离以后的上下文就不会被合并，例如把屡次更新放在setTimeout中，起因是处于同一个context的屡次setState的executionContext都会蕴含BatchedContext，蕴含BatchedContext的setState会合并，当executionContext等于NoContext，就会同步执行SyncCallbackQueue中的工作，所以setTimeout中的屡次setState不会合并，而且会同步执行。 onClick() { setTimeout(() => { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); });}export function batchedUpdates<A, R>(fn: A => R, a: A): R { const prevExecutionContext = executionContext; executionContext |= BatchedContext; try { return fn(a); } finally { executionContext = prevExecutionContext; if (executionContext === NoContext) { resetRenderTimer(); //executionContext为NoContext就同步执行SyncCallbackQueue中的工作 flushSyncCallbackQueue(); } }} 在Concurrent mode下，下面的例子也会合并为一次更新，根本原因在如下一段简化的源码，如果屡次setState，会比拟这几次setState回调的优先级，如果优先级统一，则先return掉，不会进行前面的render阶段 ...

最近遇到一个bug，问题是呈现在react hook 中，为了代码的可读性，我把一个view拆成了多个子 component，其中有一些是 pure component，有一些是含有 usestate 的 stateful component，然而在实际的过程中发现，当父组件应用 setState 更新视图的时候，有些 stateful component 中的 state 会主动还原为初始值，有一些则不会，认真比照后发现是组件实例化的写法不一样，代码概要如下： import { useState } from "react";import CHild from "./Child";import "./styles.css";export default function App() { const [random, setRandom] = useState(() => Math.random() * 10); const RenderPart = function () { const [count, setCount] = useState(0); return ( <div> {count} <button onClick={() => setCount((prev) => prev + 1)}>add one</button> </div> ); }; const renderOtherPart = function () { const [count, setCount] = useState(0); return ( <div> {count} <button onClick={() => setCount((prev) => prev + 1)}>add2 one</button> </div> ); }; return ( <div className="App"> <h3>{random}</h3> <button onClick={() => { setRandom(Math.random() * 10); }} > refresh </button> {/* render component via other render function with Component style would refresh the state of child component*/} <RenderPart></RenderPart> {/* render component via other render function with function style wouldn't refresh the state neither */} {renderOtherPart()} </div> );}应用 Babel 转译后的代码： ...

怎么用 React.createElement 重写上面的代码Question： const element = ( <h1 className="greeting"> Hello, rdhub.cn! </h1>);Answer： const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, rdhub.cn!');组件通信的形式有哪些⽗组件向⼦组件通信: ⽗组件能够向⼦组件通过传 props 的⽅式，向⼦组件进⾏通信⼦组件向⽗组件通信: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通信，此props为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中兄弟组件通信: 找到这两个兄弟节点独特的⽗节点,联合上⾯两种⽅式由⽗节点转发信息进⾏通信跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如以后认证的⽤户、主题或⾸选语⾔，对于逾越多层的全局数据通过 Context 通信再适宜不过公布订阅模式: 发布者公布事件，订阅者监听事件并做出反馈,咱们能够通过引⼊event模块进⾏通信全局状态治理⼯具: 借助Redux或者Mobx等全局状态治理⼯具进⾏通信,这种⼯具会保护⼀个全局状态中⼼Store,并依据不同的事件产⽣新的状态对于store的了解Store 就是把它们分割到一起的对象。Store 有以下职责： 维持利用的 state；提供 getState() 办法获取 state；提供 dispatch(action) 办法更新 state；通过 subscribe(listener)注册监听器;通过 subscribe(listener)返回的函数登记监听器React中的props为什么是只读的？this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具备浓厚的函数式编程的思维。 提到函数式编程就要提一个概念：纯函数。它有几个特点： 给定雷同的输出，总是返回雷同的输入。过程没有副作用。不依赖内部状态。this.props就是吸取了纯函数的思维。props的不能够变性就保障的雷同的输出，页面显示的内容是一样的，并且不会产生副作用 为什么应用jsx的组件中没有看到应用react却须要引入react？实质上来说JSX是React.createElement(component, props, ...children)办法的语法糖。在React 17之前，如果应用了JSX，其实就是在应用React， babel 会把组件转换为 CreateElement 模式。在React 17之后，就不再须要引入，因为 babel 曾经能够帮咱们主动引入react。 为什么 React 要用 JSX？JSX 是一个 JavaScript 的语法扩大，或者说是一个相似于 XML 的 ECMAScript 语法扩大。它自身没有太多的语法定义，也不冀望引入更多的规范。 其实 React 自身并不强制应用 JSX。在没有 JSX 的时候，React 实现一个组件依赖于应用 React.createElement 函数。代码如下： ...

Debouncedebounce 原意打消抖动，对于事件触发频繁的场景，只有最初由程序控制的事件是无效的。防抖函数，咱们须要做的是在一件事触发的时候设置一个定时器使事件提早产生，在定时器期间事件再次触发的话则革除重置定时器，直到定时器到时仍不被革除，事件才真正产生。 const debounce = (fun, delay) => { let timer; return (...params) => { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fun(...params); }, delay); };};如果事件产生使一个变量频繁变动，那么应用debounce能够升高批改次数。通过传入批改函数，取得一个新的批改函数来应用。 如果是class组件，新函数能够挂载到组件this上，然而函数式组件局部变量每次render都会创立，debounce失去作用，这时须要通过useRef来保留成员函数（下文throttle通过useRef保留函数），是不够便捷的，就有了将debounce做成一个hook的必要。 function useDebounceHook(value, delay) { const [debounceValue, setDebounceValue] = useState(value); useEffect(() => { let timer = setTimeout(() => setDebounceValue(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debounceValue;}在函数式组件中，能够将指标变量通过useDebounceHook转化一次，只有在满足delay的提早之后，才会触发，在delay期间的触发都会重置计时。 配合useEffect，在debounce value扭转之后才会做出一些动作。上面的text这个state频繁变动，然而依赖的是debounceText，所以引发的useEffect回调函数却是在指定提早之后才会触发。 const [text,setText]=useState('');const debounceText = useDebounceHook(text, 2000);useEffect(() => { // ... console.info("change", debounceText);}, [debounceText]);function onChange(evt){ setText(evt.target.value)}下面一个搜寻框，输出实现1秒（指定提早）后才触发搜寻申请，曾经达到了防抖的目标。 ...

调用 setState 之后产生了什么在代码中调用 setState 函数之后，React 会将传入的参数与之前的状态进行合并，而后触发所谓的和谐过程（Reconciliation）。通过和谐过程，React 会以绝对高效的形式依据新的状态构建 React 元素树并且着手从新渲染整个 UI 界面。在 React 失去元素树之后，React 会计算出新的树和老的树之间的差别，而后依据差别对界面进行最小化从新渲染。通过 diff 算法，React 可能准确制导哪些地位产生了扭转以及应该如何扭转，这就保障了按需更新，而不是全副从新渲染。在 setState 的时候，React 会为以后节点创立一个 updateQueue 的更新列队。而后会触发 reconciliation 过程，在这个过程中，会应用名为 Fiber 的调度算法，开始生成新的 Fiber 树， Fiber 算法的最大特点是能够做到异步可中断的执行。而后 React Scheduler 会依据优先级高下，先执行优先级高的节点，具体是执行 doWork 办法。在 doWork 办法中，React 会执行一遍 updateQueue 中的办法，以取得新的节点。而后比照新旧节点，为老节点打上 更新、插入、替换 等 Tag。以后节点 doWork 实现后，会执行 performUnitOfWork 办法取得新节点，而后再反复下面的过程。当所有节点都 doWork 实现后，会触发 commitRoot 办法，React 进入 commit 阶段。在 commit 阶段中，React 会依据后面为各个节点打的 Tag，一次性更新整个 dom 元素能够应用TypeScript写React利用吗？怎么操作？（1）如果还未创立 Create React App 我的项目 间接创立一个具备 typescript 的 Create React App 我的项目： npx create-react-app demo --typescript（2）如果曾经创立了 Create React App 我的项目，须要将 typescript 引入到已有我的项目中 ...

Hook 简介Hook入世之前React存在的问题在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的路径（例如，把组件连贯到 store）。有一些解决此类问题的计划，比方 render props 和 高阶组件。然而这类计划须要从新组织你的组件构造，这可能会很麻烦，使你的代码难以了解。 简单组件变得难以了解 组件经常在 componentDidMount 和 componentDidUpdate中获取数据。然而，同一个 componentDidMount 中可能也蕴含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中革除。互相关联且须要对照批改的代码被进行了拆分，而齐全不相干的代码却在同一个办法中组合在一起。如此很容易产生 bug，并且导致逻辑不统一。 难以了解的 class class 是学习 React 的一大屏障。你必须去了解 JavaScript 中 this 的工作形式，这与其余语言存在微小差别。还不能遗记绑定事件处理器。没有稳固的语法提案，这些代码十分冗余。大家能够很好地了解 props，state 和自顶向下的数据流，但对 class 却束手无策。 Hook带来的解决方案你能够应用 Hook 从组件中提取状态逻辑，使得这些逻辑能够独自测试并复用。Hook 使你在无需批改组件构造的状况下复用状态逻辑。Hook 将组件中互相关联的局部拆分成更小的函数（比方设置订阅或申请数据），而并非强制依照生命周期划分。你还能够应用 reducer 来治理组件的外部状态，使其更加可预测。Hook 使你在非 class 的状况下能够应用更多的 React 个性。 从概念上讲，React 组件始终更像是函数。而 Hook 则拥抱了函数，同时也没有就义 React 的精力准则。Hook 提供了问题的解决方案，无需学习简单的函数式或响应式编程技术。Hook APIuseStateuseState 是react自带的一个hook函数，它的作用就是用来申明状态变量。useState这个函数接管的参数是咱们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是以后以后的状态值，第[1]项是能够扭转状态值的办法函数。 初始化//返回一个 state，以及更新 state 的函数 setState(接管一个新的 state 值并将组件的一次从新渲染退出队列)const [state, setState] = useState(initialState);函数式更新//如果新的 state 须要通过应用先前的 state 计算得出，那么能够将函数传递给 setState。该函数将接管先前的 state，并返回一个更新后的值。function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> );}惰性初始 state//如果初始 state 须要通过简单计算取得，则能够传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState;});跳过 state 更新调用 State Hook 的更新函数并传入以后的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 应用 Object.is 比拟算法 来比拟 state。） ...

hook调用入口 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会依据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate ReactCurrentDispatcher.current = current === null || current.memoizedState === null//mount or update ? HooksDispatcherOnMount : HooksDispatcherOnUpdate; const HooksDispatcherOnMount: Dispatcher = {//mount时 useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, useMemo: mountMemo, useReducer: mountReducer, useRef: mountRef, useState: mountState, //...};const HooksDispatcherOnUpdate: Dispatcher = {//update时 useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, useImperativeHandle: updateImperativeHandle, useLayoutEffect: updateLayoutEffect, useMemo: updateMemo, useReducer: updateReducer, useRef: updateRef, useState: updateState, //...};hook数据结构 在FunctionComponent中，多个hook会造成hook链表，保留在Fiber的memoizedState的上，而须要更新的Update保留在hook.queue.pending中 const hook: Hook = { memoizedState: null,//对于不同hook，有不同的值 baseState: null,//初始state baseQueue: null,//初始queue队列 queue: null,//须要更新的update next: null,//下一个hook};上面来看下memoizedState对应的值 ...

手写hooks最要害的是要了解hook队列和update队列的指针指向和updateQueue的更新计算 import React from "react";import ReactDOM from "react-dom";let workInProgressHook;//当前工作中的hooklet isMount = true;//是否时mount时const fiber = {//fiber节点 memoizedState: null,//hook链表 stateNode: App//dom};const Dispatcher = (() => {//Dispatcher对象 function mountWorkInProgressHook() {//mount时调用 const hook = {//构建hook queue: {//更新队列 pending: null//未执行的update队列 }, memoizedState: null,//以后state next: null//下一个hook }; if (!fiber.memoizedState) { fiber.memoizedState = hook;//第一个hook的话间接赋值给fiber.memoizedState } else { workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的前面，造成链表 } workInProgressHook = hook;//记录当前工作的hook return workInProgressHook; } function updateWorkInProgressHook() {//update时调用 let curHook = workInProgressHook; workInProgressHook = workInProgressHook.next;//下一个hook return curHook; } function useState(initialState) { let hook; if (isMount) { hook = mountWorkInProgressHook(); hook.memoizedState = initialState;//初始状态 } else { hook = updateWorkInProgressHook(); } let baseState = hook.memoizedState;//初始状态 if (hook.queue.pending) { let firstUpdate = hook.queue.pending.next;//第一个update do { const action = firstUpdate.action; baseState = action(baseState); firstUpdate = firstUpdate.next;//循环update链表 } while (firstUpdate !== hook.queue.pending);//通过update的action计算state hook.queue.pending = null;//重置update链表 } hook.memoizedState = baseState;//赋值新的state return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回 } return { useState };})();function dispatchAction(queue, action) {//触发更新 const update = {//构建update action, next: null }; if (queue.pending === null) { update.next = update;//update的环状链表 } else { update.next = queue.pending.next;//新的update的next指向前一个update queue.pending.next = update;//前一个update的next指向新的update } queue.pending = update;//更新queue.pending isMount = false;//标记mount完结 workInProgressHook = fiber.memoizedState;//更新workInProgressHook schedule();//调度更新}function App() { let [count, setCount] = Dispatcher.useState(1); let [age, setAge] = Dispatcher.useState(10); return ( <> <p>Clicked {count} times</p> <button onClick={() => setCount(() => count + 1)}> Add count</button> <p>Age is {age}</p> <button onClick={() => setAge(() => age + 1)}> Add age</button> </> );}function schedule() { ReactDOM.render(<App />, document.querySelector("#root"));}schedule();相干参考视频解说：进入学习 ...

各阶段生命周期执行状况函数组件hooks的周期会在hooks章节解说，这一章的使命周期次要针对类组件，各阶段生命周期执行状况看下图： render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： 相干参考视频解说：进入学习 mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMountupdate时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate

setState&forceUpdate在react中触发状态更新的几种形式： ReactDOM.renderthis.setStatethis.forceUpdateuseStateuseReducer咱们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲 this.setState内调用this.updater.enqueueSetState，次要是将update退出updateQueue中//ReactBaseClasses.jsComponent.prototype.setState = function (partialState, callback) { if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { { throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); } } this.updater.enqueueSetState(this, partialState, callback, 'setState');};//ReactFiberClassComponent.old.jsenqueueSetState(inst, payload, callback) { const fiber = getInstance(inst);//fiber实例 const eventTime = requestEventTime(); const suspenseConfig = requestCurrentSuspenseConfig(); const lane = requestUpdateLane(fiber, suspenseConfig);//优先级 const update = createUpdate(eventTime, lane, suspenseConfig);//创立update update.payload = payload; if (callback !== undefined && callback !== null) { //赋值回调 update.callback = callback; } enqueueUpdate(fiber, update);//update退出updateQueue scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update}enqueueUpdate用来将update退出updateQueue队列 ...

非嵌套关系组件的通信形式？即没有任何蕴含关系的组件，包含兄弟组件以及不在同一个父级中的非兄弟组件。 能够应用自定义事件通信（公布订阅模式）能够通过redux等进行全局状态治理如果是兄弟组件通信，能够找到这两个兄弟节点独特的父节点, 联合父子间通信形式进行通信。react hooks，它带来了那些便当代码逻辑聚合，逻辑复用HOC嵌套天堂代替classReact 中通常应用 类定义 或者 函数定义 创立组件:在类定义中，咱们能够应用到许多 React 个性，例如 state、 各种组件生命周期钩子等，然而在函数定义中，咱们却无能为力，因而 React 16.8 版本推出了一个新性能 (React Hooks)，通过它，能够更好的在函数定义组件中应用 React 个性。 益处: 跨组件复用: 其实 render props / HOC 也是为了复用，相比于它们，Hooks 作为官网的底层 API，最为轻量，而且革新老本小，不会影响原来的组件层次结构和传说中的嵌套天堂；类定义更为简单不同的生命周期会使逻辑变得扩散且凌乱，不易保护和治理；时刻须要关注this的指向问题；代码复用代价高，高阶组件的应用常常会使整个组件树变得臃肿；状态与UI隔离: 正是因为 Hooks 的个性，状态逻辑会变成更小的粒度，并且极容易被形象成一个自定义 Hooks，组件中的状态和 UI 变得更为清晰和隔离。留神: 防止在 循环/条件判断/嵌套函数 中调用 hooks，保障调用程序的稳固；只有 函数定义组件 和 hooks 能够调用 hooks，防止在 类组件 或者 一般函数 中调用；不能在useEffect中应用useState，React 会报错提醒；类组件不会被替换或废除，不须要强制革新类组件，两种形式能并存；重要钩子 状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state的性能；// useState 只承受一个参数: 初始状态// 返回的是组件名和更改该组件对应的函数const [flag, setFlag] = useState(true);// 批改状态setFlag(false)// 下面的代码映射到类定义中:this.state = { flag: true }const flag = this.state.flagconst setFlag = (bool) => { this.setState({ flag: bool, })}生命周期钩子 (useEffect):类定义中有许多生命周期函数，而在 React Hooks 中也提供了一个相应的函数 (useEffect)，这里能够看做componentDidMount、componentDidUpdate和componentWillUnmount的联合。useEffect(callback, [source])承受两个参数 ...

mixinMixin 设计模式Mixin（混入）是一种通过扩大收集性能的形式，它实质上是将一个对象的属性拷贝到另一个对象下面去，能够拷贝多个属性到一个对象上，为了解决代码复用问题。 罕用的办法：JQuery 的 extend 办法。 var LogMixin = { log: function() { console.log('log'); }, componentDidMount: function() { console.log('in'); }, componentWillUnmount: function() { console.log('out'); }};var User = React.createClass({ mixins: [LogMixin], render: function() { return (<div>...</div>) }});var Goods = React.createClass({ mixins: [LogMixin], render: function() { return (<div>...</div>) }});毛病Mixin 可能会相互依赖，互相耦合，不利于代码保护不同的 Mixin 中的办法可能会互相抵触当初大量应用 ES6 语法后，React.createClass 曾经勾销，这种形式也不再举荐高阶组件（HOC）高阶组件的定义： 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 本身不是 React API 的一部分，它是一种基于 React 的组合个性而造成的设计模式。 (高阶组件是参数为组件，返回值为新组件的函数。)具体的意思就是：高阶组件能够看作 React 对装璜模式的一种实现，高阶组件就是一个函数，且该函数承受一个组件作为参数，并返回一个新的组件。他会返回一个加强的 React 组件。高阶组件能够让咱们的代码更具备复用性，逻辑性与抽象性，能够对 render 办法进行劫持，也能够管制 props 与 state。 ...

React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被批改、被增加或者被移除的辅助标识。 在 React 中渲染汇合时，向每个反复的元素增加关键字对于帮忙React跟踪元素与数据之间的关联十分重要。key 应该是惟一ID，最好是 UUID 或收集项中的其余惟一字符串： <ul> {todos.map((todo) => <li key={todo.id}> {todo.text} </li> )};</ul>在汇合中增加和删除我的项目时，不应用键或将索引用作键会导致奇怪的行为。 diff算法? 把树形构造依照层级合成，只比拟同级元素。给列表构造的每个单元增加惟一的key属性，不便比拟。React 只会匹配雷同 class 的 component（这外面的class指的是组件的名字）合并操作，调用 component 的 setState 办法的时候, React 将其标记为 - dirty.到每一个事件循环完结, React 查看所有标记 dirty的 component从新绘制.抉择性子树渲染。开发人员能够重写shouldComponentUpdate进步diff的性能父子组件的通信形式？父组件向子组件通信：父组件通过 props 向子组件传递须要的信息。 // 子组件: Childconst Child = props =>{ return <p>{props.name}</p>}// 父组件 Parentconst Parent = ()=>{ return <Child name="react"></Child>}子组件向父组件通信：: props+回调的形式。 // 子组件: Childconst Child = props =>{ const cb = msg =>{ return ()=>{ props.callback(msg) } } return ( <button onClick={cb("你好!")}>你好</button> )}// 父组件 Parentclass Parent extends Component { callback(msg){ console.log(msg) } render(){ return <Child callback={this.callback.bind(this)}></Child> }}React-Router的路由有几种模式？React-Router 反对应用 hash（对应 HashRouter）和 browser（对应 BrowserRouter） 两种路由规定， react-router-dom 提供了 BrowserRouter 和 HashRouter 两个组件来实现利用的 UI 和 URL 同步： ...

前言所谓同构，简而言之就是，第一次拜访后盾服务时，后盾间接把前端要显示的界面全副返回，而不是像 SPA 我的项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来能够大大减少首屏等待时间。 同构概念并不简单，它也非我的项目必需品，然而摸索它的原理却是必须的。 浏览本文须要你具备以下技术根底： Node.js 、 React 、 React Router 、 Redux 、 webpack 。 本文将分以下两局部去讲述： 同构思路剖析，让你对同构有一个概念上的理解；手写同构框架，深刻了解同构原理。同构思路CSR 客户端渲染CSR 客户端渲染，这个就是很好了解了，应用 React ， React Router 前端本人管制路由的 SPA 我的项目，就能够了解成客户端渲染。它有一个十分大的劣势就是，只是首次拜访会申请后盾服务加载相应文件，之后的拜访都是前端本人判断 URL 展现相干组件，因而除了首次访问速度慢些之外，之后的访问速度都很快。 执行命令： create-react-app react-csr 创立一个 React SPA 单页面利用我的项目 。执行命令： npm run start 启动我的项目。 查看网页源代码： 只有一个 <div id="root"></div> 和 一些 script 脚本。最终出现进去的界面却是这样的： 原理很简略，置信学习过 webpack 的同学都晓得，那就是 webpack 把所有代码都打包成相应脚本并插入到 HTML 界面中，浏览器会解析 script 脚本，通过动静插入 DOM 的形式展现出相应界面。 客户端渲染的优劣势客户端渲染流程如下： 劣势： 前端负责渲染页面，后端负责实现接口，各自干好各自的事件，对开发效率有极大的晋升；前端在跳转界面的时候不须要申请后盾，减速了界面跳转的速度，进步用户体验。劣势： 因为须要期待 JS 文件加载以及后盾接口数据申请因而首屏加载工夫长，用户体验较差；因为大部分内容都是通过 JS 加载因而搜索引擎无奈爬取剖析网页内容导致网站无奈 SEO 。SSR 服务端渲染SSR 是服务端渲染技术，它自身是一项比拟一般的技术， Node.js 应用 ejs 模板引擎输入一个界面这就是服务端渲染。每次拜访一个路由都是申请后盾服务，从新加载文件渲染界面。 ...

怎么学习react源码作为前端最罕用的js库之一，相熟react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的应用层面或者想在前端技能的深度上有所突破，那相熟react源码将是你提高的很好的形式。 react的纯正体现在它的api上，一切都是围绕setState状态更新进行的，然而外部的逻辑却经验了很大的重构和变动，而且代码量也不小，如果只是从源码文件和函数来浏览，那会很难以了解react的渲染流程。优良工程师几年工夫打造的库，必然有借鉴之处，那么咱们应该怎么学习react源码呢。 首先，咱们能够从函数调用栈动手，理清react的各个模块的性能和它们调用的程序，盖房子一样，先搭好架子，对源码有个整体的意识，而后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。其次能够联合一些demo和本人画图了解，react源码中设计大量的链表操作，画图是一个很好的了解指针操作的形式。源码里也有一些英文正文，能够依据正文或者依据此react源码解析文章进行了解。 相熟react源码并不是久而久之的事，想精进本人的技术，必须花工夫才行。 教程特色本教程遵循react v17.0.1源码的核心思想，目标是打造一门通俗易懂的react源码解析系列文章。教程从源码的各个模块开始，联合大量demo、示例图解和视频教程，带着大家一步一步调试react源码，教程也会齐全遵循react17手写hook和精简版的react不便大家的了解，随着react大版本的更新，此教程也会始终更新。 教程构造 教程播种为什么要学习react源码呢，你是应用了api很久，停留在框架应用层面还是会被动去理解框架的逻辑和运行形式呢。跟着教程走，了解起来不费劲，你将播种： 面试加分：大厂前端岗都要求相熟框架底层原理，也是面试必问环节，相熟react源码会为你的面试加分，也会为你的谈薪流程减少不少筹码坚固基础知识：在源码的scheduler中应用了小顶堆 这种数据结构，调度的实现则应用了messageChannel，在render阶段的reconciler中则应用了fiber、update、链表 这些构造，lane模型应用了二进制掩码，咱们也会介绍diff算法怎么升高比照复杂度。学习本教程也顺便坚固了数据结构和算法、事件循环。日常开发晋升效率：相熟react源码之后，你对react的运行流程有了新的意识，在日常的开发中，置信你对组件的性能优化、react应用技巧和解决bug会更加得心应手。置信学完教程之后，你对react的了解肯定会回升一个品位，甚至会超过大多数面试官了 常见面试题（带上问题学习吧）以下这些问题可能你曾经有答案了，然而你能从源码角度答复进去吗。 jsx和Fiber有什么关系react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了Fiber是什么，它为什么能进步性能hooks 为什么hooks不能写在条件判断中状态/生命周期 setState是同步的还是异步的componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE组件 react元素$$typeof属性什么react怎么辨别Class组件和Function组件函数组件和类组件的相同点和不同点开放性问题 说说你对react的了解/请说一下react的渲染过程聊聊react生命周期简述diff算法react有哪些优化伎俩react为什么引入jsx说说virtual Dom的了解你对合成事件的了解 咱们写的事件是绑定在dom上么，如果不是绑定在哪里？为什么咱们的事件手动绑定this(不是箭头函数的状况)为什么不能用 return false 来阻止事件的默认行为？react怎么通过dom元素，找到与之对应的 fiber对象的？解释后果和景象 点击Father组件的div，Child会打印Child吗function Child() { console.log('Child'); return <div>Child</div>;}function Father(props) { const [num, setNum] = React.useState(0); return ( <div onClick={() => {setNum(num + 1)}}> {num} {props.children} </div> );}function App() { return ( <Father> <Child/> </Father> );}const rootEl = document.querySelector("#root");ReactDOM.render(<App/>, rootEl);相干参考视频解说：进入学习 打印程序是什么function Child() { useEffect(() => { console.log('Child'); }, []) return <h1>child</h1>;}function Father() { useEffect(() => { console.log('Father'); }, []) return <Child/>;}function App() { useEffect(() => { console.log('App'); }, []) return <Father/>;}useLayoutEffect/componentDidMount和useEffect的区别是什么class App extends React.Component { componentDidMount() { console.log('mount'); }}useEffect(() => { console.log('useEffect');}, [])如何解释demo_4、demo_8、demo_9呈现的景象

在render阶段的开端会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，而后会遍历render阶段生成的effectList，effectList上的Fiber节点保留着对应的props变动。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事件如下 在commitRoot函数中其实是调度了commitRootImpl函数 //ReactFiberWorkLoop.old.jsfunction commitRoot(root) { var renderPriorityLevel = getCurrentPriorityLevel(); runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中次要分三个局部： commit阶段前置工作 调用flushPassiveEffects执行完所有effect的工作初始化相干变量赋值firstEffect给前面遍历effectList用//ReactFiberWorkLoop.old.jsdo { // 调用flushPassiveEffects执行完所有effect的工作 flushPassiveEffects(); } while (rootWithPendingPassiveEffects !== null); //... // 重置变量 finishedWork指rooFiber root.finishedWork = null; //重置优先级 root.finishedLanes = NoLanes; // Scheduler回调函数重置 root.callbackNode = null; root.callbackId = NoLanes; // 重置全局变量 if (root === workInProgressRoot) { workInProgressRoot = null; workInProgress = null; workInProgressRootRenderLanes = NoLanes; } else { } //rootFiber可能会有新的副作用 将它也退出到effectLis let firstEffect; if (finishedWork.effectTag > PerformedWork) { if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 ...

何为 JSXJSX 是 JavaScript 语法的一种语法扩大，并领有 JavaScript 的全副性能。JSX 生产 React "元素"，你能够将任何的 JavaScript 表达式封装在花括号里，而后将其嵌入到 JSX 中。在编译实现之后，JSX 表达式就变成了惯例的 JavaScript 对象，这意味着你能够在 if 语句和 for 循环外部应用 JSX，将它赋值给变量，承受它作为参数，并从函数中返回它。 调用 setState 之后产生了什么在代码中调用 setState 函数之后，React 会将传入的参数与之前的状态进行合并，而后触发所谓的和谐过程（Reconciliation）。通过和谐过程，React 会以绝对高效的形式依据新的状态构建 React 元素树并且着手从新渲染整个 UI 界面。在 React 失去元素树之后，React 会计算出新的树和老的树之间的差别，而后依据差别对界面进行最小化从新渲染。通过 diff 算法，React 可能准确制导哪些地位产生了扭转以及应该如何扭转，这就保障了按需更新，而不是全副从新渲染。在 setState 的时候，React 会为以后节点创立一个 updateQueue 的更新列队。而后会触发 reconciliation 过程，在这个过程中，会应用名为 Fiber 的调度算法，开始生成新的 Fiber 树， Fiber 算法的最大特点是能够做到异步可中断的执行。而后 React Scheduler 会依据优先级高下，先执行优先级高的节点，具体是执行 doWork 办法。在 doWork 办法中，React 会执行一遍 updateQueue 中的办法，以取得新的节点。而后比照新旧节点，为老节点打上 更新、插入、替换 等 Tag。以后节点 doWork 实现后，会执行 performUnitOfWork 办法取得新节点，而后再反复下面的过程。当所有节点都 doWork 实现后，会触发 commitRoot 办法，React 进入 commit 阶段。在 commit 阶段中，React 会依据后面为各个节点打的 Tag，一次性更新整个 dom 元素vue 或者react 优化整体优化虚构dom为什么虚构 dom 会进步性能?(必考) ...

开发者普遍认为状态是组件的一部分, 然而同时却又在剥离状态上不停的造轮子, 这不是很矛盾么? 对于一个最简略的文本组件而言 function Text(){ const [text, setText] = useState('载入') return (){ <p>{text}</p> }}你感觉应该把 text 从 Text 组件中剥离么? 如果你的直觉通知你不应该这么做, 那为何要应用 redux mobx jotai 等等一系列稀奇古怪的状态治理库来让咱们的代码变得更简单? 所以 why? 还不是 React 本人的锅!!! 因为 React 在组件状态上给出了双重定义, 内敛的 state 和凋谢的 props.同时因为 jsx 的限度导致组件通信只能依赖 props. 有人会说还有 context, 但如果你为组件通信独自减少一层 provide, 那随着利用收缩, 你的状态会被 xml 构造割得支离破碎, 最初只剩下繁多 store 这颗有毒药丸. 因为 React 天生状态同步上的缺点, 才让状态治理这件事在 React 社区如此发达, 这其实是病态的. 想想战国时期群雄逐鹿吧. 还不是周天子失仪, 看看 Vue 就没有这么多狗屁倒灶的事. 状态治理生态的病态凋敝让整个 React 生态变得凌乱. 不同状态治理库之间潜在的集成老本, 以及围绕这些状态治理打造的组件库又须要思考集成. 看看 Route5 吧, 我感觉官网的 React 和 Redux 集成计划基本不够. 毕竟还有好几个库在那等着呢... ...

React.forwardRef是什么？它有什么作用？React.forwardRef 会创立一个React组件，这个组件可能将其承受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特地有用： 转发 refs 到 DOM 组件在高阶组件中转发 refs跨级组件的通信形式？父组件向子组件的子组件通信，向更深层子组件通信： 应用props，利用两头组件层层传递,然而如果父组件构造较深，那么两头每一层组件都要去传递props，减少了复杂度，并且这些props并不是两头组件本人须要的。应用context，context相当于一个大容器，能够把要通信的内容放在这个容器中，这样不论嵌套多深，都能够随便取用，对于逾越多层的全局数据能够应用context实现。// context形式实现跨级组件通信 // Context 设计目标是为了共享那些对于一个组件树而言是“全局”的数据const BatteryContext = createContext();// 子组件的子组件 class GrandChild extends Component { render(){ return ( <BatteryContext.Consumer> { color => <h1 style={{"color":color}}>我是红色的:{color}</h1> } </BatteryContext.Consumer> ) }}// 子组件const Child = () =>{ return ( <GrandChild/> )}// 父组件class Parent extends Component { state = { color:"red" } render(){ const {color} = this.state return ( <BatteryContext.Provider value={color}> <Child></Child> </BatteryContext.Provider> ) }}如果用索引值作为key 会呈现什么样的问题若对数据进行逆序增加，逆序删除等毁坏程序的操作 ...

前言最近始终在学习对于React方面的常识，并有幸正好失去一个机会将其用在了理论的我的项目中。所以我打算以博客的模式，将我在学习和开发（React）过程中遇到的问题记录下来。 这两天遇到了对于组件不必要的反复渲染问题，看了很多遍官网文档以及网上各位大大们的介绍，上面我会通过一些demo联合本人的了解进行汇总，并以此作为学习React的第一篇笔记（本人学习，什么都好，就是费头发...）。 本文次要介绍以下三种优化形式（三种形式有着类似的实现原理）： shouldComponentUpdateReact.PureComponentReact.memo其中shouldComponentUpdate和React.PureComponent是类组件中的优化形式，而React.memo是函数组件中的优化形式。 引出问题新建Parent类组件。import React, { Component } from 'react'import Child from './Child'class Parent extends Component { constructor(props) { super(props) this.state = { parentInfo: 'parent', sonInfo: 'son' } this.changeParentInfo = this.changeParentInfo.bind(this) } changeParentInfo() { this.setState({ parentInfo: `扭转了父组件state：${Date.now()}` }) } render() { console.log('Parent Component render') return ( <div> <p>{this.state.parentInfo}</p> <button onClick={this.changeParentInfo}>扭转父组件state</button> <br/> <Child son={this.state.sonInfo}></Child> </div> ) }}export default Parent新建Child类组件。import React, {Component} from 'react'class Child extends Component { constructor(props) { super(props) this.state = {} } render() { console.log('Child Component render') return ( <div> 这里是child子组件： <p>{this.props.son}</p> </div> ) }}export default Child关上控制台，咱们能够看到控制台中先后输入了Parent Component render和Child Component render。 点击按钮，咱们会发现又输入了一遍Parent Component render和Child Component render。 点击按钮时咱们只扭转了父组件Parentstate中的parentInfo的值，Parent更新的同时子组件Child也进行了从新渲染，这必定是咱们不违心看到的。所以上面咱们就围绕这个问题介绍本文的次要内容。shouldComponentUpdateReact提供了生命周期函数shouldComponentUpdate()，依据它的返回值（true | false），判断 React 组件的输入是否受以后 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会从新渲染（这也就阐明了下面Child组件从新渲染的起因）。 ...

大家好，我是杨胜利。 之前介绍过 WebRTC，简略来说它是一个点对点的实时通信技术，次要基于浏览器来实现音视频通信。这项技术目前曾经被广泛应用于实时视频通话，多人会议等场景。 不过 WebRTC 因为其过于优良的体现，其利用范畴曾经不限于 Web 端，挪动 App 也根本实现了 WebRTC 的 API。在跨平台框架中，Flutter 和 React Native 都实现了对 WebRTC 的反对。 咱们以 App（React Native）为呼叫端，Web（React）为接收端，别离介绍两端如何进行视频通话。 接收端 React 实现React 运行在浏览器中，无需援用任何模块，能够间接应用 WebRTC API。上面分几个步骤，逐渐介绍在 Web 端如何获取、发送、承受近程视频流。 1. 获取本地摄像头流，并保留。 const stream = null;const getMedia = async () => { let ori_stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true, }); stream = ori_stream;};2. 创立 video 标签用于播放视频。 创立两个 video 标签，别离用于播放本地视频和近程视频。 const local_video = useRef();const remote_video = useRef();const Player = () => { return ( <div> <video ref={local_video} autoPlay muted />; <video ref={remote_video} autoPlay muted />; </div> );};// stream 是上一步获取的本地视频流if (local_video.current) { local_video.current.srcObject = stream;}3. 创立 RTC 连贯实例。 ...

因为之前的我的项目始终应用的是V5版本，最新新建我的项目的时候，默认应用的是V6版本，依据官网的介绍，V6版本的新个性如下。 新个性<Switch>重命名为<Routes>；<Route>的新个性变更；嵌套路由变得更简略；新钩子useRoutes代替react-router-config；用useNavigate代替useHistory；Link不再反对component 属性；NavLink的exact属性替换为end大小缩小：从20kb到8kb<Switch>重命名为<Routes>在V6版本中，<Switch>组件被替换成<Routes>组件，同时，component属性被element属性替换。 /* v5 */<Switch> <Route exact path="/" component={Home} /> <Route path="/user/:id" render={(routeProps) => <User id={routeProps.match.params.id} />} /></Switch>/* V6 */<Routes> <Route path="/" element={<Home />} /> <Route path="user/:id" element={<User id={id} />} /></Routes>同时，<Route>组件还批改了如下一些内容： 废除exactcomponent/render被element代替routeProps能够在element中间接获取简化的门路匹配，仅反对动静:id款式参数和*通配符，不再反对RegExp反对嵌套路由在V6版本中， <Route>标签反对嵌套，能够在一个文件内配置嵌套路由，便于对立治理路由。 import { HashRouter as Router, Routes, Route } from 'react-router-dom'import Home from '@/pages/demo/Home'import Foo from '@/pages/demo/Foo'import Bar from '@/pages/demo/Bar'import BarDetail from '@/pages/demo/BarDetail'import '@/assets/style/App.css'function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="foo" element={<Foo />} /> {/* 嵌套路由场景：须要在Bar（父路由的组件）申明Outlet组件，用于渲染子路由 */} <Route path="bar" element={<Bar />}> <Route path=":id" element={<BarDetail />} /> </Route> </Routes> </Router> )}export default AppOutlet在嵌套路由场景，咱们须要在父路由中应用Outlet组件，用于渲染子路由。 ...

总览当咱们把多个子元素传递给一个只冀望有一个React子元素的组件时，会产生"React.Children.only expected to receive single React element child"谬误。为了解决该谬误，将所有元素包装在一个React片段或一个关闭div中。 这里有个示例来展现谬误是如何产生的。 // App.jsimport React from 'react';function Button(props) { // ️ expects single child element return React.Children.only(props.children);}export default function App() { return ( <Button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> </Button> );}Button元素冀望传递单个子元素，但咱们在同级下传递了2个子元素。 React片段咱们能够应用React片段来解决该谬误。 import React from 'react';function Button(props) { // ️ expects single child element return React.Children.only(props.children);}export default function App() { return ( <Button> <> <button onClick={() => { console.log('Button clicked'); }} > Click </button> <button onClick={() => { console.log('Button clicked'); }} > Click </button> </> </Button> );}当咱们须要对子节点列表进行分组，而不须要向DOM增加额定的节点时，就会应用Fragments。 ...

vue 或者react 优化整体优化虚构dom为什么虚构 dom 会进步性能?(必考) 虚构 dom 相当于在 js 和实在 dom 两头加了一个缓存，利用 dom diff 算法防止了没有必要的 dom 操作，从而进步性能。 用 JavaScript 对象构造示意 DOM 树的构造；而后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，从新结构一棵新的对象树。而后用新的树和旧的树进行比拟，记录两棵树差别把 2 所记录的差别利用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。 React如何获取组件对应的DOM元素？能够用ref来获取某个子节点的实例，而后通过以后class组件实例的一些特定属性来间接获取子节点实例。ref有三种实现办法: 字符串格局：字符串格局，这是React16版本之前用得最多的，例如：<p ref="info">span</p>函数格局：ref对应一个办法，该办法有一个参数，也就是对应的节点实例，例如：<p ref={ele => this.info = ele}></p>createRef办法：React 16提供的一个API，应用React.createRef()来实现 React 废除了哪些生命周期？为什么？被废除的三个函数都是在render之前，因为fber的呈现，很可能因为高优先级工作的呈现而打断现有工作导致它们会被执行屡次。另外的一个起因则是，React想束缚使用者，好的框架可能让人不得已写出容易保护和扩大的代码，这一点又是从何谈起，能够从新减少以及行将废除的生命周期剖析动手 1) componentWillMount 首先这个函数的性能齐全能够应用componentDidMount和 constructor来代替，异步获取的数据的状况下面曾经阐明了，而如果抛去异步获取数据，其余的即是初始化而已，这些性能都能够在constructor中执行，除此之外，如果在 willMount 中订阅事件，但在服务端这并不会执行 willUnMount事件，也就是说服务端会导致内存透露所以componentWilIMount齐全能够不应用，但使用者有时候不免因为各 种各样的状况在 componentWilMount中做一些操作，那么React为了束缚开发者，罗唆就抛掉了这个API 2) componentWillReceiveProps 在老版本的 React 中，如果组件本身的某个 state 跟其 props 密切相关的话，始终都没有一种很优雅的解决形式去更新 state，而是须要在 componentWilReceiveProps 中判断前后两个 props 是否雷同，如果不同再将新的 props更新到相应的 state 下来。这样做一来会毁坏 state 数据的繁多数据源，导致组件状态变得不可预测，另一方面也会减少组件的重绘次数。相似的业务需要也有很多，如一个能够横向滑动的列表，以后高亮的 Tab 显然隶属于列表本身的时，依据传入的某个值，间接定位到某个 Tab。为了解决这些问题，React引入了第一个新的生命周期：getDerivedStateFromProps。它有以下的长处∶ ...

先来思考一个陈词滥调的问题，setState是同步还是异步? 再深刻思考一下，useState是同步还是异步呢？ 咱们来写几个 demo 试验一下。 先看 useState同步和异步状况下，间断执行两个 useState 示例function Component() { const [a, setA] = useState(1) const [b, setB] = useState('b') console.log('render') function handleClickWithPromise() { Promise.resolve().then(() => { setA((a) => a + 1) setB('bb') }) } function handleClickWithoutPromise() { setA((a) => a + 1) setB('bb') } return ( <Fragment> <button onClick={handleClickWithPromise}> {a}-{b} 异步执行 </button> <button onClick={handleClickWithoutPromise}> {a}-{b} 同步执行 </button> </Fragment> )}论断： 当点击同步执行按钮时，只从新 render 了一次当点击异步执行按钮时，render 了两次同步和异步状况下，间断执行两次同一个 useState 示例function Component() { const [a, setA] = useState(1) console.log('a', a) function handleClickWithPromise() { Promise.resolve().then(() => { setA((a) => a + 1) setA((a) => a + 1) }) } function handleClickWithoutPromise() { setA((a) => a + 1) setA((a) => a + 1) } return ( <Fragment> <button onClick={handleClickWithPromise}>{a} 异步执行</button> <button onClick={handleClickWithoutPromise}>{a} 同步执行</button> </Fragment> )}当点击同步执行按钮时，两次 setA 都执行，但合并 render 了一次，打印 3当点击异步执行按钮时，两次 setA 各自 render 一次，别离打印 2，3再看 setState同步和异步状况下，间断执行两个 setState 示例class Component extends React.Component { constructor(props) { super(props) this.state = { a: 1, b: 'b', } } handleClickWithPromise = () => { Promise.resolve().then(() => { this.setState({...this.state, a: 'aa'}) this.setState({...this.state, b: 'bb'}) }) } handleClickWithoutPromise = () => { this.setState({...this.state, a: 'aa'}) this.setState({...this.state, b: 'bb'}) } render() { console.log('render') return ( <Fragment> <button onClick={this.handleClickWithPromise}>异步执行</button> <button onClick={this.handleClickWithoutPromise}>同步执行</button> </Fragment> ) }}当点击同步执行按钮时，只从新 render 了一次当点击异步执行按钮时，render 了两次参考 前端进阶面试题具体解答 ...

前言：最近接触到一种新的（对我集体而言）状态治理形式，它没有采纳现有的开源库，如redux、mobx等，也没有应用传统的useContext，而是用useState + useEffect写了一个公布订阅者模式进行状态治理，这一点对我来说感觉比拟离奇，以前从没接触过这种写法，于是决定钻研一下目前比拟罕用的状态治理形式。 ps：这里谈到的状态治理是指全局状态治理，部分的应用useState即可 状态治理形式目前比拟罕用的状态治理形式有hooks、redux、mobx三种，上面我将具体介绍一下这三类的应用办法以及剖析各自的优缺点，以供各位进行参考。 Hooks状态治理用hooks进行状态治理次要有两种形式： useContext+useReduceruseState+useEffectuseContext+useReducer应用办法1.创立store和reducer以及全局contextsrc/store/reducer.ts import React from "react";// 初始状态export const state = { count: 0, name: "ry",};// reducer 用于批改状态export const reducer = (state, action) => { const { type, payload } = action; switch (type) { case "ModifyCount": return { ...state, count: payload, }; case "ModifyName": return { ...state, name: payload, }; default: { return state; } }};export const GlobalContext = React.createContext(null);2.根组件通过 Provider 注入 contextsrc/App.tsx ...

前言：最近接触到一种新的（对我集体而言）状态治理形式，它没有采纳现有的开源库，如redux、mobx等，也没有应用传统的useContext，而是用useState + useEffect写了一个公布订阅者模式进行状态治理，这一点对我来说感觉比拟离奇，以前从没接触过这种写法，于是决定钻研一下目前比拟罕用的状态治理形式。 ps：这里谈到的状态治理是指全局状态治理，部分的应用useState即可 状态治理形式目前比拟罕用的状态治理形式有hooks、redux、mobx三种，上面我将具体介绍一下这三类的应用办法以及剖析各自的优缺点，以供各位进行参考。 Hooks状态治理用hooks进行状态治理次要有两种形式： useContext+useReduceruseState+useEffectuseContext+useReducer应用办法1.创立store和reducer以及全局contextsrc/store/reducer.ts import React from "react";// 初始状态export const state = { count: 0, name: "ry",};// reducer 用于批改状态export const reducer = (state, action) => { const { type, payload } = action; switch (type) { case "ModifyCount": return { ...state, count: payload, }; case "ModifyName": return { ...state, name: payload, }; default: { return state; } }};export const GlobalContext = React.createContext(null);2.根组件通过 Provider 注入 contextsrc/App.tsx ...

hello，这里是潇晨，大家在面试的过程中有没有遇到过一些和react相干的问题呢，比方面试官让你说说react渲染的过程，这到题目比拟凋谢，也比拟考验大家对react渲染原理以及源码的整体架构的了解。 整体流程： react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上那这些模块是怎么配合工作的呢：首先jsx通过babel的ast词法解析之后编程React.createElement，React.createElement函数执行之后就是jsx对象，也被称为virtual-dom。不论是在首次渲染还是更新状态的时候，这些渲染的工作都会通过Scheduler的调度，Scheduler会依据工作的优先级来决定将哪些工作优先进入render阶段，比方用户触发的更新优先级十分高，如果以后正在进行一个比拟耗时的工作，则这个工作就会被用户触发的更新打断，在Scheduler中初始化工作的时候会计算一个过期工夫，不同类型的工作过期工夫不同，优先级越高的工作，过期工夫越短，优先级越低的工作，过期工夫越长。在最新的Lane模型中，则能够更加细粒度的依据二进制1的地位，来决定工作的优先级，通过二进制的交融和相交，判断工作的优先级是否足够在此次render的渲染。Scheduler会调配一个工夫片给须要渲染的工作，如果是一个十分耗时的工作，如果在一个工夫片之内没有执行实现，则会从以后渲染到的Fiber节点暂停计算，让出执行权给浏览器，在之后浏览器闲暇的时候从之前暂停的那个Fiber节点持续前面的计算，这个计算的过程就是计算Fiber的差别，并标记副作用。具体可浏览往期课件和视频解说，往期文章在底部。在render阶段：render阶段的配角是Reconciler，在mount阶段和update阶段，它会比拟jsx和以后Fiber节点的差别（diff算法指的就是这个比拟的过程），将带有副作用的Fiber节点标记进去，这些副作用有Placement（插入）、Update（更新）、Deletetion（删除）等，而这些带有副作用Fiber节点会退出一条EffectList中，在commit阶段就会遍历这条EffectList，解决相应的副作用，并且利用到实在节点上。而Scheduler和Reconciler都是在内存中工作的，所以他们不影响最初的出现。在commit阶段：会遍历EffectList，解决相应的生命周期，将这些副作用利用到实在节点，这个过程会对应不同的渲染器，在浏览器的环境中就是react-dom，在canvas或者svg中就是reac-art等。 另外咱们也能够从首次渲染和更新的时候看在render和commit这两个子阶段是如果工作的： mount时： 在render阶段会依据jsx对象构建新的workInProgressFiber树，不太理解Fiber双缓存的能够查看往期文章 Fiber架构，而后将相应的fiber节点标记为Placement，示意这个fiber节点须要被插入到dom树中，而后会这些带有副作用的fiber节点退出一条叫做Effect List的链表中。在commit阶段会遍历render阶段造成的Effect List，执行链表上相应fiber节点的副作用，比方Placement插入，或者执行Passive（useEffect的副作用）。将这些副作用利用到实在节点上相干参考视频解说：进入学习 update时： 在render阶段会依据最新状态的jsx对象比照current Fiber，再构建新的workInProgressFiber树，这个比照的过程就是diff算法，diff算法又分成单节点的比照和多节点的比照，不太分明的同学参见之前的文章 diff算法 ，比照的过程中同样会经验收集副作用的过程，也就是将比照进去的差别标记进去，退出Effect List中，这些比照进去的副作用例如：Placement（插入）、Update(更新)、Deletion（删除）等。在commit阶段同样会遍历Effect List，将这些fiber节点上的副作用利用到实在节点上

hello，这里是潇晨，明天咱们来看下react生命周期在各个阶段是怎么执行的，在面试的过程中有没有遇到这个问题呢，大家也能够学习往期react源码体系文章哦，往期文章目录在文章结尾。 在之前的react源码介绍中，咱们能够将利用的渲染过程分为mount阶段（利用首次渲染）和update阶段（利用状态更新），无论在mount阶段还是update阶段，都会经验两个子阶段，一个是render阶段，一个是commit阶段。 mount时： 在render阶段会依据jsx对象构建新的workInProgressFiber树，不太理解Fiber双缓存的能够查看往期文章 Fiber架构，而后将相应的fiber节点标记为Placement，示意这个fiber节点须要被插入到dom树中，而后会这些带有副作用的fiber节点退出一条叫做Effect List的链表中。在commit阶段会遍历render阶段造成的Effect List，执行链表上相应fiber节点的副作用，比方Placement插入，或者执行Passive（useEffect的副作用）。将这些副作用利用到实在节点上update时： 在render阶段会依据最新状态的jsx对象比照current Fiber，再构建新的workInProgressFiber树，这个比照的过程就是diff算法，diff算法又分成单节点的比照和多节点的比照，不太分明的同学参见之前的文章 diff算法 ，比照的过程中同样会经验收集副作用的过程，也就是将比照进去的差别标记进去，退出Effect List中，这些比照进去的副作用例如：Placement（插入）、Update(更新)、Deletion（删除）等。在commit阶段同样会遍历Effect List，将这些fiber节点上的副作用利用到实在节点上为什么要先讲render在mount和update阶段的整体流程呢，这是因为react生命周期就是穿插在这些子阶段中执行的，来看一张图 render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMount相干参考视频解说：进入学习 update时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate

解释 React 中 render() 的目标。每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的示意。如果须要渲染多个 HTML 元素，则必须将它们组合在一个关闭标记内，例如 <form>、<group>、<div> 等。此函数必须放弃污浊，即必须每次调用时都返回雷同的后果。 createElement过程React.createElement()： 依据指定的第一个参数创立一个React元素React.createElement( type, [props], [...children])第一个参数是必填，传入的是似HTML标签名称，eg: ul, li第二个参数是选填，示意的是属性，eg: className第三个参数是选填, 子节点，eg: 要显示的文本内容//写法一：var child1 = React.createElement('li', null, 'one'); var child2 = React.createElement('li', null, 'two'); var content = React.createElement('ul', { className: 'teststyle' }, child1, child2); // 第三个参数能够离开也能够写成一个数组 ReactDOM.render( content, document.getElementById('example') );//写法二：var child1 = React.createElement('li', null, 'one'); var child2 = React.createElement('li', null, 'two'); var content = React.createElement('ul', { className: 'teststyle' }, [child1, child2]); ReactDOM.render( content, document.getElementById('example') );组件之间传值父组件给子组件传值 ...

第一次发文章 not only（尽管）版式可能有点烂 but also （然而）最初赋有手稿钻研 finally看完他你有播种 diff算法：对于update的组件，他会将以后组件与该组件在上次更新是对应的Fiber节点比拟，将比拟的后果生成新的Fiber节点。 ! 为了避免概念混同，强调 一个DOM节点，在某一时刻最多会有4个节点和他相干。- 1.current Fiber。如果该DOM节点已在页面中，current Fiber代表该DOM节点对应的Fiber节点。- 2.workInProgress Fiber。如果该DOM节点将在本次更新中渲染到页面中，workInProgress Fiber代表该DOM节点对应的Fiber节点。- 3.DOM节点自身。- 4.JSX对象。即ClassComponent的render办法的返回后果，或者FunctionComponent的调用后果，JSX对象中蕴含形容DOM节点信息。diff算法的实质上是比照1和4，生成2。Diff的瓶颈以及React如何应答因为diff操作自身也会带来性能损耗，React文档中提到，即便在最前沿的算法中将前后两棵树齐全比对的算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量。如果在React中应用了该算法，那么展现1000个元素所须要执行的计算量将在十亿的量级范畴。这个开销切实是太过昂扬。所以为了升高算法复杂度，React的diff会预设3个限度： 1.同级元素进行Diff。如果一个DOM节点在前后两次更新中逾越了层级，那么React不会尝试复用他。 2.不同类型的元素会产生出不同的树。如果元素由div变为p，React会销毁div及其子孙节点，并新建p及其子孙节点。 3.者能够通过 key prop来暗示哪些子元素在不同的渲染下能保持稳定。那么咱们接下来看一下Diff是如何实现的 咱们能够从同级的节点数量将Diff分为两类： 1.当newChild类型为object、number、string，代表同级只有一个节点- 2.当newChild类型为Array，同级有多个节点单节点diff以类型Object为例，会进入这个函数reconcileSingleElement 这个函数会做如下事件： 让咱们看看第二步判断DOM节点是否能够复用是如何实现的。参考 前端进阶面试题具体解答 从代码能够看出，React通过先判断key是否雷同，如果key雷同则判断type是否雷同，只有都雷同时一个DOM节点能力复用。 这里有个细节须要关注下： 1.当child !== null且key雷同且type不同时执行deleteRemainingChildren将child及其兄弟fiber都标记删除。2.当child !== null且key不同时仅将child标记删除。例子：以后页面有3个li，咱们要全副删除，再插入一个p。 因为本次更新时只有一个p，属于繁多节点的Diff，会走下面介绍的代码逻辑。 解释：在reconcileSingleElement中遍历之前的3个fiber（对应的DOM为3个li），寻找本次更新的p是否能够复用之前的3个fiber中某个的DOM。当key雷同且type不同时，代表咱们曾经找到本次更新的p对应的上次的fiber，然而 p 与 li 的type不同，不能复用。既然惟一的可能性曾经不能复用，则剩下的fiber都没有机会了，所以都须要标记删除。当key不同时只代表遍历到的该fiber不能被p复用，前面还有兄弟fiber还没有遍历到。所以仅仅标记该fiber删除。练习题： 习题1: 未设置key prop默认 key = null;，所以更新前后key雷同，都为null，然而更新前type为div，更新后为p，type扭转则不能复用。习题2: 更新前后key扭转，不须要再判断type，不能复用。习题3: 更新前后key没变，然而type扭转，不能复用。习题4: 更新前后key与type都未扭转，能够复用。children变动，DOM的子元素须要更新。多节点diff同级多个节点的Diff，肯定属于上面3中状况的一种或多种。 状况1：节点更新 状况2：节点新增或缩小 状况3：节点地位变动 留神在这里diff算法无奈应用双指针优化在咱们做数组相干的算法题时，常常应用双指针从数组头和尾同时遍历以提高效率，然而这里却不行。尽管本次更新的JSX对象 newChildren为数组模式，然而和newChildren中每个组件进行比拟的是current fiber同级的Fiber节点是由sibling指针链接造成的单链表。即 newChildren[0]与fiber比拟，newChildren[1]与fiber.sibling比拟。所以无奈应用双指针优化。基于以上起因，Diff算法的整体逻辑会经验两轮遍历： 1.第一轮遍历：解决更新的节点。2.第二轮遍历：解决剩下的不属于更新的节点第一轮遍历： 第一轮遍历步骤如下： let i = 0，遍历newChildren，将newChildren[i]与oldFiber比拟，判断DOM节点是否可复用。如果可复用，i++，持续比拟newChildren[i]与oldFiber.sibling，能够复用则持续遍历。如果不可复用，立刻跳出整个遍历，第一轮遍历完结。如果newChildren遍历完（即i === newChildren.length - 1）或者oldFiber遍历完（即oldFiber.sibling === null）跳出遍历，第一轮遍历完结。下面3跳出的遍历此时newChildren没有遍历完，oldFiber也没有遍历完。上例子：前2个节点可复用，遍历到key === 2的节点发现type扭转，不可复用，跳出遍历。此时oldFiber剩下key === 2未遍历，newChildren剩下key === 2、key === 3未遍历。下面4跳出的遍历可能newChildren遍历完，或oldFiber遍历完，或他们同时遍历完。上例子： ...

redux有什么毛病一个组件所须要的数据，必须由父组件传过来，而不能像flux中间接从store取。当一个组件相干数据更新时，即便父组件不须要用到这个组件，父组件还是会从新render，可能会有效率影响，或者须要写简单的shouldComponentUpdate进行判断。React-Router的路由有几种模式？React-Router 反对应用 hash（对应 HashRouter）和 browser（对应 BrowserRouter） 两种路由规定， react-router-dom 提供了 BrowserRouter 和 HashRouter 两个组件来实现利用的 UI 和 URL 同步： BrowserRouter 创立的 URL 格局：xxx.com/pathHashRouter 创立的 URL 格局：xxx.com/#/path（1）BrowserRouter 它应用 HTML5 提供的 history API（pushState、replaceState 和 popstate 事件）来放弃 UI 和 URL 的同步。由此能够看出，BrowserRouter 是应用 HTML 5 的 history API 来管制路由跳转的： <BrowserRouter basename={string} forceRefresh={bool} getUserConfirmation={func} keyLength={number}/>其中的属性如下： basename 所有路由的基准 URL。basename 的正确格局是后面有一个前导斜杠，但不能有尾部斜杠；<BrowserRouter basename="/calendar"> <Link to="/today" /></BrowserRouter>等同于 <a href="/calendar/today" />forceRefresh 如果为 true，在导航的过程中整个页面将会刷新。个别状况下，只有在不反对 HTML5 history API 的浏览器中应用此性能；getUserConfirmation 用于确认导航的函数，默认应用 window.confirm。例如，当从 /a 导航至 /b 时，会应用默认的 confirm 函数弹出一个提醒，用户点击确定后才进行导航，否则不做任何解决；// 这是默认的确认函数const getConfirmation = (message, callback) => { const allowTransition = window.confirm(message); callback(allowTransition);}<BrowserRouter getUserConfirmation={getConfirmation} />须要配合<Prompt> 一起应用。KeyLength 用来设置 Location.Key 的长度。（2）HashRouter ...

前言不晓得大家有没有过这个疑难，React 中 setState() 为什么是异步的？我一度认为 setState() 是同步的，晓得它是异步的之后很是困惑，甚至期待 React 能出一个 setStateSync() 之类的 API。同样有此疑难的还有 MobX 的作者 Michel Weststrate，他认为常常听到的答案都很容易反驳，并认为这可能是一个历史包袱，所以开了一个 issue 询问真正的起因。最终这个 issue 失去了 React 核心成员 Dan Abramov 的回复，Dan 的回复表明这不是一个历史包袱，而是一个通过三思而行的设计。 留神：这篇文章依据 Dan 的回复写成，但不是一篇翻译。我疏忽了很多不太重要的内容，Dan 的残缺回复请看这里。 注释Dan 在回复中示意为什么 setState() 是异步的，这并没有一个显著的答案（obvious answer），每种计划都有它的衡量。然而 React 的设计有以下几点考量： 一、保障外部的一致性首先，我想咱们都批准推延并批量解决重渲染是无益而且对性能优化很重要的，无论 setState() 是同步的还是异步的。那么就算让 state 同步更新，props 也不行，因为当父组件重渲染（re-render ）了你才晓得 props。 当初的设计保障了 React 提供的 objects（state，props，refs）的行为和体现都是统一的。为什么这很重要？Dan 举了个栗子： 假如 state 是同步更新的，那么上面的代码是能够按预期工作的： console.log(this.state.value) // 0this.setState({ value: this.state.value + 1 });console.log(this.state.value) // 1this.setState({ value: this.state.value + 1 });console.log(this.state.value) // 2然而，这时你须要将状态晋升到父组件，以供多个兄弟组件共享： ...

大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会答复useEffect是异步的，useLayoutEffect是同步的，这样答复面试官真的会称心慢，咱们须要说分明他们在源码中的调用机会。 先来看个例子：点击触发更新之后，如果count之前的状态是0，咱们随机生成一个数字，在阻塞一段时间，在设置count位随机值，看看在useEffect和useLayoutEffect这两种状况下会有什么不同 import React, { useLayoutEffect, useState, useEffect } from "react";export default function App() { const [count, setCount] = useState(0); //用 useLayoutEffect 试试 useEffect(() => { if (count === 0) { const randomNum = Math.random() * 100;//随机生成一个数字 const now = performance.now(); while (performance.now() - now < 100) {//阻塞一段时间 console.log('blocking...'); } setCount(randomNum);//从新设置状态，设置成随机数 } }, [count]); return <div onClick={() => setCount(0)}>{count}</div>;}//在useEffect的状况下，一直点击触发更新，偶然会显示0//在useLayoutEffect的状况下，一直点击触发更新，不会偶现0在源码中不论首次渲染还是更新的时候都会经验一个阶段叫commit阶段，这个阶段次要的工作就是解决一些钩子函数、生命周期、遍历render阶段造成的EffectList链表，将带有副作用的Fiber节点利用到实在节点上，如果对render阶段不理解能够参阅往期文章 render阶段 ，上面这张图是commit阶段源码的结构图，咱们具体的解说一下。 在commitRootImpl的函数中次要分三个局部： commit阶段前置工作mutation阶段 调用commitBeforeMutationEffects，scheduleCallback调度执行flushPassiveEffects调用commitMutationEffects，解决相干的副作用，操作实在节点useLayoutEffect的销毁函数在这个函数中执行调用commitLayoutEffects，调用commitLayoutEffects的回调函数，这个时候副作用曾经利用到实在节点了，所以能拿到最新的节点。在commit阶段完结之后flushPassiveEffects执行useEffect的销毁函数和回调函数。commit阶段收尾工作所以useLayout/componentDidMount和useEffect的区别是什么？ 答：他们在commit阶段不同机会执行，useEffect在commit阶段结尾异步调用，useLayout/componentDidMount同步调用 相干参考视频解说：进入学习

hello，这里是潇晨，明天咱们来聊一聊Fiber。不晓得大家面试的时候有没有遇到过和react Fiber相干的问题呢，这一类问题比拟凋谢，但也是考查对react源码了解深度的问题，如果面试高级前端岗，凑巧你平时用的是react，那这道面试题是你必须要会的一道。 大型利用为什么会慢那之前的利用为什么会慢呢，传统的前端利用例如js原生或者jquery利用，在构建简单的大型利用的时候，各种页面之前的互相操作和更新很有可能会引起页面的重绘或重排列，而频繁操作这些dom其实是十分耗费性能的 在看下图，这是一个节点上的属性，能够看到一个节点上的属性是十分多的，在简单利用中，操作这些属性的时候可能一不小心就会引起节点大量的更新，那如何进步利用的性能呢？ const div = document.createElement('div');let str = ''for(let k in div){ str+=','+k}console.log(str) 为什么会呈现Fiberreact从15版本开始，到当初的17，以及快进去的18，外部经验了十分大的变动，这一切都是围绕着一个指标进行的，这个指标是异步可中断的更新，而这个目标的最终后果是为了构建疾速响应的利用。 简单利用在更新的时候可能会更新大量的dom，所以react在应用层和dom层之间减少了一层Fiber，而Fiber是在内存中工作的，所以在更新的时候只须要在内存中进行dom更新的比拟，最初再利用到须要更新实在节点上 这就引出了一个比照新老节点的过程，而比照两棵树的计算其实是十分耗费性能的，react提出了diff算法来升高比照的复杂度，具体diff的过程能够参考往期文章 diff算法 然而面对越来越简单的利用，diff算法耗费的工夫片还是很长，在没做出优化的状况下，react在进行Fiber的比照和更新节点上的状态的时候仍然力不从心， 在react15之前，这个比照的过程被称之为stack reconcile，它的比照形式是‘一条路走到黑’，也就是说这个比照的过程是不能被中断的，这会呈现什么状况呢，比方在页面渲染一个比拟耗费性能操作，如果这个时候如果用户进行一些操作就会呈现卡顿，利用就会显得不晦涩。react16之后呈现了scheduler，以及react17的Lane模型，它们能够配合着工作，将比拟耗时的工作依照Fiber节点划分成工作单元，并且遍历Fiber树计算或者更新节点上的状态能够被中断、持续，以及能够被高优先级的工作打断，比方用户触发的更新就是一个高优先级的工作，高优先级的工作优先执行，利用就不会太卡顿。什么是Fiber这就是react所要做的事件了，react翻新的提出了jsx，申明式地形容页面出现的成果，jsx会被babel通过ast解析成React.createElement，而React.createElement函数执行之后就是jsx对象或者说是virtual-dom 在mount的时候，也就是首次渲染的时候，render阶段会依据jsx对象生成新的Fiber节点，而后这些Fiber节点会被标记成带有‘Placement’的副作用，阐明它们是新增的节点，须要被插入到实在节点中，在commit阶段就会操作实在节点，将它们插入到dom树中。在update的时候，也就是利用触发更新的时候，render阶段会依据最新的jsx和老的Fiber进行比照，生成新的Fiber，这些Fiber会带有各种副作用，比方‘Deletion’、‘Update’、‘Placement’等，这一个比照的过程就是diff算法 ，在commit阶段会操作实在节点，执行相应的副作用。如果对render阶段和commit阶段不理解的能够查看往期文章 8.render阶段 10.commit阶段 Fiber有比拟多的含意，他能够从以下几个角度了解： 工作单元 工作合成 ：Fiber最重要的性能就是作为工作单元，保留原生节点或者组件节点对应信息（包含优先级），这些节点通过指针的形似造成Fiber树增量渲染：通过jsx对象和current Fiber的比照，生成最小的差别补丁，利用到实在节点上依据优先级暂停、持续、排列优先级：Fiber节点上保留了优先级，能通过不同节点优先级的比照，达到工作的暂停、持续、排列优先级等能力，也为下层实现批量更新、Suspense提供了根底保留状态：因为Fiber能保留状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooksFiber的数据结构Fiber的自带的属性如下： //ReactFiber.old.jsfunction FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) { //作为动态的数据结构 保留节点的信息 this.tag = tag;//对应组件的类型 this.key = key;//key属性 this.elementType = null;//元素类型 this.type = null;//func或者class this.stateNode = null;//实在dom节点 //作为fiber数架构 连接成fiber树 this.return = null;//指向父节点 this.child = null;//指向child this.sibling = null;//指向兄弟节点 this.index = 0; this.ref = null; //用作为工作单元 来计算state this.pendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; //effect相干 this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; //优先级相干的属性 this.lanes = NoLanes; this.childLanes = NoLanes; //current和workInProgress的指针 this.alternate = null;}Fiber是怎么工作的当初咱们晓得了Fiber能够保留实在的dom，实在dom对应在内存中的Fiber节点会造成Fiber树，这颗Fiber树在react中叫current Fiber，也就是以后dom树对应的Fiber树，而正在构建Fiber树叫workInProgress Fiber，这两颗树的节点通过alternate相连. ...

总览产生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"谬误有多个起因： 在导入组件时，将默认导入和命名导入混同。遗记从文件中导出组件。不正确地定义了一个React组件，例如，作为一个变量而不是一个函数或类。 为了解决该谬误，确保应用大括号来导入命名导出而不是默认导出，并且只应用函数或类作为组件。 这里有个示例来展现谬误是如何产生的。 // ️ must be function or class (NOT variable)const Button = <button>Click</button>;export default function App() { // ⛔️ Warning: React.jsx: type is invalid -- expected a string // (for built-in components) or a class/function // (for composite components) but got: return ( <div> <Button /> <h1>hello world</h1> </div> );}上述代码问题在于，咱们申明了Button变量，该变量返回了JSX代码。 ...

解释 React 中 render() 的目标。每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的示意。如果须要渲染多个 HTML 元素，则必须将它们组合在一个关闭标记内，例如 <form>、<group>、<div> 等。此函数必须放弃污浊，即必须每次调用时都返回雷同的后果。 constructor答案是：在 constructor 函数外面，须要用到props的值的时候，就须要调用 super(props)class语法糖默认会帮你定义一个constructor，所以当你不须要应用constructor的时候，是能够不必本人定义的当你本人定义一个constructor的时候，就肯定要写super()，否则拿不到this当你在constructor外面想要应用props的值，就须要传入props这个参数给super，调用super(props)，否则只须要写super()react 的渲染过程中，兄弟节点之间是怎么解决的？也就是key值不一样的时候通常咱们输入节点的时候都是map一个数组而后返回一个ReactNode，为了不便react外部进行优化，咱们必须给每一个reactNode增加key，这个key prop在设计值处不是给开发者用的，而是给react用的，大略的作用就是给每一个reactNode增加一个身份标识，不便react进行辨认，在重渲染过程中，如果key一样，若组件属性有所变动，则react只更新组件对应的属性；没有变动则不更新，如果key不一样，则react先销毁该组件，而后从新创立该组件React组件的构造函数有什么作用？它是必须的吗？构造函数次要用于两个目标： 通过将对象调配给this.state来初始化本地状态将事件处理程序办法绑定到实例上所以，当在React class中须要设置state的初始值或者绑定事件时，须要加上构造函数，官网Demo： class LikeButton extends React.Component { constructor() { super(); this.state = { liked: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({liked: !this.state.liked}); } render() { const text = this.state.liked ? 'liked' : 'haven\'t liked'; return ( <div onClick={this.handleClick}> You {text} this. Click to toggle. </div> ); }}ReactDOM.render( <LikeButton />, document.getElementById('example'));构造函数用来新建父类的this对象；子类必须在constructor办法中调用super办法；否则新建实例时会报错；因为子类没有本人的this对象，而是继承父类的this对象，而后对其进行加工。如果不调用super办法；子类就得不到this对象。 ...

High Order Component（包装组件，前面简称HOC），是React开发中进步组件复用性的高级技巧。HOC并不是React的API，他是依据React的个性造成的一种开发模式。 HOC具体上就是一个承受组件作为参数并返回一个新的组件的办法 const EnhancedComponent = higherOrderComponent(WrappedComponent)在React的第三方生态中，有十分多的应用，比方Redux的connect办法或者React-Router的withrouter办法。 举个例子咱们有两个组件： // CommentListclass CommentList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { // "DataSource" is some global data source comments: DataSource.getComments() }; } componentDidMount() { // Subscribe to changes DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // Clean up listener DataSource.removeChangeListener(this.handleChange); } handleChange() { // Update component state whenever the data source changes this.setState({ comments: DataSource.getComments() }); } render() { return ( <div> {this.state.comments.map((comment) => ( <Comment comment={comment} key={comment.id} /> ))} </div> ); }}// BlogPostclass BlogPost extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { blogPost: DataSource.getBlogPost(props.id) }; } componentDidMount() { DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ blogPost: DataSource.getBlogPost(this.props.id) }); } render() { return <TextBlock text={this.state.blogPost} />; }}他们尽管是两个不同的组件，对DataSource的需要也不同，然而他们有很多的内容是类似的： ...

Redux 原理及工作流程（1）原理 Redux源码次要分为以下几个模块文件 compose.js 提供从右到左进行函数式编程createStore.js 提供作为生成惟一store的函数combineReducers.js 提供合并多个reducer的函数，保障store的唯一性bindActionCreators.js 能够让开发者在不间接接触dispacth的前提下进行更改state的操作applyMiddleware.js 这个办法通过中间件来加强dispatch的性能const actionTypes = { ADD: 'ADD', CHANGEINFO: 'CHANGEINFO',}const initState = { info: '初始化',}export default function initReducer(state=initState, action) { switch(action.type) { case actionTypes.CHANGEINFO: return { ...state, info: action.preload.info || '', } default: return { ...state }; }}export default function createStore(reducer, initialState, middleFunc) { if (initialState && typeof initialState === 'function') { middleFunc = initialState; initialState = undefined; } let currentState = initialState; const listeners = []; if (middleFunc && typeof middleFunc === 'function') { // 封装dispatch return middleFunc(createStore)(reducer, initialState); } const getState = () => { return currentState; } const dispatch = (action) => { currentState = reducer(currentState, action); listeners.forEach(listener => { listener(); }) } const subscribe = (listener) => { listeners.push(listener); } return { getState, dispatch, subscribe }}（2）工作流程 ...

Redux可是一个赫赫有名的库，很多中央都在用，我也用了几年了，明天这篇文章就是本人来实现一个Redux，以便于深刻了解他的原理。咱们还是老套路，从根本的用法动手，而后本人实现一个Redux来代替源码的NPM包，然而性能放弃不变。本文只会实现Redux的外围库，跟其余库的配合应用，比方React-Redux筹备前面独自写一篇文章来讲。有时候咱们过于关注应用，只记住了各种应用形式，反而疏忽了他们的外围原理，然而如果咱们想真正的进步技术，最好还是一个一个搞清楚，比方Redux和React-Redux看起来很像，然而他们的核心理念和关注点是不同的，Redux其实只是一个单纯状态治理库，没有任何界面相干的货色，React-Redux关注的是怎么将Redux跟React联合起来，用到了一些React的API。 基本概念Redux的概念有很多文章都讲过，想必大家都看过很多了，我这里不再开展，只是简略提一下。Redux基本概念次要有以下几个： Store人如其名，Store就是一个仓库，它存储了所有的状态(State)，还提供了一些操作他的API，咱们后续的操作其实都是在操作这个仓库。如果咱们的仓库是用来放牛奶的，初始状况下，咱们的仓库外面一箱牛奶都没有，那Store的状态(State)就是： { milk: 0}Actions一个Action就是一个动作，这个动作的目标是更改Store中的某个状态，Store还是下面的那个仓库，当初我想往仓库放一箱牛奶，那"我想往仓库放一箱牛奶"就是一个Action，代码就是这样： { type: "PUT_MILK", count: 1}Reducers后面"我想往仓库放一箱牛奶"只是想了，还没操作，具体操作要靠Reducer，Reducer就是依据接管的Action来扭转Store中的状态，比方我接管了一个PUT_MILK，同时数量count是1，那放进去的后果就是milk减少了1，从0变成了1，代码就是这样: const initState = { milk: 0}function reducer(state = initState, action) { switch (action.type) { case 'PUT_MILK': return {...state, milk: state.milk + action.count} default: return state }}能够看到Redux自身就是一个单纯的状态机，Store寄存了所有的状态，Action是一个扭转状态的告诉，Reducer接管到告诉就更改Store中对应的状态。 简略例子上面咱们来看一个简略的例子，蕴含了后面提到的Store，Action和Reducer这几个概念： import { createStore } from 'redux';const initState = { milk: 0};function reducer(state = initState, action) { switch (action.type) { case 'PUT_MILK': return {...state, milk: state.milk + action.count}; case 'TAKE_MILK': return {...state, milk: state.milk - action.count}; default: return state; }}let store = createStore(reducer);// subscribe其实就是订阅store的变动，一旦store产生了变动，传入的回调函数就会被调用// 如果是联合页面更新，更新的操作就是在这里执行store.subscribe(() => console.log(store.getState()));// 将action收回去要用dispatchstore.dispatch({ type: 'PUT_MILK' }); // milk: 1store.dispatch({ type: 'PUT_MILK' }); // milk: 2store.dispatch({ type: 'TAKE_MILK' }); // milk: 1本人实现后面咱们那个例子尽管短小，然而曾经蕴含了Redux的外围性能了，所以咱们手写的第一个指标就是替换这个例子中的Redux。要替换这个Redux，咱们得先晓得他外面都有什么货色，认真一看，咱们如同只用到了他的一个API: ...

hello，这里是潇晨，明天来讲个故事 讲个故事：从前，有家z公司，z公司的ceo叫react，它收下有个小弟或者叫小leader，schedule schedule每天负责消化老大react画的大饼，而后将拆解成一个个小小的task，给上面的小弟去实现，并且负责划分优先级，调度小弟们的工作排序。 那schedule怎么给这些工作划分优先级呢，它想了个最简略的方法，用deadline或者过期工夫，给这些task划分优先级，过期工夫越短阐明这个工作越紧急，连忙调配苦力（上面的小弟）去实现，过期工夫越长，阐明这个task越不紧急，能够当前缓缓干，还有一类task曾经过了它的deadline，这个过期的工作优先级最高，没方法，延期之后也是要实现的，可怜了程序员小哥哥了。 于是小leader，scheduler把老板的饼掰碎了，而后给这些小task依照deadline排了个优先级，于是程序员小哥哥开始接工作了 程序员小哥哥A承受了task1和task2，于是他给本人排了个工作清单，依照优先级先做task1，而后做task2，于是小哥进入密集开发中（render阶段），正在做task1 然而天又不测风云，老板依据业务的须要，给scheduler下达了一个十分紧急的需要，苦了程序员小哥了，scheduler说，唉，没方法呀，加加班，把这个十分紧急的需要现插个队吧，程序员小哥单线程的，每次只能做一个task，于是插个队，加加班做最紧急的需要task0吧。 接下来就是密集的加班中。。。（这一阶段称为render阶段） 终于在不屑的致力下，最终程序员小哥还是加班加点的把所有工作实现了，交给测试验证（commit阶段）， 以上状况是有紧急任务时候的打断，还有一种状况是老板给的大饼很难消化，然而这个task2还没达到deadline，程序员小哥在做这个工作的时候遇到了艰难，所以就先放一放吧，反正是个艰巨的工作，在闲暇的时候在做吧，先实现优先级高的task0和task1，有工夫在做task2 进入正题：当咱们在相似上面的搜寻框组件进行搜寻时会发现，组件分为搜寻局部和搜寻后果展现列表，咱们冀望输入框能立即响应，搜素列表能够有期待的工夫，如果搜寻列表数据量很大，在进行渲染的时候，咱们又输出了一些文字，因为用户输出事件的优先级是很高的，所以就要进行后果列表的渲染，这就引出了不同工作之间的优先级和调度 Scheduler咱们晓得如果利用占用较长的js执行工夫，比方超过了设施一帧的工夫，那么设施的绘制就会呈现不晦涩的景象。 Scheduler次要的性能是工夫切片和调度优先级，react在比照节点差别的时候会占用肯定的js执行工夫，Scheduler外部借助MessageChannel实现了在浏览器绘制之前指定一个工夫片，如果react在指定工夫内没执行完差别的比照，Scheduler就会强制交出执行权给浏览器 工夫切片 在浏览器的一帧中js的执行工夫如下 requestIdleCallback是在浏览器重绘重排之后，如果还有闲暇就能够执行未实现的工作，所以为了不影响重绘重排，能够在浏览器在requestIdleCallback中执行耗性能的计算，然而因为requestIdleCallback存在兼容和触发机会不稳固的问题，scheduler中采纳MessageChannel来实现requestIdleCallback，如果以后环境不反对MessageChannel就采纳setTimeout。 在performUnitOfWork(render阶段的终点)之后会执行render阶段和commit阶段，如果在浏览器的一帧中，cup的计算还没实现，就会让出js执行权给浏览器，这个判断在workLoopConcurrent函数中，shouldYield就是用来判断残余的工夫有没有用尽。在源码中每个工夫片时5ms，这个值会依据设施的fps调整。 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) {//如果fiber链还没遍历完，没有被暂停或者打断 performUnitOfWork(workInProgress);//执行render阶段 }}function forceFrameRate(fps) {//计算工夫片 if (fps < 0 || fps > 125) { console['error']( 'forceFrameRate takes a positive int between 0 and 125, ' + 'forcing frame rates higher than 125 fps is not supported', ); return; } if (fps > 0) { yieldInterval = Math.floor(1000 / fps); } else { yieldInterval = 5;//工夫片默认5ms }}工作的暂停在shouldYield函数中有一段，所以能够晓得，如果以后工夫大于工作开始的工夫+yieldInterval，就打断了工作的进行。 ...

hello，这里是潇晨，大家在面试的过程是不是常常会遇到这样的问题，react的setState是同步的还是异步的，这个问题答复的时候肯定要残缺，来看上面这几个例子： 例子1：点击button触发更新，在handle函数中会调用两次setState export default class App extends React.Component { state = { num: 0, }; updateNum = () => { console.log("before", this.state.num); this.setState({ num: this.state.num + 1 }); this.setState({ num: this.state.num + 1 }); console.log("after", this.state.num); }; render() { const { num } = this.state; console.log("render", num); return <button onClick={this.updateNum}>hello {num}</button>; }}//打印后果//render 0//before 0//after 0//render 1例子2:例子1的两次setState在setTimeout回调中执行 export default class App extends React.Component { state = { num: 0, }; updateNum = () => { console.log("before", this.state.num); setTimeout(() => { this.setState({ num: this.state.num + 1 }); this.setState({ num: this.state.num + 1 }); console.log("after", this.state.num); }, 0); }; render() { const { num } = this.state; console.log("render", num); return <button onClick={this.updateNum}>hello {num}</button>; }}//打印后果//render 0//before 0//render 1//render 2//after 2例子3:用unstable_batchedUpdates在setTimout中执行，unstable_batchedUpdates的回调函数中调用两次setState ...

hello，这里是潇晨，明天咱们来聊聊react源码，作为应用react多年的前端工程师，咱们是否还在应用着各种利用层面的库、框架呢，是否在面试过程中遇到一些对于react源码方面的问题呢，如果是，那么是否尝试过来看看react底层运行逻辑呢？ 为什么要学react源码？成为高级或资深前端工程师的必备条件：作为前端工程师，如果不满足只停留在利用层面的开发，或者想成为高级或资深前端工程师，那相熟远吗将是一个很必要的能力，为什么这么说呢，react作为前端常常要用到的库，响应式jsx申明、virtual-dom、diff算法、fiber调度、current-mode等思维曾经成为了构建前端疾速响应页面的一种卓有成效的思维。有些同学会说，底层源码我日常开发中用不到啊，的确，如果只是满足复制黏贴，或者构建简略的页面，用一些社区曾经有的库，的确没必要，然而咱们是新一代有现实有志气的年轻人呐，而且要想在职业生涯走的更远，只停留在应用层面，咱们的竞争力会大打折扣，就算是为了晋升技能或者晋升薪资，这也是咱们必须要想学习的一项能力。面试的须要：当初1年以上的前端岗根本都开始要求相熟一个常常用到的库、或者框架的源码，如果你日常开发中react用的比拟多的话，那相熟react源码对你的面试来说必定是一个加分项，如果能将react中各个模块的运行机制、以及它们是怎么配合工作的联合起来，加上一些开发过程中遇到的问题，而后通过浏览源码有了新的意识，必定会让面试官另眼相看。晋升日常开发技能的须要：日常开发中尽管咱们不会间接接触源码，然而组件的性能优化、调试某些渲染过程中bug，或者和react相干的降级，以及它的设计思维，这些都是须要从源码层面来了解或者解决的，就像盖房子一样，没有巩固的根底或者底层逻辑，怎么能盖好上层建筑呢。react源码难学吗？ 当然难学，react从15版本到当初17版本，很快18版本也快进去了，两头的迭代始终没停，尽管你可能感觉它的api没太多变动，然而它的外部却经验着天翻地覆的重构，从最开始的stack reconcile到起初的为了解决疾速响应而生的current mode、Scheduler(调度fiber)、Lane(解决细粒度工作优先级)、以及在此基础上的batchedUpdates和Suspense，这所有的目标无不是朝着构建更快的利用而进化的， 上面这两张图就是应用异步可中断更新前后的区别，能够领会一下 如果你尝试着关上react源码，你会发现它的代码量特地多，如果你挨个浏览，会齐全没有思路，如果你关上react利用的函数调用栈，顺着调用栈，一不小心你就会陷入各种函数的调用栈之中。这个是否是不是脑壳疼呢？ 怎么学习react源码？不要泄气，学习办法还是有的，尽管源码多，并且难懂，然而如果成体系的学习各个模块，剖析为什么这么设计，它的目标是为了什么，你就会了解react开发者设计初衷和对此进行的致力 了解react的设计理念：从设计理念登程，剖析react构建的利用的目标、局限性和背景，前因后果都理解分明了，才算是理解了它的脾气，是不是有点像找女朋友，你先得理解她的爱好吧，而后理解她的过来，而后顺着react的设计理念，开始思考为什么它会这么设计，比照vue等其余构建页面的库，它的劣势和局限又在哪里。分模块学习：常识得掰碎了消化，瘦子也是一口口吃进去的呢，遇到一个艰难的挑战，能够对它进行合成，先理解整个框架的逻辑，而后对各个模块的性能和作用有个大抵的意识，接着就是深刻每个模块的细节，就像盖房子一样，有了学习的路线或者思路，才不会陷入各个模块或者函数的调用关系之中，第一次浏览源码切记纠结每个函数的实现，先相熟它们的性能和作用，而后才是啃具体细节，学习源码不是久而久之的事，须要重复的去琢磨react开发者的用意。跟着调用栈和例子调试：能够尝试写一些小demo，顺着最开始调用函数调试各个函数，联合源码的正文或者查阅我之前学的react源码解析系列文章，各个模块一一击破，比方看到了hook相干的源码，能够尝试着写一个带有useState的组件，看mount和update的时候，hook是怎么挂载和更新的，也能够看在不同模式下它们的状态更新的区别，比方legacy和current模式下的区别，等相熟了hook源码之后也能够尝试手写一个hook，加深对hook的了解。带上问题学习：依据常见的面试题，尝试在源码中需找答案，最初能够向你的共事答复这些问题的，一方面输入才是最好的学习，另一方面也是一个沟通交流的机会 相干参考视频解说：进入学习

hello，这里是潇晨，明天就带着大家一起来手写一个迷你版的hooks，不便大家了解hook在源码中的运行机制，配有图解，保姆级的教程，只求同学一个小小的，。 第一步：引入React和ReactDOM因为咱们要将jsx转变为virtual-dom，这一步分工作就交给babel吧，而jsx被babel进行词法解析之后会造成React.createElement()的调用，而React.createElement()执行之后的返回后果就是jsx对象或者叫virtual-dom。 又因为咱们要将咱们的demo渲染到dom上，所以咱们引入ReactDOM。 import React from "react";import ReactDOM from "react-dom";第二步：咱们来写一个小demo咱们定义两个状态count和age，在点击的时候触发更新，让它们的值加1。 在源码中useState是保留在一个Dispatcher对象下面的，并且在mount和update的时候取到的是不同的hooks，所以咱们先临时从Dispatcher上拿到useState，等下在来定义Dispatcher。 接下来定义一个schedule函数，每次调用的时候会从新渲染组件。 function App() { let [count, setCount] = Dispatcher.useState(1); let [age, setAge] = Dispatcher.useState(10); return ( <> <p>Clicked {count} times</p> <button onClick={() => setCount(() => count + 1)}> Add count</button> <p>Age is {age}</p> <button onClick={() => setAge(() => age + 1)}> Add age</button> </> );}function schedule() { //每次调用会从新渲染组件 ReactDOM.render(<App />, document.querySelector("#root"));}schedule();第三步：定义Dispatcher在看这部分前，先来捋分明fiber、hook、update的关系，看图： Dispatcher是什么：Dispatcher在源码中就是一个对象，下面寄存着各种各样的hooks，在mount和update的时候会应用过不同的Dispatcher，来看看在源码中Dispatcher是什么样子： 在调用useState之后，会调用一个resolveDispatcher的函数，这个函数调用之后会返回一个dispatcher对象，这个对象上就有useState等钩子。 那咱们来看看这个函数做了啥事件，这个函数比较简单，间接从ReactCurrentDispatcher对象上拿到current，而后返回进去的这个current就是dispatcher，那这个ReactCurrentDispatcher又是个啥？别急，持续在源码中来找一下。 在源码中有这样一段代码，如果是在正式环境中，分为两种状况 ...

咱们在写React组件时[].map会提醒咱们须要为组件增加一个key。那么这个key有什么必要性呢？ React Diffing 算法当比照两棵树时，React 首先比拟两棵树的根节点。不同类型的根节点元素会有不同的状态 1、比照不同类型的元素当根节点为不同类型的元素时，React 会卸载原有的树并且建设起新的树。举个例子，当一个元素从 变成 <img>，从 <Article> 变成 <Comment>，或从 <Button> 变成 <div> 都会触发一个残缺的重建流程。 当卸载一棵树时，对应的 DOM 节点也会被销毁。当建设一棵新的树时，对应的 DOM 节点会被创立以及插入到 DOM 中。所有与之前的树相关联的 state 也会被销毁。根节点以下的组件也会被卸载，它们的状态会被销毁。比方，当比对以下更变时： <div> <Counter /></div><span> <Counter /></span>React 会销毁 Counter 组件并且从新装载一个新的组件。 2、比照同一类型的元素当比照两个雷同类型的元素时，React 会保留 DOM 节点，仅比对及更新有扭转的属性。比方： <div className="before" title="stuff" /><div className="after" title="stuff" />通过比照这两个元素，React 晓得只须要批改 DOM 元素上的 className 属性。在解决完以后节点之后，React 持续对子节点进行递归。 默认状况下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差别时，生成一个 mutation。 在子元素列表开端新增元素时，更新开销比拟小。比方： <ul> <li>first</li> <li>second</li></ul><ul> <li>first</li> <li>second</li> <li>third</li></ul>React 会先匹配两个 <li>first</li> 对应的树，而后匹配第二个元素 <li>second</li> 对应的树，最初插入第三个元素的 <li>third</li> 树。 如果只是简略的将新增元素插入到表头，那么更新开销会比拟大。比方： <ul> <li>Duke</li> <li>Villanova</li></ul><ul> <li>Connecticut</li> <li>Duke</li> <li>Villanova</li></ul>React 并不会意识到应该保留 <li>Duke</li> 和 <li>Villanova</li>，而是会重建每一个子元素。这种状况就会带来性能问题。 ...

Context提供了一种不须要手动地通过props来层层传递的形式来传递数据。注释在典型的React利用中，数据是通过props，自上而下地传递给子组件的。然而对于被大量组件应用的固定类型的数据（比如说，本地的语言环境，UI主题等）来说，这么做就显得非常的累赘和蠢笨。Context提供了一种在组件之间（高低层级关系的组件）共享这种类型数据的形式。这种形式不须要你手动地，显式地通过props将数据层层传递上来。 什么时候用Context?这一大节，讲的是context实用的业务场景。Context是为那些能够认定为【整颗组件树范畴内能够共用的数据】而设计的。比如说，以后已认证的用户数据，UI主题数据，以后用户的偏好语言设置数据等。举个例子，上面的代码中，为了装璜Button component咱们手动地将一个叫“theme”的prop层层传递上来。 传递门路是：App -> Toolbar -> ThemedButton -> Button class App extends React.Component { render() { return <Toolbar theme="dark" />; }}function Toolbar(props) { // The Toolbar component must take an extra "theme" prop // and pass it to the ThemedButton. This can become painful // if every single button in the app needs to know the theme // because it would have to be passed through all components. return ( <div> <ThemedButton theme={props.theme} /> </div> );}class ThemedButton extends React.Component { render() { return <Button theme={this.props.theme} />; }}应用context，咱们能够跳过层层传递所通过的两头组件。当初咱们的传递门路是这样的：App -> Button。 ...

render prop是一个技术概念。它指的是应用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件外部的渲染逻辑是通过调用这个函数来实现的。那么，咱们就说这个组件应用了render props技术。 <DataProvider render={data => ( <h1>Hello {data.target}</h1>)}/>不少类库都应用了这种技术，比如说：React Router和Downshift。 在这个文档外面，咱们将会探讨为什么render props是如此有用，你该如何编写本人的render props组件。 注释应用Render Props来实现关注点拆散在React中，组件是代码复用的根本单元（又来了，官网文档一直地在强调这个准则）。到目前为止，在React社区外面，对于共享state或者某些类似的行为（比如说，将一个组件封装进另一领有雷同state的组件）还没有一个清朗的计划。 举个例子，上面这个组件是用于在web利用中追踪鼠标的地位： class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}> <h1>Move the mouse around!</h1> <p>The current mouse position is ({this.state.x}, {this.state.y})</p> </div> ); }}随着光标在屏幕下面挪动，这个组件将会在文档的<p>标签外面显示以后光标在x，y轴上的坐标值。 ...

Suspense 根本利用Suspense 目前在 react 中个别配合 lazy 应用，当有一些组件须要动静加载(例如各种插件)时能够利用 lazy 办法来实现。其中 lazy 承受类型为 Promise<() => {default: ReactComponet}> 的参数，并将其包装为 react 组件。ReactComponet 能够是类组件函数组件或其余类型的组件，例如: const Lazy = React.lazy(() => import("./LazyComponent")) <Suspense fallback={"loading"}> <Lazy/> // lazy 包装的组件 </Suspense>因为 Lazy 往往是从近程加载，在加载实现之前 react 并不知道该如何渲染该组件。此时如果不显示任何内容，则会造成不好的用户体验。因而 Suspense 还有一个强制的参数为 fallback，示意 Lazy 组件加载的过程中应该显示什么内容。往往 fallback 会应用一个加载动画。当加载实现后，Suspense 就会将 fallback 切换为 Lazy 组件的内容。一个残缺的例子如下: function LazyComp(){ console.info("sus", "render lazy") return "i am a lazy man"}function delay(ms){ return new Promise((resolve, reject) => { setTimeout(resolve, ms) })}// 模仿动静加载组件const Lazy = lazy(() => delay(5000).then(x => ({"default": LazyComp})))function App() { const context = useContext(Context) console.info("outer context") return ( <Suspense fallback={"loading"}> <Lazy/> </Suspense> )}这段代码定义了一个须要动静加载的 LazyComp 函数式组件。会在一开始显示 fallback 中的内容 loading，5s 后显示 i am a lazy man。 ...

为什么调用 setState 而不是间接扭转 state？解答 如果您尝试间接扭转组件的状态，React 将无奈得悉它须要从新渲染组件。通过应用setState()办法，React 能够更新组件的UI。 另外，您还能够谈谈如何不保障状态更新是同步的。如果须要基于另一个状态（或属性）更新组件的状态，请向setState()传递一个函数，该函数将 state 和 props 作为其两个参数： this.setState((state, props) => ({ counter: state.counter + props.increment}));React实现的挪动利用中，如果呈现卡顿，有哪些能够思考的优化计划减少shouldComponentUpdate钩子对新旧props进行比拟，如果值雷同则阻止更新，防止不必要的渲染，或者应用PureReactComponent代替Component，其外部曾经封装了shouldComponentUpdate的浅比拟逻辑对于列表或其余构造雷同的节点，为其中的每一项减少惟一key属性，以不便React的diff算法中对该节点的复用，缩小节点的创立和删除操作render函数中缩小相似onClick={() => {doSomething()}}的写法，每次调用render函数时均会创立一个新的函数，即便内容没有产生任何变动，也会导致节点没必要的重渲染，倡议将函数保留在组件的成员对象中，这样只会创立一次组件的props如果须要通过一系列运算后能力拿到最终后果，则能够思考应用reselect库对后果进行缓存，如果props值未发生变化，则后果间接从缓存中拿，防止昂扬的运算代价webpack-bundle-analyzer剖析以后页面的依赖包，是否存在不合理性，如果存在，找到优化点并进行优化React key 是干嘛用的 为什么要加？key 次要是解决哪一类问题的Keys 是 React 用于追踪哪些列表中元素被批改、被增加或者被移除的辅助标识。在开发过程中，咱们须要保障某个元素的 key 在其同级元素中具备唯一性。 在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是早先创立的还是被挪动而来的元素，从而缩小不必要的元素重渲染此外，React 还须要借助 Key 值来判断元素与本地状态的关联关系。 注意事项： key值肯定要和具体的元素—一对应；尽量不要用数组的index去作为key；不要在render的时候用随机数或者其余操作给元素加上不稳固的key，这样造成的性能开销比不加key的状况下更蹩脚。React 组件中怎么做事件代理？它的原理是什么？React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接管到一个合成事件对象的实例，它合乎W3C规范，且与原生的浏览器事件领有同样的接口，反对冒泡机制，所有的事件都主动绑定在最外层上。 在React底层，次要对合成事件做了两件事： 事件委派： React会把所有的事件绑定到构造的最外层，应用对立的事件监听器，这个事件监听器上维持了一个映射来保留所有组件外部事件监听和处理函数。主动绑定： React组件中，每个办法的上下文都会指向该组件的实例，即主动绑定this为以后组件。参考：前端react面试题具体解答 在React中如何防止不必要的render？React 基于虚构 DOM 和高效 Diff 算法的完满配合，实现了对 DOM 最小粒度的更新。大多数状况下，React 对 DOM 的渲染效率足以业务日常。但在个别简单业务场景下，性能问题仍然会困扰咱们。此时须要采取一些措施来晋升运行性能，其很重要的一个方向，就是防止不必要的渲染（Render）。这里提下优化的点： shouldComponentUpdate 和 PureComponent在 React 类组件中，能够利用 shouldComponentUpdate或者 PureComponent 来缩小因父组件更新而触发子组件的 render，从而达到目标。shouldComponentUpdate 来决定是否组件是否从新渲染，如果不心愿组件从新渲染，返回 false 即可。 ...

High Order Component（包装组件，前面简称HOC），是React开发中进步组件复用性的高级技巧。HOC并不是React的API，他是依据React的个性造成的一种开发模式。 HOC具体上就是一个承受组件作为参数并返回一个新的组件的办法 const EnhancedComponent = higherOrderComponent(WrappedComponent)在React的第三方生态中，有十分多的应用，比方Redux的connect办法或者React-Router的withrouter办法。 举个例子咱们有两个组件： // CommentListclass CommentList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { // "DataSource" is some global data source comments: DataSource.getComments() }; } componentDidMount() { // Subscribe to changes DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // Clean up listener DataSource.removeChangeListener(this.handleChange); } handleChange() { // Update component state whenever the data source changes this.setState({ comments: DataSource.getComments() }); } render() { return ( <div> {this.state.comments.map((comment) => ( <Comment comment={comment} key={comment.id} /> ))} </div> ); }}// BlogPostclass BlogPost extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { blogPost: DataSource.getBlogPost(props.id) }; } componentDidMount() { DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ blogPost: DataSource.getBlogPost(this.props.id) }); } render() { return <TextBlock text={this.state.blogPost} />; }}参考 前端react面试题具体解答 ...

你了解“在React中，一切都是组件”这句话。组件是 React 利用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的局部。每个组件彼此独立，而不会影响 UI 的其余部分。 约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？在 React中，组件负责管制和治理本人的状态。如果将HTML中的表单元素（ input、 select、 textarea等）增加到组件中，当用户与表单产生交互时，就波及表单数据存储问题。依据表单数据的存储地位，将组件分成约東性组件和非约東性组件。约束性组件（ controlled component）就是由 React管制的组件，也就是说，表单元素的数据存储在组件外部的状态中，表单到底出现什么由组件决定。如下所示， username没有存储在DOM元素内，而是存储在组件的状态中。每次要更新 username时，就要调用 setState更新状态；每次要获取 username的值，就要获取组件状态值。 class App extends Component { //初始化状态 constructor(props) { super(props); this.state = { username: "有课前端网", }; } //查看后果 showResult() { //获取数据就是获取状态值 console.log(this.state.username); } changeUsername(e) { //原生办法获取 var value = e.target.value; //更新前，能够进行脏值检测 //更新状态 this.setState({ username: value, }); } //渲染组件 render() { //返回虚构DOM return ( <div> <p> {/*输入框绑定va1ue*/} <input type="text" onChange={this.changeUsername.bind(this)} value={this.state.username} /> </p> <p> <button onClick={this.showResult.bind(this)}>查看后果</button> </p> </div> ); }}非约束性组件（ uncontrolled component）就是指表单元素的数据交由元素本身存储并解决，而不是通过 React组件。表单如何出现由表单元素本身决定。如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要批改表单数据时，间接输出表单即可。有时也能够获取元素，再手动批改它的值。当要获取表单数据时，要首先获取表单元素，而后通过表单元素获取元素的值。留神：为了不便在组件中获取表单元素，通常为元素设置ref属性，在组件外部通过refs属性获取对应的DOM元素。 ...

Redux可是一个赫赫有名的库，很多中央都在用，我也用了几年了，明天这篇文章就是本人来实现一个Redux，以便于深刻了解他的原理。咱们还是老套路，从根本的用法动手，而后本人实现一个Redux来代替源码的NPM包，然而性能放弃不变。本文只会实现Redux的外围库，跟其余库的配合应用，比方React-Redux筹备前面独自写一篇文章来讲。有时候咱们过于关注应用，只记住了各种应用形式，反而疏忽了他们的外围原理，然而如果咱们想真正的进步技术，最好还是一个一个搞清楚，比方Redux和React-Redux看起来很像，然而他们的核心理念和关注点是不同的，Redux其实只是一个单纯状态治理库，没有任何界面相干的货色，React-Redux关注的是怎么将Redux跟React联合起来，用到了一些React的API。 基本概念Redux的概念有很多文章都讲过，想必大家都看过很多了，我这里不再开展，只是简略提一下。Redux基本概念次要有以下几个： Store人如其名，Store就是一个仓库，它存储了所有的状态(State)，还提供了一些操作他的API，咱们后续的操作其实都是在操作这个仓库。如果咱们的仓库是用来放牛奶的，初始状况下，咱们的仓库外面一箱牛奶都没有，那Store的状态(State)就是： { milk: 0}Actions一个Action就是一个动作，这个动作的目标是更改Store中的某个状态，Store还是下面的那个仓库，当初我想往仓库放一箱牛奶，那"我想往仓库放一箱牛奶"就是一个Action，代码就是这样： { type: "PUT_MILK", count: 1}Reducers后面"我想往仓库放一箱牛奶"只是想了，还没操作，具体操作要靠Reducer，Reducer就是依据接管的Action来扭转Store中的状态，比方我接管了一个PUT_MILK，同时数量count是1，那放进去的后果就是milk减少了1，从0变成了1，代码就是这样: const initState = { milk: 0}function reducer(state = initState, action) { switch (action.type) { case 'PUT_MILK': return {...state, milk: state.milk + action.count} default: return state }}能够看到Redux自身就是一个单纯的状态机，Store寄存了所有的状态，Action是一个扭转状态的告诉，Reducer接管到告诉就更改Store中对应的状态。 简略例子上面咱们来看一个简略的例子，蕴含了后面提到的Store，Action和Reducer这几个概念： import { createStore } from 'redux';const initState = { milk: 0};function reducer(state = initState, action) { switch (action.type) { case 'PUT_MILK': return {...state, milk: state.milk + action.count}; case 'TAKE_MILK': return {...state, milk: state.milk - action.count}; default: return state; }}let store = createStore(reducer);// subscribe其实就是订阅store的变动，一旦store产生了变动，传入的回调函数就会被调用// 如果是联合页面更新，更新的操作就是在这里执行store.subscribe(() => console.log(store.getState()));// 将action收回去要用dispatchstore.dispatch({ type: 'PUT_MILK' }); // milk: 1store.dispatch({ type: 'PUT_MILK' }); // milk: 2store.dispatch({ type: 'TAKE_MILK' }); // milk: 1参考 前端react面试题具体解答 ...

一 引沿Fiber 架构是React16中引入的新概念，目标就是解决大型 React 利用卡顿，React在遍历更新每一个节点的时候都不是用的实在DOM，都是采纳虚构DOM，所以能够了解成fiber就是React的虚构DOM，更新Fiber的过程叫做和谐，每一个fiber都能够作为一个执行单元来解决，所以每一个 fiber 能够依据本身的过期工夫expirationTime，来判断是否还有空间工夫执行更新，如果没有工夫更新，就要把主动权交给浏览器去渲染，做一些动画，重排（ reflow ），重绘 repaints 之类的事件，这样就能给用户感觉不是很卡。 二 什么是和谐和谐是一种算法，就是React比照新老虚构DOM的过程，以决定须要更新哪一部分。 三 什么是FilberFiber的目标是为了让React充分利用调度，以便做到如下几点： 暂停工作，稍后再回来优先思考不同类型的工作重用以前实现的工作如果不再须要，则停止工作为了实现下面的要求，咱们须要把工作拆分成一个个可执行的单元，这些可执行的单元就叫做一个Fiber，一个Fiber就代表一个可执行的单元。 一个Fiber就是一个一般的JS对象，蕴含一些组件的相干信息。 function FiberNode(){ this.tag = tag; // fiber 标签 证实是什么类型fiber。 this.key = key; // key和谐子节点时候用到。 this.type = null; // dom元素是对应的元素类型，比方div，组件指向组件对应的类或者函数。 this.stateNode = null; // 指向对应的实在dom元素，类组件指向组件实例，能够被ref获取。 this.return = null; // 指向父级fiber this.child = null; // 指向子级fiber this.sibling = null; // 指向兄弟fiber this.index = 0; // 索引 this.ref = null; // ref指向，ref函数，或者ref对象。 this.pendingProps = pendingProps;// 在一次更新中，代表element创立 this.memoizedProps = null; // 记录上一次更新结束后的props this.updateQueue = null; // 类组件寄存setState更新队列，函数组件寄存 this.memoizedState = null; // 类组件保留state信息，函数组件保留hooks信息，dom元素为null this.dependencies = null; // context或是工夫的依赖项 this.mode = mode; //形容fiber树的模式，比方 ConcurrentMode 模式 this.effectTag = NoEffect; // effect标签，用于收集effectList this.nextEffect = null; // 指向下一个effect this.firstEffect = null; // 第一个effect this.lastEffect = null; // 最初一个effect this.expirationTime = NoWork; // 通过不同过期工夫，判断工作是否过期， 在v17版本用lane示意。 this.alternate = null; //双缓存树，指向缓存的fiber。更新阶段，两颗树相互交替。}type 就是react的元素类型 ...

1.1、虚构DOM常见问题：react virtual dom是什么？说一下diff算法？拿到一个问题，个别答复都是是什么？为什么？怎么办？那就依照这个思路来吧！ what用 JavaScript 对象示意 DOM 信息和构造，当状态变更的时候，从新渲染这个 JavaScript 的对象构造。这个 JavaScript 对象称为virtual dom；whyDOM操作很慢，轻微的操作都可能导致页面从新排版，十分耗性能。绝对于DOM对象，js对象解决起来更快，而且更简略。通过diff算法比照新旧vdom之间的差别，能够批量的、最小化的执行dom操作，从而进步性能。whereReact中用JSX语法形容视图，通过babel-loader转译后它们变为React.createElement(...)模式，该函数将生成vdom来形容实在dom。未来如果状态变动，vdom将作出相应变动，再通过diff算法比照新老vdom区别从而做出最终dom操作。这里说到了JSX，那就顺带大抵说一下： 什么是JSX语法糖， React 应用 JSX 来代替惯例的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩大。为什么须要JSX开发效率：应用 JSX 编写模板简略疾速。执行效率：JSX编译为 JavaScript 代码后进行了优化，执行更快。类型平安：在编译过程中就能发现错误。React 16原理babel-loader会预编译JSX为React.createElement(...)React 17原理React 17中的 JSX 转换不会将 JSX 转换为 React.createElement，而是主动从 React 的 package 中引入新的入口函数并调用。另外此次降级不会扭转 JSX 语法，旧的 JSX 转换也将持续工作。与vue的异同react中虚构dom+jsx的设计一开始就有，vue则是演进过程中才呈现的，2.0版本后呈现。 jsx原本就是js扩大，本义过程简略间接的多；vue把template编译为render函数的过程须要简单的编译器转换字符串-ast-js函数字符串 1.2、render、Component根底外围apirenderReactDOM.render(element, container[, callback]);当首次调用的时候，容器节点里的所有DOM 元素都会被替换，后续的调用则会应用React的DOM的差分算法（DOM diffing algorithm）进行高效的更新。 如果提供了可选的回调函数，该回调将在组件被渲染或更新之后被执行。 节点类型1、文本节点2、html 标签节点3、函数组件4、类组件...函数组件// 大些字母结尾function Welcome(props) { return <h1>Hello, {props.name}</h1>}类组件React 的组件能够定义为class 或函数的模式，如需定义class 组件，须要继承React.Component 或 React.PureComponent: class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1> }}1.3、手写简版myreact实现原生标签节点、文本节点、函数组件和类组件的首次渲染 ...

一、组件(1) 函数组件如果你想写的组件只蕴含一个 render 办法，并且不蕴含 state，那么应用函数组件就会更简略。咱们不须要定义一个继承于 React.Component 的类，咱们能够定义一个函数，这个函数接管 props 作为参数，而后返回须要渲染的元素。 function Square(props) { return ( <button className="square" onClick={props.onClick}> {props.value} </button> );}(2) React.ComponentshouldComponentUpdate 仅查看了 props.color 或 state.count 是否扭转。如果这些值没有扭转，那么这个组件不会更新 class CounterButton extends React.Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.color !== nextProps.color) { return true; } if (this.state.count !== nextState.count) { return true; } return false; }}(3) PureComponent如果你的组件更简单一些，你能够应用相似“浅比拟”的模式来查看 props 和 state 中所有的字段，以此来决定是否组件须要更新。React 曾经提供了一位好帮手来帮你实现这种常见的模式 - 你只有继承 React.PureComponent 就行了。 class CounterButton extends React.PureComponent {}大部分状况下，你能够应用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比拟 （例如：1 == 1或者ture==true，数组和对象援用是否雷同），所以当 props 或者 state 某种程度是可变的话，浅比拟会有脱漏，那你就不能应用它了。 ...

本文概述了5种古代高级React模式，包含集成代码、长处和毛病，以及在公共库中的具体用法。 像每个React开发者一样，你可能曾经问过本人以下问题之一 我如何建设一个可重复使用的组件以适应不同的应用状况？我如何建设一个具备简略API的组件，使其易于应用？我如何建设一个在用户界面和性能方面可扩大的组件？这些重复呈现的问题催生了整个React社区的一些高级模式的呈现 在这篇文章中，咱们将看到5种不同模式的概述。为了便于比拟，咱们将对所有这些模式应用一个雷同的构造。 咱们将从一个小的介绍开始，而后是一个实在的代码例子（基于同一个简略的Counter组件）。 咱们将列出长处和毛病，而后在一个名为 "规范"的局部中定义两个因素。 反转管制: 你的组件给用户提供的灵活性和管制等级施行的复杂性: 你和用户实现该模式的难度。最初，咱们将找一些公共库在生产环境中应用该模式的例子 在这篇文章中，咱们将思考一个React开发者（你）为其余开发者构建一个组件的状况。因而，"用户"这个角色间接指的是这些开发者（而不是应用你的网站/应用程序的最终用户）。1. 复合组件模式（Compound Components Pattern）这种模式容许创立富裕表现力和申明性的组件，防止非必要的prop drilling。如果你想让你的组件更有可塑性，有更好的关注点拆散和易了解的API，你应该思考应用这种模式。 例子import React from "react";import { Counter } from "./Counter";function Usage() { const handleChangeCounter = (count) => { console.log("count", count); }; return ( <Counter onChange={handleChangeCounter}> <Counter.Decrement icon="minus" /> <Counter.Label>Counter</Counter.Label> <Counter.Count max={10} /> <Counter.Increment icon="plus" /> </Counter> );}export { Usage };长处缩小了API的复杂性：与其把所有的props都塞进一个微小的父组件中，而后再把这些props钻到子UI组件中，不如在这里把每个props都连贯到各自最有意义的子组件上。 灵便的标记构造：你的组件有很大的UI灵活性，容许从一个繁多的组件创立各种状况。例如，用户能够扭转子组件的程序或定义哪个组件应该被显示。 关注点拆散：大部分的逻辑都蕴含在主Counter组件中，而后用React.Context来分享所有子组件的状态和事件处理。咱们失去了一个明确的责任划分。 毛病太高的UI灵活性：领有灵活性的同时，也有可能引发意想不到的行为（把一个不须要的组件的子组件放进去，把子组件的程序弄乱，遗记蕴含一个必须的子组件） 依据你想要用户如何应用你的组件，你可能不心愿有那么多的灵活性。 更重的JSX：利用这种模式会减少JSX行的数量，特地是当你应用像ESLint这样的代码检测工具或相似Prettier这样的代码格式化工具时在单个组件的规模上，这仿佛不是什么大问题，但当你从全局来看时，必定会产生微小的差别。 规范反转管制：1/4施行的复杂性：1/4应用此模式的公共库React BootstrapReach UI2. 受控属性模式这种模式将你的组件转变为一个受控组件。内部状态作为 "繁多事实源 "被耗费，容许用户插入自定义逻辑，批改默认组件的行为。 例子import React, { useState } from "react";import { Counter } from "./Counter";function Usage() { const [count, setCount] = useState(0); const handleChangeCounter = (newCount) => { setCount(newCount); }; return ( <Counter value={count} onChange={handleChangeCounter}> <Counter.Decrement icon={"minus"} /> <Counter.Label>Counter</Counter.Label> <Counter.Count max={10} /> <Counter.Increment icon={"plus"} /> </Counter> );}export { Usage };长处给予更多的管制：因为主状态裸露在你的组件之外，用户能够管制它，因而能够间接影响你的组件。 ...

MixinsReact Mixin通过将共享的办法包装成Mixins办法，而后注入各个组件来实现，官网曾经不举荐应用，但依然能够学习一下，理解为什么被遗弃。React MiXin只能通过React.createClass()来应用，如下： const mixinDefaultProps = {}const ExampleComponent = React.createClasss({ mixins: [mixinDefaultProps], render: function(){}})Mixins实现import React from 'react'var createReactClass = require('create-react-class')const mixins = { onMouseMove: function(e){ this.setState({ x: e.clientX, y: e.clientY }) }}const Mouse = createReactClass({ mixins: [mixins], getInitialState: function() { return { x: 0, y: 0 } }, render() { return (<div onMouseMove={this.onMouseMove} style={{height: '300px'}}> <p>the current mouse position is ({this.state.x},{this.state.y})</p> </div>) }})Mixins问题Mixins引入了隐式的依赖关系你可能会写一个有状态的组件，而后你的共事可能增加一个读取这个组件state的mixin。几个月之后，你可能心愿将该state挪动到父组件，以便与其兄弟组件共享。你会记得更新这个mixin来读取props而不是state吗？如果此时，其它组件也在应用这个mixin呢？ Mixins引起名称抵触无奈保障两个特定的mixin能够一起应用。例如，如果FluxListenerMixin和WindowSizeMixin都定义来handleChange()，则不能一起应用它们。同时，你也无奈在本人的组件上定义具备此名称的办法。 Mixins导致滚雪球式的复杂性每一个新的需要都使得mixins更难了解。随着工夫的推移，应用雷同mixin的组件变得越来越多。任何mixin的新性能都被增加到应用该mixin的所有组件。没有方法拆分mixin的“更简略”的局部，除非或者引入更多依赖性和间接性。逐步，封装的边界被侵蚀，因为很难扭转或者删除现有的mixins，它们一直变得更形象，直到没有人理解它们如何工作。 高阶组件高阶组件（HOC）是React中复用组件逻辑的一种高级技巧。HOC本身不是React API的一部分，它是一种基于React的组合个性而造成的设计模式。高阶组件是参数为组件，返回值为新组件的函数 组件是将props转换为UI，而高阶组件是将组件转换为另一个组件。 const EnhancedComponent = higherOrderComponent(WrappedComponent)HOC的实现Props Proxy: HOC对传给WrappedComponent的props进行操作Inheritance Inversion HOC继承WrappedComponent，官网不举荐Props Proxyimport React from 'react'class Mouse extends React.Component { render() { const { x, y } = this.props.mouse return ( <p>The current mouse position is ({x}, {y})</p> ) }}class Cat extends React.Component { render() { const { x, y } = this.props.mouse return (<div style={{position: 'absolute', left: x, top: y, backgroundColor: 'yellow',}}>i am a cat</div>) }}const MouseHoc = (MouseComponent) => { return class extends React.Component { constructor(props) { super(props) this.state = { x: 0, y: 0 } } onMouseMove = (e) => { this.setState({ x: e.clientX, y: e.clientY }) } render() { return ( <div style={{height: '300px'}} onMouseMove={this.onMouseMove}> <MouseComponent mouse={this.state}/> </div> ) } }}const WithCat = MouseHoc(Cat)const WithMouse = MouseHoc(Mouse)const MouseTracker = () => { return ( <div> <WithCat/> <WithMouse/> </div> )}export default MouseTracker请留神：HOC不会批改传入的组件，也不会应用继承来复制其行为。相同，HOC通过将组件包装在容器组件中来组成新组件。HOC是纯函数，没有副作用。 ...

复用是组件化开发体系的立命之本，能够说组件化的初衷就是为了复用性。然而组件化的复用形式也存在肯定的问题，其中拆分粒度就是其中一个绕不开的话题，明天咱们就来讲一讲 React 当中的一个不太罕用的 API：cloneElement，他如何帮组咱们更好得进行组件拆分。如果咱们有一个Layout组件，那么一般来说这个组件次要接管的就是children，把它放在次要内容的局部，而后组件自身的节点来管制布局，那么这个时候如果咱们这个布局蕴含两个局部呢，比方还有一个header局部，是跟次要内容有显著辨别的。 比方： 那么咱们这个时候会如何设计这个组件呢？ 版本一function Layout({ header: Header, children }) { return ( <div className='container'> <div className='header'> <Header /> </div> <div classNmae='content'>{children}</div> </div> )}这应该是咱们比拟常见的形式，咱们通过把具体组件作为Layout的props传入进来，而后依照组件的写法把它写入到组件渲染内容之中。 咱们想要应用这个组件，个别会像上面这样： function Header() { return <h1>Title Here</h1>};<Layout header={Header}> <div>content here</div></Layout>那么这样做有什么问题呢？显然是有的，最显著的就是无奈在应用Header的时候指定props 如果Header有props，那么就咱们只能硬编码在Layout外面，不能在应用Header组件的中央进行申明，所以如果咱们想要复用一个Header组件，咱们可能须要再申明一个组件，比方咱们给Header组件一个叫做message的prop用来指定显示的文字内容 function Header({ message = 'Title Here' }) { return <h1>{message}</h1>}那么如果咱们想要在不同页面复用这个组件并且显示不同的题目，咱们须要这么做： function BigHeader() { return <Header message='The Other Title' />}这么做显然在组件较为简单而且props较多的状况下，也能够达到肯定的复用成果，然而谋求极致的咱们必定不心愿仅仅局限于此。 第二版那么有没有方法让咱们能够在应用时能指定props呢？答案必定是有的，咱们能够将Layout的header这个prop接管的不是组件本体，而是具体的ReactElement。 function Layout({ header, children }) { return ( <div className='container'> <div className='header'>{header}</div> <div classNmae='content'>{children}</div> </div> )}那么咱们在应用的时候就能够十分不便得指定props <Layout header={<Header message='The Other Title' />}> <div>Content Here</div></Layout>要了解咱们能够这么做，首先咱们须要弄清楚什么是ReactElement。因为咱们大部分时候写React组件的时候用的都是JSX，所以很多同学可能并不知道ReactElement的存在。 ...