面试官:说说对受控组件和非受控组件的理解?应用场景?
面试官:说说对受控组件和非受控组件的理解?应用场景?
一、受控组件受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据
举个简单的例子:
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的原理是什么?
面试官:说说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的? 项目结构是如何划分的?
面试官:你在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 ...
面试官:说说react中引入css的方式有哪几种?区别?
面试官:说说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 ...
面试官:说说你对immutable的理解?如何应用在react项目中?
面试官:说说你对immutable的理解?如何应用在react项目中?
一、是什么Immutable,不可改变的,在计算机中,即指一旦创建,就不能再被更改的数据
对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象
Immutable 实现的原理是 Persistent Data Structure(持久化数据结构):
用一种数据结构来保存数据
当数据被修改时,会返回一个对象,但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费
也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变,同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享)
如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享
如下图所示:
二、如何使用使用Immutable对象最主要的库是immutable.js
immutable.js 是一个完全独立的库,无论基于什么框架都可以用它
其出现场景在于弥补 Javascript 没有不可变数据 ...
面试官:说说你是如何提高组件的渲染效率的?在React中如何避免不必要的render?
面试官:说说你是如何提高组件的渲染效率的?在React中如何避免不必要的render?
一、是什么react 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新,大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常
复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,避免不必要的渲染则是业务中常见的优化手段之一
二、如何做在之前文章中,我们了解到render的触发时机,简单来讲就是类组件通过调用setState方法, 就会导致render,父组件一旦发生render渲染,子组件一定也会执行render渲染
从上面可以看到,父组件渲染导致子组件渲染,子组件并没有发生任何改变,这时候就可以从避免无谓的渲染,具体实现的方式有如下:
shouldComponentUpdate
PureComponent
React.memo
shouldComponentUpdate通过shouldComponentUpdate生命周期函数来比对 state 和 props,确定是否要重新渲染
默认情况下返回true表示重新渲染,如 ...
面试官:React中的key有什么作用?
面试官:React中的key有什么作用?
一、是什么首先,先给出react组件中进行列表渲染的一个示例:
1234567891011121314151617181920const data = [ { id: 0, name: 'abc' }, { id: 1, name: 'def' }, { id: 2, name: 'ghi' }, { id: 3, name: 'jkl' }];const ListItem = (props) => { return <li>{props.name}</li>;};const List = () => { return ( <ul> {data.map((item) => ( <ListItem name={item ...
面试官:说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?
面试官:说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?
一、是什么在以前文章中,我们了解到生命周期定义
生命周期(Life Cycle)的概念应用很广泛,特别是在经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程
跟Vue一样,React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
二、流程这里主要讲述react16.4之后的生命周期,可以分成三个阶段:
创建阶段
更新阶段
卸载阶段
创建阶段创建阶段主要分成了以下几个生命周期方法:
constructor
getDerivedStateFromProps
render
componentDidMount
constructor实例过程中自动调用的方法,在方法内部通过super关键字获取来自父组件的props
在该方法中,通常的操作为初始化state状态或者在this上挂载方法
getDerivedStateFromProps该方法是新增的生命周期方法,是一个静态的方法,因此不能访 ...
面试官:说说你对Redux的理解?其工作原理?
说说你对Redux的理解?其工作原理?
一、是什么React是用于构建用户界面的,帮助我们解决渲染DOM的过程
而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享
如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程
这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的
redux就是一个实现上述集中管理的容器,遵循三大基本原则:
单一数据源
state 是只读的
使用纯函数来执行修改
注意的是,redux并不是只应用在react中,还与其他界面库一起使用,如Vue
二、工作原理redux 要求我们把数据都放在 store 公共存储空间
一个组件改变了 store 里的数据内容,其他组件就能感知到 store 的变化,再来取数据,从而间接的实现了这些数据传递的功能
工作流程图如下所示:
根据流程图,可以想象, ...
面试官:说说React render方法的原理?在什么时候会被触发?
面试官:说说React render方法的原理?在什么时候会被触发?
一、原理首先,render函数在react中有两种形式:
在类组件中,指的是render方法:
12345class Foo extends React.Component { render() { return <h1> Foo </h1>; }}
在函数组件中,指的是函数组件本身:
123function Foo() { return <h1> Foo </h1>;}
在render中,我们会编写jsx,jsx通过babel编译后就会转化成我们熟悉的js格式,如下:
1234567return ( <div className='cn'> <Header> hello </Header> <div> start </div> Right Reserve </div ...