前端日记

面试官：说说React Jsx转换成真实DOM过程？ 一、是什么react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上 在前面文章了解中，JSX通过babel最终转化成React.createElement这种形式，例如： 1234<div> < img src="avatar.png" className="profile" /> <Hello /></div> 会被bebel转化成如下： 123456789React.createElement( "div", null, React.createElement("img", { src: "avatar.png", className: "profile" }), React.createElement(Hello, null)); 在转化过程中，babe ...

面试官：说说对React Hooks的理解？解决了什么问题？ 一、是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如： 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题 由于业务变动，函数组件不得不改为类组件等等 在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作 因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理 二、有哪些上面讲到，Hooks让我们的函数组件拥有了类组件的特性，例如组件内的状态、生命周期 最常见的hooks有如下： useState useEffect 其他 useState首先给出一个例子，如下： 12345678 ...

面试官：说说React Router有几种模式？实现原理？ 一、是什么在单页应用中，一个web项目只有一个html页面，一旦页面加载完成之后，就不用因为用户的操作而进行页面的重新加载或者跳转，其特性如下： 改变 url 且不让浏览器像服务器发送请求 在不刷新页面的前提下动态改变浏览器地址栏中的URL地址 其中主要分成了两种模式： hash 模式：在url后面加上#，如http://127.0.0.1:5500/home/#/page1 history 模式：允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录 二、使用React Router对应的hash模式和history模式对应的组件为： HashRouter BrowserRouter 这两个组件的使用都十分的简单，作为最顶层组件包裹其他组件，如下所示 12345678910111213141516171819202122232425262728// 1.import { BrowserRouter as Router } from "react-router-dom" ...

面试官：说说你对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 的理解？应用场景？ 一、是什么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，用于构建用户界面的 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，真实 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中间件的理解？常用的中间件有哪些？实现原理？ 一、是什么中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的 在上篇文章中，了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作 那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件 Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理，如下图： 其本质上一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能 二、常用的中间件有很多优秀的redux中间件，如： redux-thunk：用于异步操作 redux-logger：用于日志记录 上述的中间件都需要通过applyMiddlewares进行注册，作用是将所有的中间件组成一个数组，依次执行 然后作为第二个参数传入到createSt ...

面试官：说说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-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首先会给其子组件 ...