资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

一些关于React的常见面试题(分享)

1、redux中间件

成都创新互联长期为超过千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为新化企业提供专业的成都网站制作、做网站,新化网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

答:中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。

常见的中间件: 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 检查所有标记 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 中,类似 ,