react常见面试题

异步沙漏
• 阅读 136

react生命周期函数

初始化阶段:

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

componentWillMount:组件即将被装载、渲染到页面上

render:组件在这里生成虚拟的 DOM 节点

componentDidMount:组件真正在被装载之后

运行中状态:

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

销毁阶段:

componentWillUnmount:组件即将销毁

类组件和函数式组件有什么不同

类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态

当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 '无状态组件(stateless component)',可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

什么是受控组件

在 HTML 中,类似 <input>, <textarea> 和 <select> 这样的表单元素会维护自身的状态,并基于用户的输入来更新。当用户提交表单时,前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同,包含表单元素的组件将会在 state 中追踪输入的值,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。一个输入表单元素,它的值通过 React的这种方式来控制,这样的元素就被称为"受控元素"。

什么是高阶组件

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合,HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时,就应该考虑将代码重构为可重用的 HOC。

creatElementcloneElement有什么区别

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。它接受三个参数,第一个参数可以是一个标签名。如 div、span,或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数,皆作为组件的子组件。

React.cloneElement()与 React.createElement()相似,不同的是它传入的第一个参数是一个 React 元素,而不是标签名或组件。新添加的属性会并入原有的属性,传入到返回的新元素中,而就的子元素奖杯替换

Redux有什么缺点

当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新 render,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate 进行判断。

简述react的渲染机制

当页面一打开,就会调用render构建一棵DOM树

当数据发生变化( state | props )时,就会再渲染出一棵DOM树

此时,进行diff运算,两棵DOM树进行差异化对比,找到更新的地方进行批量改动

为什么在componentDidMount()中请求数据

componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载

react父子组件之间如何通信,兄弟组件之间如何通信

  父级传递子级:把数据挂载子组件的属性上,子组件通过this.props来接收父组件的数据

  子级传递父级:父级需要定义一个修改数据的方法,把修改数据的方法传给子组件,当子组件需要修改父级数据时,调用父级传过来的修改方法  

  兄弟组件传递:属于同一个父级,父组件分别和这两个组件传递。比如子组件A操作执行父组件方法,父组件进行修改,然后把信息传给子组件B

虚拟DOMDOM的区别

虚拟DOM不会进行排版与重绘操作

虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
React - 认识生命周期
这周开始学习React的生命周期。React的生命周期从广义上分为三个阶段:挂载、渲染、卸载.挂载卸载过程constructor()componentWillMount()componentDidMount()componentWillUnmount()更新过程componentWillRece
Easter79 Easter79
4年前
vue 生命周期的理解(created && mouted的区别)
生命周期先上图(笑skr个人~~)!(https://oscimg.oschina.net/oscnet/6d899c3576884ee9db73c0263ac9f4027e0.png)什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我
爱丽丝13 爱丽丝13
5年前
快速了解 React Hooks 原理
为了保证的可读性,本文采用意译而非直译。我们大部分React类组件可以保存状态,而函数组件不能?并且类组件具有生命周期,而函数组件却不能?React早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接16.6出来的Rea
Stella981 Stella981
4年前
React 服务端渲染完美的解决方案
最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢?什么是服务器端渲染使用React构建客户端应用程序,默认情况下,可以在浏览器中输出React组件,进行生成DOM和操作DOM。Re
Stella981 Stella981
4年前
Spring 源码分析之 bean 实例化原理
本次主要想写springbean的实例化相关的内容。创建springbean实例是springbean生命周期的第一阶段。bean的生命周期主要有如下几个步骤:<fontcolor'red'创建bean的实例</font给实例化出来的bean填充属性初始化bea通过IOC容器使用bean
Stella981 Stella981
4年前
React的单向数据流与组件间的沟通
今天来给大家总结下React的单向数据流与组件间的沟通。首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。先介绍单向数据流吧。React单向数据流:React是单向数据流,数据主要从父节点传递到子节点(通过props)。如果顶层(父级)的某个props改变了,React会重渲染所有的子节点。刚才我们提到了
Stella981 Stella981
4年前
React Portals
Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案。常见场景:对话框、悬浮卡以及提示框!定义一个模态框组件:importReact,{useRef,useEffect,}from'react';importReactDOMfrom'reactdo
Stella981 Stella981
4年前
React.js 时间组件 + 组件生命周期(更新模拟)
React是用于构建用户界面的JavaScript库,React组件使用一个名为render()的方法,接收数据作为输入,输出页面中对应展示的内容。React除了可以使用外部传入的数据以外(通过this.props访问传入数据),组件还可以拥有其内部的状态数据(通过this.state访问状态数据)。当组件的状态
Stella981 Stella981
4年前
React 第一个小游戏(井字棋)知识关键点
1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件2、render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特