前言：

想零碎学习前端面试题，强烈推荐浏览 在线电子书（反对手机版，不断更新） 。

本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。

欢送在github上留言反馈

react 如何实现keep-alive?

Keep-alive是缓存路由应用的，保留之前路由的状态

实现办法：

  1. 应用npm库：

    1. react-router-cache-router
    2. React-activation

react错误处理？

次要的api(生命周期):

  • componentDidCatch(error,errorInfo): 同样能够将谬误日志上报给服务器
  • getDerivedStateFromError(error)：更新state使下一次渲染可能显示降级后的UI

注意事项：

  • 仅可捕捉其子组件的谬误，无奈捕捉其本身的谬误

你有应用过suspense组件吗？

动静加载（异步组件）加载时会有提早，在提早期间能够将一些内容展现给用户，比方：loading

(react16.6新增的API)

const resource = fetchProfileData();function ProfilePage() {  return (    <Suspense fallback={<h1>Loading profile...</h1>}>      <ProfileDetails />      <Suspense fallback={<h1>Loading posts...</h1>}>        <ProfileTimeline />      </Suspense>    </Suspense>  );}function ProfileDetails() {  // 尝试读取用户信息，只管该数据可能尚未加载  const user = resource.user.read();  return <h1>{user.name}</h1>;}function ProfileTimeline() {  // 尝试读取博文信息，只管该局部数据可能尚未加载  const posts = resource.posts.read();  return (    <ul>      {posts.map(post => (        <li key={post.id}>{post.text}</li>      ))}    </ul>  );}

参考资料：

何为 Suspense？

怎么动静导入组件，按需加载，代码宰割？

只有当组件被加载时，对应的资源才会导入
  • react-loadable: npm 库 按需加载
  • react.lazy: 原生反对（新版本16.6），配合suspense一起应用，还要webpack code splitting
  • require(component) : 在特定条件下，动静引入

react Context介绍？

次要api:

  • react.createContext :　创立store
  • [store].Provider: 包裹组件，并通过value 字段传递参数
  • [store].Consumer: 获取包裹组件内容

创立过程：

  1. 【创立store】：通过 React.createContext 创立 AppContext 实例
  2. 【包裹整个组件】：应用AppContext.Provider组件
  3. 【注入全局变量】，在AppContext.provider组件上
  4. 【引入全局变量】： 通过 AppContext.Consumer组件 ，子组件的回调，获取store中的内容和办法

为什么react并不举荐咱们优先思考应用context?

  • 【实验性】context目前还处于试验阶段，可能会在前期有大扭转，防止给将来降级带来麻烦
  • 【稳定性】context的更新须要通过 setState触发，然而这并不是牢靠的。context劫持跨组件拜访，然而，如果两头子组件通过一些办法不响应更新，比方 shouldComponentUpdate返回false，那么不能保障 context的更新肯定达应用context的子组件。因而，context的可靠性须要关注 。不过是更新的问题，在新版的APP中得以解决
只有你能确保 context是可控的，正当应用，能够给react组件开发带来弱小体验

render函数中return如果没用应用()会用什么问题吗？

论断：如果换行就有问题

起因：babel会将jsx语法编译成js，同时会在每行主动增加分号（;）, 如果 return 换行了，那么就变成了return; 就会导致报错

  //这样会报错，react  class App extends React.Component{        render(){            return             <div>111</div>        }    }

介绍下渲染属性render props？

性能：给纯函数组件加上state,响应react的生命周期

长处：ｈｏｃ的毛病render prop 都能够解决

  • 扩展性限度：hoc无奈从内部拜访子组件的state,因而无奈通过shouldComponentUpdate 过滤掉不必要的更新，react在反对es6 class之后提供了react.PureComponnet来解决这个问题
  • ref传递问题：ref被隔断，起初的react.forwardRef来解决这个问题
  • Wrapper Hell(多层包裹)：多层包裹，形象减少了复杂度和了解老本
  • 命名抵触：屡次嵌套，容易笼罩老属性
  • 不可见性：hoc相当于黑盒

毛病：

  • 应用繁琐：hoc复用只需借助装璜器语法（decorator）一行代码进行复用，render props无奈做到如此简略
  • 嵌套过深：render props 尽管解脱了组件多层嵌套的问题，然而转化为了函数回调的嵌

参考资料：

React 中的 Render Props

React如何进行组件/逻辑复用？

  • HOC（高阶组件）
    • 属性代理
    • 反向继承
  • 渲染属性(render props)
  • react-hooks
  • Mixin (已废除，不探讨)

PureComponent组件介绍？

当props/states扭转时，PureComponent会对它们进行浅比拟，起到性能优化的作用；

相当于在component组件的shouldComponentUpdate办法中进行了比拟才渲染

特地阐明 ：

  • 援用对象的数据倡议不要应用PureComponnet组件，否则会有坑

JSX实质是什么？

JSX 应用js的模式来写html代码

jsx自身是语法糖，无奈间接被浏览器解析，须要通过babel或者typescript来转换成 js。

许多蕴含预配置的工具，例如：create- react app 和 next.js 在其外部也引入了jsx转换。

旧的 JSX转换会把jsx 转换为 React.createElement调用。

jsx调用js自身的个性来动态创建UI，与于传统模式下的模板语法不同

react中组件通信的几种形式？

react组件之前通信次要要四种形式

  • 父子组件：props，props回调
  • 兄弟组件：独特父级，再由父节点转发props，props回调
  • 跨级组件：context对象，注入全局变量：getChildContext; 获取全局变量：this.context.color;
  • 非嵌套组件：应用事件订阅，向事件对象增加监听器，和触发事件来实现组件之间的通信，通过引入event模块实现
  • 全局状态管理工具：Redux,Mobox保护全局store

react UI组件和容器组件的区别与利用？

容器组件：领有本人的状态，生命周期

UI组件：只负责页面UI渲染，不具备任何逻辑，性能繁多，通常是无状态组件，没有本人的state,生命周期。

react生命周期？

react 生命周期支流的次要有2个大的版本；

一个是 v16.3之前的：

一个是v16.3之后的；

v16.3之前 的生命周期次要分为4个阶段,8个生命周期：

  • 初始化值阶段 initialization： getDefaultProps,getInitialState;
  • 初始阶段 mount： componentWillMount,componentDidMount;
  • 更新阶段 update：componetWillReceiveProps ,shouldComponetUpdate ,componentWillUpdate,
  • 销毁阶段 unmount：componetWillUnmount;

v16.3之后的生命周期:

新引入了两个生命周期：

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

提醒3个不平安的生命周期（在v17中要被删除）

  • componentWillMount
  • componentWillReceiveProps
  • componetWillUpdate

新的命令周期：

React的申请放在componentWillMount有什么问题？

错误观念：componentWillMount中能够提前进行异步申请，防止白屏工夫；

剖析：componentWillMount比 componentDidMount相差不了多少微秒；

问题

  • 在SSR（服务端渲染）中，componentWillMount生命周期会执行两次，导致多余申请
  • 在react16进行fiber重写后，componentWillMount 可能在一次渲染中屡次调用
  • react17版本后要删除componentWillMount生命周期

目前官网举荐异步申请在 componentDidMount中

create-react-app有什么长处和毛病？

长处：

疾速生成架手架

毛病：

  1. 默认不引入polyfill,须要在入口引入babel-polyfill
  2. 默认只反对css热加载，不反对html,js热加载（举荐应用：react-hot-loader）

介绍下Immutable?

Immutable是一种不同变的数据类型，数据一旦被创立，就不能更改的数据，每当对它进行批改，就会返回新的immutable对象，在做对象比拟时，能晋升性能；

实现原理：

immutable实现原理是长久化数据结构，构造共享，防止对数据对象进行深拷贝；

react、vue有什么区别？

区别reactvue
模板引擎JSX，更多灵便，纯js语法（能够通过babel插件实现模板引擎）vue template,指令，更加简略 （vue也能够应用jsx语法）
复用Mixin->Hoc->render props->hookMixin-> slot->Hoc(比拟用，模板套模板，奇怪做法)-> vue3.0 function baseed APi
性能优化形式手动优化：PureComponent/shouldComponentUpdate主动优化：准确监听数据变动
监听数据变动的实现原理手动：通过比拟援用的形式（diff）主动：getter/setter以及一些函数的劫持（当state特地多的时候，当watcher也会很多，导致卡顿）
数据流数据不可变，单向数据流，函数式编程思维数据可变，双向数据绑定，（组件和DOM之间的），响应式设计
设计思维all in js (html->jsx, css->style-component/jss)html,,css,js写在一个文件中，应用各自的形式
性能内置少（交给社区，reactDom,propType）多（使用方便）
长处大型项目更适合兼容老我的项目，上手简略

数据流比照：

react 数据更改逻辑：

vue数据更改逻辑：

参考资料：

Vue 和 React 的长处别离是什么？

集体了解Vue和React区别

Vue与React的区别之我见

让react反对vue的template语法如何实现?

基于形象语法树AST，实现解析模板指令的插件（应该是实现一个babel插件，因为jsx解析成js语法，是通过babel解析的）

对react的认识，它的优缺点？

长处：

  1. 提供了申明式的编程思维
  2. 提供了组件化的开发思维，大大提高前端开发的效率
  3. 引入了虚构dom的概念，使得react能够跨端进行类各界面开发，react native,react vr,ssr;
  4. 引入了diff算法，进步了渲染效率

有余：

  1. 侵入性强，对老代码只能重做，不能局部集成（比方vue）；

jsx语法有什么特点相比js?

jsx以js为核心来写html代码

jsx语法特点：

  1. 反对js+html混写；
  2. jsx编译更快比html

长处：jsx类型平安的，在编译过程中就能发现错误；

create-react-app 如何实现，蕴含哪些内容，如何自定义一个脚手架？

定义：create-react-app是一个疾速生成react我的项目的脚手架；

长处：

  • 无需设置webpack配置

毛病：

  • 暗藏了webpack,babel presets的设置，批改起来比拟麻烦

HOC

什么是高阶函数？

如果一个函数，承受一个或多个函数作为参数或者返回一个函数，就可称之为高阶函数

特点：

  • 是函数
  • 参数是函数
  • or 返回是函数

eg: array 对象中的 map,filter,sort办法都是高阶函数

  function add(x,y,f){      return f(x)+f(y)  }  let num=add(2,-2,Math.abs)  console.log(num);

什么是高阶组件？

高阶组件就是一个函数（react函数组件），接管一个组件，解决后返回的新组件

高阶组件是高阶函数的衍生

外围性能：实现形象和可重用性

它的函数签名能够用相似hashell的伪代码示意

  • W（WrappedComponent）被包裹的组件，当传参数传入hoc函数中
  • E（EnhancedComponent）返回的新组件
hocFactory:: W: React.Component => E: React.Component

高阶组件，不是真正意义上的组件，其实是一种模式；

能够对逻辑代码进行抽离，或者增加某个共用办法；

高阶组件是装璜器模式在react中的实现

主要用途：

  • 代码重用，逻辑和疏导形象
  • 渲染劫持
  • 状态形象和管制
  • Props 管制

参考资料：React 中的高阶组件及其利用场景

hoc存在的问题？

一、静态方法失落

二、refs属性不能透传

三、反向继承不能保障残缺的子组件树被解析

hoc高阶组件应用场景？

react-redux ：connect就是一个高阶组件,接管一个component,并返回一个新的componet,解决了监听store和后续的解决 ；

react-router ：withrouter 为一个组件注入 history对象；

你在我的项目中怎么应用的高阶组件？

不谈场景的技术都是在耍流氓

  • 权限管制：//也能够在history路由切换的时候，加个监听办法，在顶层做监听解决，不过页面会闪一下

    • 页面级别：withAdminAuth(Page)，withVIPAuth(Page)
    • 页面元素级别：
  • 组件渲染性能追踪
  • 页面复用
  • 全局常量（通过接口申请），能过hoc抽离 //也能够通过全局状态治理来获取
  • 对以后页面的一些事件的默认执行做阻止（比方：阻止app的默认下拉事件）

参考资料：

React 中的高阶组件及其利用场景

高阶组件和父组件的区别？

高阶组件能够重写传入组件的state,function,props;能够对代码逻辑进行抽离，重写 ；

父组件只是管制子组件的view层；

hook

hooks原理剖析，如何实现？

参考：

[[译] 深刻 React Hook 零碎的原理](https://juejin.cn/post/684490...

hooks与 react 生命周期的关系？

hooks组件有生命周期，函数组件没有生命周期

hooks的生命周期其实就是：

  • useState
  • useEffect
  • useLayoutEffect

//hooks模仿生命周期函数，与class的生命周期有什么区别

react hook优缺点？

react hook是v16.8的新个性；

传统的纯函数组件，

react hooks设计目标，加强版的函数组件，齐全不应用‘类’，就能写出一个全功能的组件，不能蕴含状态，也不反对生命周期）， hook在无需批改组件构造的状况下复用状态逻辑；

劣势：

  • 简洁：react hooks解决了hoc和render props的嵌套问题，更加简洁 （在不应用class的状况下，应用state及react其余个性（省的把纯函数组件/其余组件改来改去））
  • 解耦：react hooks能够更不便地把UI和状态拆散，做到更彻底的解耦
  • 组合：hooks 中能够援用另外的hooks 造成新的hooks， 组合变幻无穷

  • 函数敌对：react hooks为函数组件而生，解决了类组件的几大问题

    • 解决了this的指向问题
    • 让组件更好的复用（老的class组件简短、蕴含本身的状态state）
    • 让react编程格调更取向函数式编程格调，应用function代替class

毛病（坑）：

  • 【useState数组批改】应用useState批改array的值时，不要应用push/pop/splice等间接更改数据对象的办法，否则无奈批改，应该应用解构或其余变量代替
  • 【hook执行地位】不要在循环、条件 、嵌套中调有hook，必须始终在react函数顶层应用Hook，这是因为react须要利用调用程序来正确更新相应的状态，以及调用相应的钩子函数，否则会导致调用程序不一致性，从而产生难以预料到的结果
  • 响应式的useEffect： 当逻辑较简单时，可触发屡次
  • 状态不同步：函数的运行是独立的，每个函数都有一份独立的作用域。函数的变量是保留在运行时的作用域外面，当咱们有异步操作的时候，常常会碰到异步回调的变量援用是之前的，也就是旧的（这里也能够了解成闭包场景可能援用到旧的state、props值），心愿输入最新内容的话，能够应用useRef来保留state
  • 毁坏了pureComponent、react.memo 浅比拟的性能优化成果（为了取最新的props和state,每次render都要从新创立事件处函数）
  • react.memo 并不能齐全代替 shouldComponentUpdate （因为拿不到 state change ,只针对 props change）

参考资料：
hooks中的坑，以及为什么？

hooks注意事项？

  • 不同hook中，不要应用判断（if）

react hook底层是基于链表（Array）实现，每次组件被render时，会按程序执行所有hooks,因为底层是链表，每个hook的next指向下一个hook，所有不能在不同hooks调用中应用判断条件，因为if会导致程序不正确，从而导致报错

//谬误示例function App(){const [name,setName]=useState('xz');//这里不能应用if判断if(configState){    const [age,setAage]=useState('0')}}

react hooks异步操作注意事项？

一、如何在组件加载时发动异步工作

二、如何在组件交互时发动异步工作

三、其余陷阱

参考资料：

React Hooks 异步操作踩坑记

react hooks API有哪些？

hooks（实质是一类非凡的函数，能够为函数式注入一些非凡的性能）的次要api:

根底Hook:

  • useState : 状态钩子，为函数组件提供外部状态
  • useEffect ：副作用钩子，提供了相似于componentDidMount等生命周期钩子的性能
  • useContext ：共享钩子，在组件之间共享状态，能够解决react逐层通过props传递数据；

额定的Hook:

  • useReducer: action钩子，提供了状态治理，其基本原理是通过用户在页面上发动的action，从而通过reduce办法来扭转state，从而实现页面和状态的通信，应用很像redux
  • useCallBack：把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的memoized版本，该回调函数仅在某个依赖项扭转时才会更新
  • useMemo：把""创立""函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项扭转时从新计算， 能够作为性能优化的伎俩。
  • useRef：获取组件的实例，返回一个可变的ref对象，返回的ref对象在组件的整个生命周期内放弃不变
  • useLayoutEffect： 它会在所有DOM变更后同步调用effect
  • useDebugValue

demo:

//useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);//useReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);

参考资料： Hook API 索引

useEffect 介绍？

useEffect能够让你在函数组件中执行副应用（数据获取，设置订阅，手动更改React组件中的DOM）操作

默认状况下每次函数加载完，都会执行（不要在此批改state，防止循环调用），useEffect相当于是class组件中的componentDidMount，componentDidUpdate,componentWillUnMount三个函数的组合

参数阐明：

  • 参数一：

    • type:function
    • 执行的函数

  • 参数二（可选）：监听值

    • type:array

    • 要监听的值（当监听值扭转才执行，如果只想执行一次能够传一个[]）：如果值没有扭转，就不必执行effect函数，能够传入监听的值

      • return callBack: 清理函数，执行有两种状况

        • componentWillUnmount
        • 在每次userEffect执行前(第二次开始)

分类：

一）不须要革除

react更新DOM之后运行的一些额定代码，操作实现即可疏忽

应用场景:

  • 手动变更DOM（批改title）
  • 记录日志
  • 发送埋点申请

二）须要革除

effect返回一个函数，在革除时调用 （相当于class中componentWillUnmount生命周期）

因为增加/删除订阅代码的紧密性，所以useEffect设计在同一个中央，如果effect返回一个函数，react将会在执行革除时调用它

应用场景：

  • 订阅内部数据源（避免数据泄露）
  • 设置页面题目，返回重置原题目

useEffect和useLayoutEffect区别？

  • useEffect相比componentDidMount/componentDidUpdate不同之处在于，应用useEffect调度的effect不会阻塞浏览器更新屏幕，这让利用响应更快，大多数据状况下，effect不须要同步地执行，个别情况下（例如测量布局），有独自的useLayoutEffect hook可应用，其API与useEffect雷同
  • useEffect在副应用完结之后，会提早一段时间执行，并非同步执行。遇到dom操作，最好应用userLayoutEffect
  • userLayoutEffect 外面的callback函数会在DOM更新实现后立刻执行，然而会在浏览器进行任何绘制前运行实现，阻塞了浏览器的绘制

useContext介绍?

共享状态钩子，在组件之间共享状态，能够解决react 逐层通过props传递数据的问题

应用流程（应用流程和react-redux差不多）：

  1. 创立store：通过 createContext Api
  2. 包裹整个组件：通过store中的Provider办法
  3. 注入全局变量，provider组件中
  4. 引入全局变量： 通过 useContext,传入store的名字，返回一个store对象内容
    const { useState, createContext, useContext } = React;    function App(){        //创立store        const AppContext=createContext({});        function A(){            //从store中取值            const {name}=useContext(AppContext);            return <div>A组件Name:{name}</div>        }        function B(){            //从store中取值            const {name}=useContext(AppContext);            return <div>B组件Name:{name}</div>        }        //在顶层包裹所有元素，注入到每个子组件中        return (            <AppContext.Provider value={{name:'xz'}}>                <A/>                <B/>            </AppContext.Provider>        )    }    ReactDOM.render(        <App />,        document.getElementById('app')    );

参考资料：

React Hooks 罕用钩子及基本原理

useReducer介绍？

action 钩子，提供了状态治理

实现过程(和redux差不多，但无奈提供中间件等性能 )：

  1. 用户在页面上发动action （通过dispath办法）
  2. 从而通过reducer办法来扭转state,从而实现 页面和状态的通信

如何创立本人的hooks?

实现步骤：

  1. 定义一个 hook函数，并返回一个数组（外部能够调用react其余hooks）
  2. 从自定义的hook函数中取出对象的数据，做业务逻辑解决即可

useCallBack介绍?

useState介绍？

useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的以后状态，setCounter 提供更新计数器状态的办法。

...const [count, setCounter] = useState(0);const [moreStuff, setMoreStuff] = useState(...);...const setCount = () => {    setCounter(count + 1);    setMoreStuff(...);    ...};

Fiber

什么是Fiber？是为了解决什么问题？

react fiber 是一种基于浏览器的单线程调度算法

react算法的扭转（Fiber实现的原理）：

  • 16版本之前： reconcilation 算法实际上是递归，想要中断递归是很艰难的
  • 16版本之后：开始应用循环来代替之前的递归

fiber： 一种将 recocilation（递归diff），拆分成无数据个小工作的算法；它随时可能进行，复原。进行复原的机会取决于以后的一帧（16ms）内，还有没有足够的工夫容许计算

fiber是react16中新公布的个性；

解决的问题：

react在渲染过程时，从setState开始到渲染实现，两头过程是同步；

如果渲染的组件比拟大，js执行会长工夫占有主线程，会导致页面响应度变差，使得react在动画，手势等利用中成果比拟差；

实现过程及原理（核心理念就是：time slicing）：

  1. 拆分：把渲染过程进行拆分成多个小工作
  2. 查看：每次执行完一个小工作，就去对列中查看是否有新的响应须要解决
  3. 继续执行：如果有就执行优化及更高的响应事件，如果没有继续执行后续工作

refs

react的refs有什么用，应用场景？

react 次要提供了一种规范数据流的形式来更新视图；

然而页面某些场景是脱离数据流的，这个时候就能够应用 refs;

react refs 是用来获组件援用的,取后能够调用dom的办法；

应用场景

  • 治理焦点、抉择文本或者媒体播放时，获取焦点 this,refs.inputPhone.focus();
  • 触发式动画
  • 与第三方DOM库整合

refs 注意事项：

不能在无状态组件中应用refs

Virtual DOM

什么是 Virtual DOM，它的长处？

Virtual DOM 是对 DOM的形象，实质是js对象，这个对象就是更加轻量级对DOM的形容

长处：

  • 【性能优化】操作实在DOM慢，频繁变动DOM会造成浏览器回流/重绘，虚构DOM形象的这一层，在patch（batching批处理）过程中尽可能地一次性将差别更新到DOM中，升高更新DOM的频率
  • 【数据驱动程序】应用数据驱动页面，而不是操作DOM的模式
  • 【跨平台】：node层没有DOM,然而react却能够在node层（SSR）运行

能够通过chrome的console面板中的

参考资料：

虚构DOM原理

Virtual DOM 的创立，更新，diff 过程？

虚构DOM的创立

虚构DOM是对实在DOM的形象，依据不同的需要，能够做出不同的形象，比拟 snabbdom.js 的形象形式

根本构造

  /*    * 虚构DOM 实质是一个JS对象，这个对象是更加轻量级的对DOM的形容    * */        //tagName,props,children    const element={        tagName:'ul',        props:{            id:'list'        },        children: [{            tagName:'li',            props:{                class:'item'            },            children:['item1']  //item1 只是没有包裹的子节点        }]    }

react diff 介绍？

传统的页面更新，是间接操作dom来实现的，比方原生js或者jquery，然而这种形式性能开销比拟大；

react 在初始化的时候会生成一个虚构dom,每次更新视图会比拟前后虚构dom的区别；

这个比拟办法就是diff算法，diff算法很早就曾经呈现了；然而react的diff算法有一个很大区别；

react diff 算法劣势：

传递diff算法：

  • 遍历模式：循环递规对节点进行顺次比照
  • 工夫算法复杂度： o(n^3)次方，n代表节点数

react diff 算法：

  • 遍历模式：采纳逐层比拟的形式（DOM的特点，个别很少呈现跨层级的DOM变更）
  • 工夫算法复杂度：O(n)次方；

目前社区里的两个算法库：

  • snabbdom.js（双端比拟算法）：v2.0借鉴

  • inferno.js（速度更快）： vue3.0借鉴

    • 核心思想：利用LIS（最长递增序列）做动静布局，找到最小的挪动次数

react 算法 PK inferno.js

  • react diff:

    1. 把 a,b,c挪动到他们相应的地位
    2. 再+1共三步操作
  • inferno: 间接把d挪动到最后面，一步到位
A:[a,b,c,d]B:[d,a,b,c]

同层比拟

参考资料：

diff 算法原理概述

setState

setState之后产生了什么？

  1. 【数据合并】多个setState会进行数据合拼，筹备批量更新
  2. 【数据合并到组件的以后状态】生成新的 react tree
  3. 【更新UI】比拟应用diff算法，比拟新旧 virtual dom,，最小化DOM操作
  4. 【执行回调函数】setState第二个参数

setState到底是同步还是异步？

论断：有时体现出同步，有时体现出“异步“

体现场景：

  • 同步：setTimeout，原生事件；
  • 异步：合成事件，钩子函数( 生命周期 );

react异步阐明：

setState 异步并不是说外部代码由异步代码实现，其实自身执行过程和代码都是同步的，只是合成事件和钩子函数的调用程序在更新之前；在异步更新中，屡次setState前面的值会笼罩后面的；

为什么setState不设计成同步的？

  • 放弃外部的一致性，和状态的安全性

放弃state,props.refs一致性；

  • 性能优化

react会对根据不同的调用源，给不同的 setState调用调配不同的优先级；

调用源包含：事件处理、网络申请、动画 ；

  • 更多可能性

异步获取数据后，对立渲染页面；放弃一致性，

react事件

react事件机制？

一、事件注册

  • 【组件装载】装载/更新
  • 【事件注册与卸载】能过lastProps，nextProps判断是否有新增、删除事件别离调用事件注册、卸载办法
  • 【事件存储】能过eventPluginHub, enqueuePutListener 进行事件存储
  • 【获取document对象】
  • 【事件冒泡/捕捉】依据事件名称（onClick,onCaptureClick）判断
  • 【事件监听】：addEventListener,addachEvent(兼容IE)
  • 【注册原生事件】给document注册原生事件回调为dispatchEvent (对立的事件散发机制)

二、事件存储

{onClick:{ fn1:()=>{} fn2:()=>{}},onChange:{ fn3:()=>{} fn4:()=>{}}}

三、事件触发/执行

 事件执行程序（原生事件与合成事件）

  1. dom child

    1. dom parent
    1. react child
    2. react parent
    3. dom document

四、合成事件

  1. 【调用EventPluginHub】 的 extractEvents 办法
  2. 【遍历所有EventPlugin】 用来解决不同事的工具办法
  3. 【返回事件池】在每个 EventPlugin 中依据不同的事件类型返回
  4. 【取出合成事件】从事件池中取出，如为空，则创立
  5. 【取出回调函数】依据元素nodeid(惟一标识key) 和事件类型 从listenerBink 中取出 回调函数
  6. 【返回合成事件】返回带有合成事件参数的回调函数

参考资料：

【React深刻】React事件机制

react事件与原生事件的区别？

语法区别：

  • 【事件名小驼峰】react事件命令采纳小驼峰式，而不是纯小写
  • 【事件办法函数】应用JSX语法时，你须要传入一个函数作为事件处理函数，而不是一个字符串

react事件的长处

  • 【兼容性更强】合成事件：react事件对生成事件进行了包装，解决了浏览器兼容性问题（阻止浏览器默认行为，阻止冒泡）

react事件与原生事件的执行程序？

  1. 原生事件，顺次冒泡执行
  2. react合成事件，顺次冒泡执行
  3. document 事件执行
  /*     * 执行后果：     * 1. dom child     * 2. dom parent     * 3. react child     * 4. react parent     * 5. dom document     * */

react事件与原生事件能够混用吗？

react事件与原生事件最好不要混用

起因：

  • 原生事件如果执行 stopProagation 办法，则会导致其余 react 事件生效，因为所有元素的事件将无奈冒泡到 document上

react-router

React-Router怎么设置重定向？

应用 重定向 Api : Redirect