常见的React⾯试题
1、redux中间件
答：中间件提供第三⽅插件的模式，⾃定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，⽇志输出，异常报告等功能。
react开发框架
常见的中间件： redux-logger：提供⽇志输出；redux-thunk：处理异步操作；redux-promise：处理异步操作；actionCreator的返回值是promise
2、redux有什么缺点
答：1.⼀个组件所需要的数据，必须由⽗组件传过来，⽽不能像flux中直接从store取。
2.当⼀个组件相关数据更新时，即使⽗组件不需要⽤到这个组件，⽗组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进⾏判断。
3、react组件的划分业务组件技术组件？
答：根据组件的职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。两者通过React-Redux 提供connect⽅法联系起来。
4、react⽣命周期函数
答：⼀、初始化阶段：
getDefaultProps：获取实例的默认属性
getInitialState：获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页⾯上
render：组件在这⾥⽣成虚拟的DOM节点
componentDidMount：组件真正在被装载之后
⼆、运⾏中状态：
componentWillReceiveProps：组件将要接收到属性的时候调⽤
shouldComponentUpdate：组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻⽌render调⽤，后⾯的函数不会被继续执⾏了）
componentWillUpdate：组件即将更新不能修改属性和状态
render：组件重新描绘
componentDidUpdate：组件已经更新
三、销毁阶段：
componentWillUnmount：组件即将销毁
5、react性能优化是哪个周期函数？
答：shouldComponentUpdate 这个⽅法⽤来判断是否需要调⽤render⽅法重新描绘dom。因为dom的描绘⾮常消耗性能，如果我们能在shouldComponentUpdate⽅法中能够写出更优化的dom diff算法，可以极⼤的提⾼性能。
6、为什么虚拟dom会提⾼性能?
答：虚拟dom相当于在js和真实dom中间加了⼀个缓存，利⽤dom diff算法避免了没有必要的dom操作，从⽽提⾼性能。
具体实现步骤如下：
1.⽤ JavaScript 对象结构表⽰ DOM 树的结构；然后⽤这个树构建⼀个真正的 DOM 树，插到⽂档当中；
2.当状态变更的时候，重新构造⼀棵新的对象树。然后⽤新的树和旧的树进⾏⽐较，记录两棵树差异；
把2所记录的差异应⽤到步骤1所构建的真正的DOM树上，视图就更新了。
7、diff算法?
答：1.把树形结构按照层级分解，只⽐较同级元素。
2.给列表结构的每个单元添加唯⼀的key属性，⽅便⽐较。
3.React 只会匹配相同 class 的 component（这⾥⾯的class指的是组件的名字）
4.合并操作，调⽤ component 的 setState ⽅法的时候, React 将其标记为 dirty.到每⼀个事件循环结束, React 检
5.查所有标记 dirty 的component 重新绘制.
6．选择性⼦树渲染。开发⼈员可以重写shouldComponentUpdate提⾼diff的性能。
8、react性能优化⽅案
答：1）重写shouldComponentUpdate来避免不必要的dom操作。
2）使⽤ production 版本的react.js。
3）使⽤key来帮助React识别列表中所有⼦组件的最⼩变化
9、简述flux 思想
答：Flux 的最⼤特点，就是数据的"单向流动"。
1.⽤户访问 View
2.View 发出⽤户的 Action
3.Dispatcher 收到 Action，要求 Store 进⾏相应的更新
4.Store 更新后，发出⼀个"change"事件
5.View 收到"change"事件后，更新页⾯
10、React项⽬⽤过什么脚⼿架？Mern? Yeoman?
答：Mern：MERN是脚⼿架的⼯具，它可以很容易地使⽤Mongo, Express, React and NodeJS⽣成同构JS应⽤。它最⼤限度地减少安装时间，并得到您使⽤的成熟技术来加速开发。
11、你了解React吗？
答：了解，React是facebook搞出来的⼀个轻量级的组件库，⽤于解决前端视图层的⼀些问题，就是MVC中V层的问题，它内部的Instagram ⽹站就是⽤React搭建的。
12、React解决了什么问题？
答：解决了三个问题： 1.组件复⽤问题， 2.性能问题，3.兼容性问题：
13、React的协议？
答：React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议⽐较奇葩，如果你的产品跟facebook没有竞争关系，你可以⾃由的使⽤react，但是如果有竞争关系，你的react的使⽤许可将会被取消
14、了解shouldComponentUpdate吗？
答：React虚拟dom技术要求不断的将dom和虚拟dom进⾏diff⽐较，如果dom树⽐价⼤，这种⽐较操作会⽐较耗时，因此React提供了shouldComponentUpdate这种补丁函数，如果对于⼀些变化，如果我们不希望某个组件刷新，或者刷新后跟原来其实⼀样，就可以使⽤这个函数直接告诉React，省去diff操作，进⼀步的提⾼了效率。
15、React 的⼯作原理？
答：React 会创建⼀个虚拟 DOM(virtual DOM)。当⼀个组件中的状态改变时，React ⾸先会通过 "diffing" 算法来标记虚拟 DOM 中的改变，第⼆步是调节(reconciliation)，会⽤ diff 的结果来更新 DOM。
16、使⽤ React 有何优点？
答：1.只需查看 render 函数就会很容易知道⼀个组件是如何被渲染的
2.JSX 的引⼊，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何互相引⽤的
3.⽀持服务端渲染，这可以改进 SEO 和性能
4.易于测试
5.React 只关注 View 层，所以可以和其它任何框架(如Backbone.js, Angular.js)⼀起使⽤
17、展⽰组件(Presentational component)和容器组件(Container component)之间有何不同？
答：1.展⽰组件关⼼组件看起来是什么。展⽰专门通过 props 接受数据和回调，并且⼏乎不会有⾃⾝的状态，但当展⽰组件拥有⾃⾝的状态时，通常也只关⼼ UI 状态⽽不是数据的状态。
2.容器组件则更关⼼组件是如何运作的。容器组件会为展⽰组件或者其它容器组件提供数据和⾏为(behavior)，它们会调⽤ Flux actions，并将其作为回调提供给展⽰组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源
18、类组件(Class component)和函数式组件(Functional component)之间有何不同？
答：1.类组件不仅允许你使⽤更多额外的功能，如组件⾃⾝的状态和⽣命周期钩⼦，也能使组件直接访问 store 并维持状态
2.当组件仅是接收 props，并将组件⾃⾝渲染到页⾯时，该组件就是⼀个 '⽆状态组件(stateless component)'，可以使⽤⼀个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展⽰组件
19、(组件的)状态(state)和属性(props)之间有何不同？
答：1. State 是⼀种数据结构，⽤于组件挂载时所需数据的默认值。State 可能会随着时间的推移⽽发⽣突变，但多数时候是作为⽤户事件⾏为的结果。
2. Props(properties 的简写)则是组件的配置。props 由⽗组件传递给⼦组件，并且就⼦组件⽽⾔，props 是不可变的(immutable)。组件不能改变⾃⾝的 props，但是可以把其⼦组件的 props 放在⼀起(统⼀管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。
20、应该在 React 组件的何处发起 Ajax 请求？
答：在 React 组件中，应该在 componentDidMount 中发起⽹络请求。这个⽅法会在组件第⼀次“挂载”(被添加到 DOM)时执⾏，在组件的⽣命周期中仅会执⾏⼀次。更重要的是，你不能保证在组件挂载
之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在⼀个未挂载的组件上调⽤ setState，这将不起作⽤。在 componentDidMount 中发起⽹络请求将保证这有⼀个组件可以更新了。
21、何为受控组件(controlled component)？
答；在 HTML 中，类似 <input>, <textarea> 和 <select> 这样的表单元素会维护⾃⾝的状态，并基于⽤户的输⼊来更新。当⽤户提交表单时，前⾯提到的元素的值将随表单⼀起被发送。但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输⼊的值，并且每次调⽤回调函数时，如 onChange 会更新 state，重新渲染组件。⼀个输⼊表单元素，它的值通过 React 的这种⽅式来控制，这样的元素就被称为"受控元素"。
22、在 React 中，refs 的作⽤是什么？
答：Refs 可以⽤于获取⼀个 DOM 节点或者 React 组件的引⽤。何时使⽤ refs 的好的⽰例有管理焦点/⽂本选择，触发命令动画，或者和第三⽅ DOM 库集成。你应该避免使⽤ String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所推荐的。
23、何为⾼阶组件(higher order component)？
答：⾼阶组件是⼀个以组件为参数并返回⼀个新组件的函数。HOC 运⾏你重⽤代码、逻辑和引导抽象。
最常见的可能是 Redux 的 connect 函数。除了简单分享⼯具库和简单的组合，HOC最好的⽅式是共享 React 组件之间的⾏为。如果你发现你在不同的地⽅写了⼤量代码来做同⼀件事时，就应该考虑将代码重构为可重⽤的 HOC。
24. 使⽤箭头函数(arrow functions)的优点是什么？
答：1. 作⽤域安全：在箭头函数之前，每⼀个新创建的函数都有定义⾃⾝的 this 值(在构造函数中是新对象；在严格模式下，函数调⽤中的this 是未定义的；如果函数被称为“对象⽅法”，则为基础对象等)，但箭头函数不会，它会使⽤封闭执⾏上下⽂的 this 值。
2. 简单：箭头函数易于阅读和书写
3. 清晰：当⼀切都是⼀个箭头函数，任何常规函数都可以⽴即⽤于定义作⽤域。开发者总是可以查 next-higher 函数语句，以查看 this 的值
25、为什么建议传递给 setState 的参数是⼀个 callback ⽽不是⼀个对象？
答：因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下⼀个 state。
26、除了在构造函数中绑定 this，还有其它⽅式吗？
答：可以使⽤属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认⽀持的。在回调中你可以使⽤箭头函数，但问题是每次组件渲染时都会创建⼀个新的回调。
27、怎么阻⽌组件的渲染？
答：在组件的 render ⽅法中返回 null 并不会影响触发组件的⽣命周期⽅法
28、当渲染⼀个列表时，何为 key？设置 key 的⽬的是什么？
答：Keys 会有助于 React 识别哪些 items 改变了，被添加了或者被移除了。Keys 应该被赋予数组内的元素以赋予(DOM)元素⼀个稳定的标识，选择⼀个 key 的最佳⽅法是使⽤⼀个字符串，该字符串能惟⼀地标识⼀个列表项。很多时候你会使⽤数据中的 IDs 作为 keys，当你没有稳定的 IDs ⽤于被渲染的 items 时，可以使⽤项⽬索引作为渲染项的 key，但这种⽅式并不推荐，如果 items 可以重新排序，就会导致 re-render 变慢
29、(在构造函数中)调⽤ super(props) 的⽬的是什么？
答：在 super() 被调⽤之前，⼦类是不能使⽤ this 的，在 ES2015 中，⼦类必须在 constructor 中调⽤ super()。传递 props 给 super() 的原因则是便于(在⼦类中)能在 constructor 访问 this.props。
30、何为 JSX ？
答：JSX 是 JavaScript 语法的⼀种语法扩展，并拥有 JavaScript 的全部功能。JSX ⽣产 React "元素"，你可以将任何的 JavaScript 表达式封装在花括号⾥，然后将其嵌⼊到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你可以在 if 语句和 for 循环内部使⽤ JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。
31何为 Children ？
答：在JSX表达式中，⼀个开始标签(⽐如<a>)和⼀个关闭标签(⽐如</a>)之间的内容会作为⼀个特殊的属性props.children被⾃动传递给包含着它的组件。
这个属性有许多可⽤的⽅法，包括 React.Children.map，React.Children.forEach， unt，
ly，Array。
32、在 React 中，何为 state？
答：State 和 props 类似，但它是私有的，并且完全由组件⾃⾝控制。State 本质上是⼀个持有数据，并决定组件如何渲染的对象。
33、什么原因会促使你脱离 create-react-app 的依赖？
答；当你想去配置 webpack 或 babel presets。
34、何为 redux ？
答：Redux 的基本思想是整个应⽤的 state 保持在⼀个单⼀的 store 中。store 就是⼀个简单的 javascript 对象，⽽改变应⽤ state 的唯⼀⽅式是在应⽤中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，并且不应该有任何副作⽤
35、在 Redux 中，何为 store ？
答：Store 是⼀个 javascript 对象，它保存了整个应⽤的 state。与此同时，Store 也承担以下职责：
1. 允许通过 getState() 访问 state
2. 运⾏通过 dispatch(action) 改变 state
3. 通过 subscribe(listener) 注册 listeners
4. 通过 subscribe(listener) 返回的函数处理 listeners 的注
36、何为 action ？
答；Actions 是⼀个纯 javascript 对象，它们必须有⼀个 type 属性表明正在执⾏的 action 的类型。实质上，action 是将数据从应⽤程序发送到 store 的有效载荷。
37、何为 reducer ？
答：⼀个 reducer 是⼀个纯函数，该函数以先前的 state 和⼀个 action 作为参数，并返回下⼀个 state。
38、Redux Thunk 的作⽤是什么？
答：Redux thunk 是⼀个允许你编写返回⼀个函数⽽不是⼀个 action 的 actions creators 的中间件。如果满⾜某个条件，thunk 则可以⽤来延迟 action 的派发(dispatch)，这可以处理异步 action 的派发(dispatch)。
39、何为纯函数(pure function)？
答：⼀个纯函数是⼀个不依赖于且不改变其作⽤域之外的变量状态的函数，这也意味着⼀个纯函数对于同样的参数总是返回同样的结果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。