面试官:说说你对React Router的理解?常用的Router组件有哪些?
面试官:说说你对React Router的理解?常用的Router组件有哪些?
一、是什么react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面
路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新
因此,可以通过前端路由可以实现单页(SPA)应用
react-router主要分成了几个不同的包:
react-router: 实现了路由的核心功能
react-router-dom: 基于 react-router,加入了在浏览器运行环境下的一些功能
react-router-native:基于 react-router,加入了 react-native 运行环境下的一些功能
react-router-config: 用于配置静态路由的工具库
二、有哪些这里主要讲述的是react-router-dom的常用API,主要是提供了一些组件:
BrowserRouter、HashRouter
Route
Link、NavLink
switch
redirect
BrowserRouter、Hash ...
面试官:说说对React refs 的理解?应用场景?
面试官:说说对React refs 的理解?应用场景?
一、是什么Refs 在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)
React 中的 Refs提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素
本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点
二、如何使用创建ref的形式有三种:
传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素
传入对象,对象是通过 React.createRef() 方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素
传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可
传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素
传入字符串只需要在对应元素或组件中ref属性
1234567 ...
面试官:说说对 React 的理解?有哪些特性?
面试官:说说对 React 的理解?有哪些特性?
一、是什么React,用于构建用户界面的 JavaScript 库,只提供了 UI 层面的解决方案
遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效
使用虚拟 DOM 来有效地操作 DOM,遵循从高阶组件到低阶组件的单向数据流
帮助我们将界面成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成整体页面
react 类组件使用一个名为 render() 的方法或者函数组件return,接收输入的数据并返回需要展示的内容
12345678910class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; }}ReactDOM.render( <HelloMessage name="Taylor" />, document.getEleme ...
面试官:说说 Real DOM 和 Virtual DOM 的区别?优缺点?
面试官:说说 Real DOM 和 Virtual DOM 的区别?优缺点?
一、是什么Real DOM,真实 DOM,意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实 DOM 结构,如下:
Virtual Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述
创建虚拟 DOM 目的就是为了更好将虚拟的节点渲染到页面视图中,虚拟 DOM 对象的节点与真实 DOM 的属性一一照应
在 React 中,JSX 是其一大特性,可以让你在 JS 中通过使用 XML 的方式去直接声明界面的 DOM 结构
123456// 创建 h1 标签,右边千万不能加引号const vDom = <h1>Hello World</h1>; // 找到 <div id="root"></div> 节点const root = document.getElementById("root"); // 把创建的 h1 标签渲染到 root 节点上ReactDOM.render ...
面试官:说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
面试官:说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
一、是什么中间件(Middleware)是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的
在上篇文章中,了解到了Redux整个工作流程,当action发出之后,reducer立即算出state,整个过程是一个同步的操作
那么如果需要支持异步操作,或者支持错误处理、日志监控,这个过程就可以用上中间件
Redux中,中间件就是放在就是在dispatch过程,在分发action进行拦截处理,如下图:
其本质上一个函数,对store.dispatch方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能
二、常用的中间件有很多优秀的redux中间件,如:
redux-thunk:用于异步操作
redux-logger:用于日志记录
上述的中间件都需要通过applyMiddlewares进行注册,作用是将所有的中间件组成一个数组,依次执行
然后作为第二个参数传入到createSt ...
面试官:说说React的事件机制?
面试官:说说React的事件机制?
一、是什么React基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等
在React中这套事件机制被称之为合成事件
合成事件(SyntheticEvent)合成事件是 React 模拟原生 DOM 事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器
根据 W3C 规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口,例如:
1const button = <button onClick={handleClick}>按钮</button>
如果想要获得原生DOM事件,可以通过e.nativeEvent属性获取
12const handleClick = (e) => console.log(e.nativeEvent);;const button = <button onClick={handleClick}>按钮</button>
从上面可以看到React事件和原生事件也非常的相似,但也有 ...
面试官:说说你在React项目是如何捕获错误的?
面试官:说说你在React项目是如何捕获错误的?
一、是什么错误在我们日常编写代码是非常常见的
举个例子,在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏,导致整个应用崩溃,这是不应该出现的现象
作为一个框架,react也有自身对于错误的处理的解决方案
二、如何做为了解决出现的错误导致整个应用崩溃的问题,react16引用了错误边界新的概念
错误边界是一种 React 组件,这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树
错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误
形成错误边界组件的两个条件:
使用了 static getDerivedStateFromError()
使用了 componentDidCatch()
抛出错误后,请使用 static getDerivedStateFromError() 渲染备用 UI ,使用 componentDidCatch() 打印错误信息,如下:
123456789101112 ...
面试官:在react中组件间过渡动画如何实现?
面试官:在react中组件间过渡动画如何实现?
一、是什么在日常开发中,页面切换时的转场动画是比较基础的一个场景
当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验
在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画
二、如何实现在react中,react-transition-group是一种很好的解决方案,其为元素添加enter,enter-active,exit,exit-active这一系列勾子
可以帮助我们方便的实现组件的入场和离场动画
其主要提供了三个主要的组件:
CSSTransition:在前端开发中,结合 CSS 来完成过渡动画效果
SwitchTransition:两个组件显示和隐藏切换时,使用该组件
TransitionGroup:将多个动画组件包裹在其中,一般用于列表中元素的动画
CSSTransition其实现动画的原理在于,当CSSTransition的in属性置为true时,CSSTransition首先会给其子组件 ...
面试官:说说对React中类组件和函数组件的理解?有什么区别?
面试官:说说对React中类组件和函数组件的理解?有什么区别?
一、类组件类组件,顾名思义,也就是通过使用ES6类的编写形式去编写组件,该类必须继承React.Component
如果想要访问父组件传递过来的参数,可通过this.props的方式去访问
在组件中必须实现render方法,在return中返回React对象,如下:
12345678class Welcome extends React.Component { constructor(props) { super(props) } render() { return <h1>Hello, {this.props.name}</h1> }}
二、函数组件函数组件,顾名思义,就是通过函数编写的形式去实现一个React组件,是React中定义组件最简单的方式
123function Welcome(props) { return <h1>Hello, {prop ...
面试官:React中组件之间如何通信?
面试官:React中组件之间如何通信?
一、是什么我们将组件间通信可以拆分为两个词:
组件
通信
回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想
相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件
而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信
组件间通信即指组件通过某种方式来传递信息以达到某个目的
二、如何通信组件传递的方式有很多种,根据传送者和接收者可以分为如下:
父组件向子组件传递
子组件向父组件传递
兄弟组件之间的通信
父组件向后代组件传递
非关系组件传递
父组件向子组件传递由于React的数据流动为单向的,父组件向子组件传递是最常见的方式
父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数
123456789function EmailInput(props) { return ( <label> Email: <input value= ...