前端日记

面试官：在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项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象 作为一个框架，react也有自身对于错误的处理的解决方案 二、如何做为了解决出现的错误导致整个应用崩溃的问题，react16引用了错误边界新的概念 错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树 错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误 形成错误边界组件的两个条件： 使用了 static getDerivedStateFromError() 使用了 componentDidCatch() 抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息，如下： 123456789101112 ...

面试官：说说对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中组件之间如何通信？ 一、是什么我们将组件间通信可以拆分为两个词： 组件 通信 回顾Vue系列的文章，组件是vue中最强大的功能之一，同样组件化是React的核心思想 相比vue，React的组件更加灵活和多样，按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的，广义上，任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二、如何通信组件传递的方式有很多种，根据传送者和接收者可以分为如下： 父组件向子组件传递 子组件向父组件传递 兄弟组件之间的通信 父组件向后代组件传递 非关系组件传递 父组件向子组件传递由于React的数据流动为单向的，父组件向子组件传递是最常见的方式 父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数 123456789function EmailInput(props) { return ( <label> Email: <input value= ...

面试官：说说对受控组件和非受控组件的理解？应用场景？ 一、受控组件受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据 举个简单的例子： 123456789class TestComponent extends React.Component { constructor (props) { super(props); this.state = { username: 'lindaidai' }; } render () { return <input name="username" value={this.state.username} /> }} 这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是input标签是一个可读的状态 这是因为value被this.state.username所控制住。当用户输入新的内容时，this.state.username并不会自动更 ...

面试官：说说React diff的原理是什么？ 一、是什么跟Vue一致，React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，使我们的页面的构建效率提到了极大的提升 而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处 传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，react将算法进行一个优化，复杂度姜维O(n)，两者效率差距如下图： 二、原理react中diff算法主要遵循三个层级的策略： tree层级 conponent 层级 element 层级 tree层级DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较 只有删除、创建操作，没有移动操作，如下图： react发现新树中，R节点下没有了A，那么直接删除A，在D节点下创建A以及下属节点 上述操作中，只有删除和创建操作 conponent层级如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的 当component D 换成了compo ...

面试官：你在React项目中是如何使用Redux的? 项目结构是如何划分的？ 一、背景在前面文章了解中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库 如果将两者连接在一起，可以使用官方推荐react-redux库，其具有高效且灵活的特性 react-redux将组件分成： 容器组件：存在逻辑处理 UI 组件：只负责现显示和交互，内部不处理逻辑，状态由外部控制 通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store 其他组件通过订阅store中的状态state来更新自身的视图 二、如何做使用react-redux分成了两大核心： Provider connection Provider在redux中存在一个store用于存储state，如果将这个store存放在顶层元素中，其他组件都被包裹在顶层元素之上 那么所有的组件都能够受到redux的控制，都能够获取到redux中的数据 使用方式如下： 123<Provider store = {store}> <App ...

面试官：说说你对immutable的理解？如何应用在react项目中？ 一、是什么Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据 对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象 Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）: 用一种数据结构来保存数据 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费 也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享） 如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享 如下图所示： 二、如何使用使用Immutable对象最主要的库是immutable.js immutable.js 是一个完全独立的库，无论基于什么框架都可以用它 其出现场景在于弥补 Javascript 没有不可变数据 ...

面试官：说说react中引入css的方式有哪几种？区别？ 一、是什么组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则： 可以编写局部css，不会随意污染其他组件内的原生； 可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式； 支持所有的css特性：伪类、动画、媒体查询等； 编写起来简洁方便、最好符合一贯的css风格特点 在这一方面，vue使用css起来更为简洁： 通过 style 标签编写样式 scoped 属性决定编写的样式是否局部有效 lang 属性设置预处理器 内联样式风格的方式来根据最新状态设置和改变css 而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊 二、方式常见的CSS引入方式有以下： 在组件内直接使用 组件中引入 .css 文件 组件中引入 .module.css 文件 CSS in JS 在组件内直接使用直接在组件中书写css样式，通过style属性直接引入，如下： 1234567891011121314151617181920212223242526import R ...

面试官：说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？ 一、是什么react 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新，大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常 复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，避免不必要的渲染则是业务中常见的优化手段之一 二、如何做在之前文章中，我们了解到render的触发时机，简单来讲就是类组件通过调用setState方法， 就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染 从上面可以看到，父组件渲染导致子组件渲染，子组件并没有发生任何改变，这时候就可以从避免无谓的渲染，具体实现的方式有如下： shouldComponentUpdate PureComponent React.memo shouldComponentUpdate通过shouldComponentUpdate生命周期函数来比对 state 和 props，确定是否要重新渲染 默认情况下返回true表示重新渲染，如 ...