★★★ React 事件绑定原理

★★★ React中的 setState 缺点是什么呢

★★★ React组件通信如何实现

★★★ 类组件和函数组件的区别

★★★ 请你说说React的路由是什么？

★★★★★ React有哪些性能优化的手段？

★★★★ React hooks 用过吗，为什么要用？

★★★★ 虚拟DOM的优劣如何？实现原理？

★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？

★★★ 聊聊 Redux 和 Vuex 的设计思想

★★★ React中不同组件之间如何做到数据交互？

★★★ React中refs的作用是什么？

★★★★ 请列举react生命周期函数。

★★★ 组件绑定和js原生绑定事件哪个先执行？

★★ fetch的延时操作

★★ A 组件嵌套 B 组件，生命周期执行顺序

★★★ diff 和 Key 之间的联系

★★★ 虚拟 dom 和原生 dom

★★★★ 新出来两个钩子函数？和砍掉的will系列有啥区别？

★★★ react中如何打包上传图片文件

★★★ 对单向数据流和双向数据绑定的理解，好处？

★★ React 组件中 props 和 state 有什么区别？

★★ react中组件分为那俩种？

★★ react中函数组件和普通组件的区别？

★★★★ react中 setState 之后做了什么？

★★★★ redux本来是同步的，为什么它能执行异步代码？中间件的实现原理是什么？

★★★★ 列举重新渲染 render 的情况

★★★ React 按需加载

★★★ React 实现目录树（组件自身调用自身）

★★★ React组件生命周期按装载，更新，销毁三个阶段分别都有哪些？

★★★★★ 调用this.setState之后，React都做了哪些操作？怎么拿到改变后的值？

★★★ 如果我进行三次setState会发生什么

★★★ 循环执行setState组件会一直重新渲染吗？为什么？

★★★ 渲染一个react组件的过程

★★★ React类组件，函数组件，在类组件修改组件对象会使用。

★★★★ 类组件怎么做性能优化？函数组件怎么做性能优化？

★★★ useEffect 和 useLayoutEffect 的区别

★★★ hooks 的使用有什么注意事项

★★★ 纯函数有什么特点，副作用函数特点

★★ React 中 refs 干嘛用的？如何创建 refs？

★★★ 在构造函数调用super并将props作为参数传入的作用是啥？

★★★ 如何 React.createElement ？

★★★ 讲讲什么是 JSX ？

★★★ 为什么不直接更新state呢？

★★★ React 组件生命周期有哪些不同阶段？React 的生命周期方法有哪些？

★★★ 这三个点(...)在 React 干嘛用的？

★★★ React 中的useState()是什么？

★★★ React 中的StrictMode(严格模式)是什么？

★★★ 为什么类方法需要绑定到类实例？

★★★★ 什么是 prop drilling，如何避免？

★★ 描述 Flux 与 MVC？

★★★ 这段代码有什么问题吗？

this.setState((prevState, props) => {return {streak: prevState.streak + props.count}})

★★★★ 什么是 React Context?

★★★★★ 什么是 React Fiber?

★★★ 如何在 React 的 Props 上应用验证？

★★ 在 React 中使用构造函数和 getInitialState 有什么区别？

★★★ 如何有条件地向 React 组件添加属性？

★★★★ Hooks 会取代render props和高阶组件吗？

★★★ 如何避免组件的重新渲染？

★★★ 什么是纯函数？

★★★★ 当调用setState时，Reactrender是如何工作的？

★★★ 如何避免在React重新绑定实例？

★★★ 在js原生事件中 onclick 和 jsx 里 onclick 的区别

★★★★ diff复杂度原理及具体过程画图

★★★★ shouldComponentUpdate的作用是什么？

★★★ React组件间信息传递

★★★ React状态管理工具有哪些？redux actionCreator都有什么？

★★★★ 什么是高阶组件、受控组件及非受控组件？都有啥区别

★★★ vuex 和 redux 的区别？

★★★ Redux遵循的三个原则是什么？

★★★ React中的keys的作用是什么？

★★★ redux中使用setState不能立刻获取值，怎么办

★★ 什么是JSX

★★★ React新老版生命周期函数

★★★★ vue react都怎么检测数据变化

★★★ React中怎么让 setState 同步更新？

★★★★ 什么是 immutable？为什么要使用它？

★★★ 为什么不建议在 componentWillMount 做AJAX操作

★★★★ 如何在React中构建一个弹出的遮罩层

★★★★★ React中的Context的使用

★★★★ React路由懒加载的实现

★★★★ React-router-dom内部是怎么样实现的，怎么做路由守卫？

★★★★ redux中sages和thunk中间件的区别，优缺点

★★ 为什么说React是view（视图层）

★★★ 怎么用useEffect模拟生命周期函数？

★★★ useCallback是干什么的？使用useCallback有什么好处？

★★★ 能简单说一下redux-sage的使用流程吗？

★★★★ React复用组件的状态和增强功能的方法

★★★ redux 和 mobx 的区别

★★★ react中如何实现命名插槽

★★★ 简单说一下，如何在react中实现瀑布流加载？（左右两列的一个商品长列表）

★★★★★ 简述一下 memoization

React.js 面试真题

★★★ React 事件绑定原理

/*一、react并没有使用原生的浏览器事件，而是在基于Virtual DOM的基础上实现了合成事件，采用小驼峰命名法，默认的事件传播方式是冒泡，如果想改为捕获的话，直接在事件名后面加上Capture即可；事件对象event也不是原生事件对象，而是合成对象，但通过nativeEvent属性可以访问原生事件对象；二、react合成事件主要分为以下三个过程：1、事件注册在该阶段主要做了两件事：document上注册、存储事件回调。所有事件都会注册到document上，拥有统一的回调函数dispatchEvent来执行事件分发，类似于document.addEventListener("click",dispatchEvent)。register:addEventListener-clickaddEventListener-changelistenerBank:{click: {key1: fn1, key2: fn2},change: {key1: fn3, key3: fn4}}2、事件合成事件触发后，会执行一下过程：（1）进入统一的事件分发函数dispatchEvent；（2）找到触发事件的 ReactDOMComponent；（3）开始事件的合成；—— 根据当前事件类型生成指定的合成对象—— 封装原生事件和冒泡机制—— 查找当前元素以及他所有父级—— 在listenerBank根据key值查找事件回调并合成到 event(合成事件结束)3、批处理批量处理合成事件内的回调函数*/

★★★ React中的 setState 缺点是什么呢

/*setState执行的时候可以简单的认为，隶属于原生js执行的空间，那么就是属于同步，被react处理过的空间属于异步，这其实也是一种性能的优化，如果多次使用setState修改值，那么在异步中会先进行合并，再进行渲染，降低了操作dom的次数，具体如下：（1）setState 在合成事件和钩子函数中是“异步”的，在原生事件和 `setTimeout` 中都是同步的。（2）setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。（3）setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。（4）正是由于setState存在异步的机制，如果setState修改值的时候依赖于state本身的值，有时候并不可靠，这时候我们需要传入一个回调函数作为其入参，这个回调函数的第一个参数为更新前的state值。*/

★★★ React组件通信如何实现

/*react本身:(1)props——父组件向子组件通过props传参(2)实例方法——在父组件中可以用 refs 引用子组件，之后就可以调用子组件的实例方法了(3)回调函数——用于子组件向父组件通信，子组件调用props传递过来的方法(4)状态提升——两个子组件可以通过父组件定义的参数进行传参(5)Context上下文——一般用作全局主题(6)Render Props——渲染的细节由父组件控制状态管理:(1) mobx/redux/dva——通过在view中触发action，改变state，进而改变其他组件的view*/

★★★ 类组件和函数组件的区别

/* （1）语法上：函数组件是一个函数，返回一个jsx元素，而类组件是用es6语法糖class定义，继承component这个类（2）类组件中可以通过state进行状态管理，而在函数组件中不能使用setState()，在react16.8以后，函数组件可以通过hooks中的useState来模拟类组件中的状态管理；（3）类组件中有一系列的生命周期钩子函数，在函数组件中也需要借助hooks来使用生命周期函数；（4）类组件能够捕获**最新**的值（永远保持一致），这是因为当实例的props属性发生修改时，class组件能够直接通过this捕获到组件最新的props；而函数式组件是捕获**渲染**所使用的值，已经因为javascript**闭包**的特性，之前的props参数保存在内存之中，无法从外部进行修改。*/

★★★ 请你说说React的路由是什么？

/*路由分为前端路由和后端路由，后端路由是服务器根据用户发起的请求而返回不同内容，前端路由是客户端根据不同的URL去切换组件；在web应用前端开发中，路由系统是最核心的部分，当页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。react生态中路由通常是使用react-router来进行配置，其主要构成为：（1）Router——对应路由的两种模式，包括<BrowsersRouter>与<HashRouter>；（2）route matching组件——控制路径对应的显示组件，可以进行同步加载和异步加载，<Route>；（3）navigation组件——用做路由切换和跳转，<Link>；BrowserRouter与HashRouter的区别：（1）底层原理不一样：BrowserRouter使用的是H5的history API，不兼容IE9及以下版本；HashRouter使用的是URL的哈希值；（2）path表现形式不一样：BrowserRouter的路径中没有#,例如：localhost:3000/demo/test；HashRouter的路径包含#,例如：localhost:3000/#/demo/test；（3）刷新后对路由state参数的影响：BrowserRouter没有任何影响，因为state保存在history对象中；HashRouter刷新后会导致路由state参数的丢失；*/

★★★★★ React有哪些性能优化的手段？

/*1、使用纯组件；2、使用 React.memo 进行组件记忆（React.memo 是一个高阶组件），对于相同的输入，不重复执行；3、如果是类组件，使用 shouldComponentUpdate（这是在重新渲染组件之前触发的其中一个生命周期事件）生命周期事件，可以利用此事件来决定何时需要重新渲染组件；4、路由懒加载；5、使用 React Fragments 避免额外标记；6、不要使用内联函数定义（如果我们使用内联函数，则每次调用“render”函数时都会创建一个新的函数实例）；7、避免在Willxxx系列的生命周期中进行异步请求，操作dom等；8、如果是类组件，事件函数在Constructor中绑定bind改变this指向；9、避免使用内联样式属性；10、优化 React 中的条件渲染；11、不要在 render 方法中导出数据；12、列表渲染的时候加key；13、在函数组件中使用useCallback和useMemo来进行组件优化，依赖没有变化的话，不重复执行；14、类组件中使用immutable对象；*/

★★★★ React hooks 用过吗，为什么要用？

/*Hooks 是React在16.8版本中出的一个新功能，本质是一种函数，可以实现组件逻辑复用，让我们在函数式组件中使用类组件中的状态、生命周期等功能，hooks的名字都是以use开头。react：1、useState——创建状态接收一个参数作为初始值；返回一个数组，第一个值为状态，第二个值为改变状态的函数2、useEffect——副作用（数据获取、dom操作影响页面——在渲染结束之后执行(1)第一个参数为函数，第二个参数为依赖列表，只有依赖更新时才会执行函数；返回一个函数，当页面刷新的时候先执行返回函数再执行参数函数(2)如果不接受第二个参数，那么在第一次渲染完成之后和每次更新渲染页面的时候，都会调用useEffect的回调函数3、useRef返回一个可变的ref对象，此索引在整个生命周期中保持不变。可以用来获取元素或组件的实例，用来做输入框的聚焦或者动画的触发。 4、useMemo——优化函数组件中的功能函数——在渲染期间执行（1）接收一个函数作为参数，同样接收第二个参数作为依赖列表，返回值可以是任何，函数、对象等都可以（2）这种优化有助于避免在每次渲染时都进行高开销的计算，仅会在某个依赖项改变时才重新计算 5、useContext——获取上下文注入的值 (1)接受一个context 对象，并返回该对象<MyContext.Provider> 元素的 value值；const value = useContext(MyContext)； 6、useLayoutEffect——有DOM操作的副作用——在DOM更新之后执行和useEffet类似，但是执行时机不同，useLayoutEffect在DOM更新之后执行࿰