首页 > 编程知识 正文

react面试题及答案2020,js前端面试题

时间:2023-05-03 11:21:22 阅读:26795 作者:2965

react组件如何进行通信

父组件与子组件通信:使用props

子组件与父组件通信:使用props回调

跨层次的组件通信:使用context对象

非嵌套组件间通信:使用事件订阅

jsx的本质是什么

jsx实际上是语法糖,开发环境将jsx编译成js代码。 jsx的写作方式大大降低了学习成本和编码工作量

上下文是什么,是什么用途

在react APP应用程序中,数据始终通过props自上而下传递。 对于某些类型的属性(如区域偏好、UI主题等),这种方法非常复杂。Context 可以共享对于一个组件树而言是“全局”的数据。这样就不必显式地通过组件树的逐层传递 props

setState是同步还是异步?

可能同步,也可能异步。 准确地说,在可以检测到React内部机制的位置,setState是异步的。在不能检测到React的位置,例如setInterval、setTimeout,setState是同步更新的

什么是亚纯函数

函数的返回值只依赖于参数,在执行过程中没有副作用。

react在哪个生命周期中启动ajax

在componentDidMount生命周期中调用

渲染,为什么要用key?

key是赋予每个虚拟dom的唯一id,可以依赖key,从而更准确、更快地获得旧虚拟dom的相应新虚拟dom节点。

函数组件和class组件的区别

函数纯函数、输入props、输出jsx

函数组件没有实例、生命周期或状态

函数组件无法扩展其他方法

class创建的组件。 有自己的专用数据(this.state )和生命周期

什么是受控制的组件

简而言之,输入中的值由状态值控制

何时使用异步组件

大型组件的加载路由异步加载资源异步加载

多个组件有共同的逻辑,如何摆脱

HOC,上层组件的上层组件不是功能,而是模式

Render Props的核心思想:在单个函数中将class组件的state作为props传递给纯函数组件

redux如何异步请求ajax请求

在action异步函数中发送ajax请求

react-router如何配置懒惰加载

lazyload-loader方式导入shop from lazy ()=import () )./src/view/shop () ) ) ) );

箭头函数方法component : resolve=require ([ ' @/component/log in ' ],resolve ) ) ) ) ) ) ) ) )。

纯组件和组件有什么区别

React.PureComponent与React.Component几乎相同,但React.PureComponent通过props与state的浅对比实现shouldComponentUpate ()。

在纯组件中,如果数据结构相对复杂,深层数据不匹配可能会导致错误的否定判断,从而导致接口无法更新。

react和dom事件的区别

1 .事件是SyntheticEvent组合事件对象,模拟DOM事件的所有能力。 2. event.nativeEvent是本机事件对象。 3 .所有事件都装载在document上。 与性能4 .和DOM事件不同,与Vue事件不同,这是为了优化react的性能

使用shouldComponentUpdate优化组件

shouldComponentUpdate的实现方式,shouldComponentUpdate仍然在比较prop与用于上一次渲染的prop的基础上,采用尽可能简单的方法进行所谓的“浅层比较”。 简单地说,用JavaScript的===操作符进行比较。 如果prop类型为字符串或数字,则如果值相同,则“浅比较”也认为两者相同。 但是,如果prop类型是复杂对象,则“浅比较”方法只看这两个prop是否是同一对象的引用。 否则,即使是这两个对象中的引用

react和vue的区别

1、vue是响应式的数据双向绑定系统,而react是单向数据流,没有双向绑定。 2、vue语法简单,适合小项目的编写,而react适合Web端和原生App的开发,重点是大App应用。 3、vue具有更快的渲染速度和更小的体积,react具有更大的生态圈,能够带来更多的工具支持。 4、模板渲染方式差异在表层,模板语法不同,React用JSX渲染模板。 Vue以扩展的HTML语法呈现,但实际上这只是表面现象,React不需要依赖于JSX。 在深层,模板的原理不同,那才是

是他们的本质区别:React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的,更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现对这一点,这样的做法显得有些独特,会把HTML弄得很乱。

21.react vdom和vue vdom区别

react和vue他们两个在渲染虚拟dom的过程其实有点相互模仿的。当render函数渲染完毕后。他们共同使用了diff算法,来更新虚拟dom。区别:vue 利用双端优化,vue3有最长递增子序列react 利用fiber,时间切片,将树变为链表

23调用 setState 之后发生了什么?

在代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

24react 生命周期函数

初始化阶段:

getDefaultProps:获取实例的默认属性

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

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

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

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

运行中状态:

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

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

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

render:组件重新描绘

componentDidUpdate:组件已经更新

销毁阶段:

componentWillUnmount:组件即将销毁

25.shouldComponentUpdate 是做什么的,(react 性能优化是哪个周期函数?)

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。

26.为什么虚拟 dom 会提高性能?(必考)

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。

27.react diff 原理(常考,大厂必考)

把树形结构按照层级分解,只比较同级元素。

给列表结构的每个单元添加唯一的 key 属性,方便比较。

React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)

合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

28.React 中 refs 的作用是什么?

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

29.展示组件(Presentational component)和容器组件(Container component)之间有何不同

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。

容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 谦让的丝袜 actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。

30.类组件(Class component)和函数式组件(Functional component)之间有何不同

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

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

31.(组件的)状态(state)和属性(props)之间有何不同

State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

33.何为高阶组件(higher order component)

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

34.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state。

33除了在构造函数中绑定 this,还有其它方式吗

你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持的。在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。

35.(在构造函数中)调用 super(props) 的目的是什么

在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

36.应该在 React 组件的何处发起 Ajax 请求

在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

37.描述事件在 React 中的处理方式。

为了解决跨浏览器兼容性问题,您的 React 中的事件处理程序将传递 SyntheticEvent 的实例,它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具有相同的接口,除了它们在所有浏览器中都兼容。有趣的是,React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的,这也意味着在更新 DOM 时,React 不需要担心跟踪事件监听器。

39.React 中有三种构建组件的方式

React.createClass()、ES6 class 和无状态函数。

40.react 组件的划分业务组件技术组件?

根据组件的职责通常把组件分为 UI 组件和容器组件。

UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。

两者通过 React-Redux 提供 connect 方法联系起来。

41React 项目用过什么脚手架(本题是开放性题目)

creat-react-app Yeoman 等

42了解 redux 么,说一下 redux 把

redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer,工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据,flux 也是用来进行数据操作的,有四个组成部分 action,dispatch,view,store,工作流程是 view 发出一个 action,派发器接收 action,让 store 进行数据更新,更新完成以后 store 发出 change,view 接受 change 更新视图。Redux 和 谦让的丝袜 很像。主要区别在于 谦让的丝袜 有多个可以改变应用状态的 store,在 谦让的丝袜 中 dispatcher 被用来传递数据到注册的回调事件,但是在 redux 中只能定义一个可更新状态的 store,redux 把 store 和 Dispatcher 合并,结构更加简单清晰

43redux 有什么缺点

一个组件所需要的数据,必须由父组件传过来,而不能像 flux 中直接从 store 取。

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

44.setState在哪个生命周期不能用?

setState 是一个异步方法,一个生命周期内所有的 setState 方法会合并操作

componentWillMount 里 setState 会和 初始化 state 合并执行,因此这是无意义的 setState componentDidMount 中 setState 会导致渲染两遍,应该尽量避免。除了获取DOM元素位置或者宽高等 componentWillUnmount 中 setState 不会更新 state,是不生效而且无意义的 shouldComponentUpdate 或 componentWillUpdate 里调用 setState 会再次触发这两个函数,然后在两个函数又触发了 setState,死循环.. componentDidUpdate 执行 setState 渲染两遍,如非必须,尽量避免 componentWillReceiveProps 中 setState,不会造成二次渲染,可以放心setState

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。