前端常见react面试题合集
React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代
这三者是目前react解决代码复用的主要方式：
- 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。
- render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
- 通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地，（例如，一个虚拟滚动条组件或许会有一个 renderltem 属性，或是一个可见的容器组件或许会有它自己的 DOM 结构）。但在大部分场景下，Hook 足够了，并且能够帮助减少嵌套。
（1）HOC 官方解释∶
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
简言之，HOC是一种组件的设计模式，HOC接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。
// hoc的定义
function withSubscription(WrappedComponent, selectData) {return class extends React.Component {constructor(props) {super(props);this.state = {data: selectData(DataSource, props)};}// 一些通用的逻辑处理render() {// ... 并使用新数据渲染被包装的组件!return this.state.data} {...this.props} />;}};// 使用
const BlogPostWithSubscription = withSubscription(BlogPost,(DataSource, props) => DataSource.getBlogPost(props.id)); HOC的优缺点∶
- 优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。
- 缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖
（2）Render props 官方解释∶
"render prop"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
具有render prop 的组件接受一个返回React元素的函数，将render的渲染逻辑注入到组件内部。在这里，"render"的命名可以是任何其他有效的标识符。
// DataProvider组件内部的渲染逻辑如下
class DataProvider extends React.Components {state = {name: 'Tom'}render() {return (共享数据组件自己内部的渲染逻辑
{ this.props.render(this.state) } );}
}// 调用方式
data => (Hello {data.name}
)}/> 由此可以看到，render props的优缺点也很明显∶
- 优点：数据共享、代码复用，将组件内的state作为props传递给调用者，将渲染逻辑交给调用者。
- 缺点：无法在 return 语句外访问数据、嵌套写法不够优雅
（3）Hooks 官方解释∶
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义hook，可以复用代码逻辑。
// 自定义一个获取订阅数据的hook
function useSubscription() {const data = DataSource.getComments();return [data];
}
//
function CommentList(props) {const {data} = props;const [subData] = useSubscription();...
}
// 使用
以上可以看出，hook解决了hoc的prop覆盖的问题，同时使用的方式解决了render props的嵌套地狱的问题。hook的优点如下∶
- 使用直观；
- 解决hoc的prop 重名问题；
- 解决render props 因共享数据 而出现嵌套地狱的问题；
- 能在return之外使用数据的问题。
需要注意的是：hook只能在组件顶层使用，不可在分支语句中使用。、
组件通信的方式有哪些
- ⽗组件向⼦组件通讯: ⽗组件可以向⼦组件通过传 props 的⽅式，向⼦组件进⾏通讯
- ⼦组件向⽗组件通讯: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通讯，此props为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中
- 兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信
- 跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如当前认证的⽤户、主题或⾸选语⾔，对于跨越多层的全局数据通过 Context 通信再适合不过
- 发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引⼊event模块进⾏通信
- 全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态
react 的优化
shouldcomponentUpdate pureCompoment setState
- CPU的瓶颈（当有大量渲染任务的时候，js线程和渲染线程互斥）
- IO的瓶颈 就是网络（如何在网络延迟客观存在的 情况下，减少用户对网络延 迟的感知）（Code Splitting • Data Fetching）比如react.lazy（组件懒加载） suspense(分包在网络上，用的时候在获取)
- Virtual DOM 快么（Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图 进行合理、高效的更新。）
展示组件(Presentational component)和容器组件(Container component)之间有何不同?
useEffect 与 useLayoutEffect 的区别
（1）共同点
- 运用效果： useEffect 与 useLayoutEffect 两者都是用于处理副作用，这些副作用包括改变 DOM、设置订阅、操作定时器等。在函数组件内部操作副作用是不被允许的，所以需要使用这两个函数去处理。
- 使用方式： useEffect 与 useLayoutEffect 两者底层的函数签名是完全一致的，都是调用的 mountEffectImpl方法，在使用上也没什么差异，基本可以直接替换。
（2）不同点
- 使用场景： useEffect 在 React 的渲染过程中是被异步调用的，用于绝大多数场景；而 useLayoutEffect 会在所有的 DOM 变更之后同步调用，主要用于处理 DOM 操作、调整样式、避免页面闪烁等问题。也正因为是同步处理，所以需要避免在 useLayoutEffect 做计算量较大的耗时任务从而造成阻塞。
- 使用效果： useEffect是按照顺序执行代码的，改变屏幕像素之后执行（先渲染，后改变DOM），当改变屏幕内容时可能会产生闪烁；useLayoutEffect是改变屏幕像素之前就执行了（会推迟页面显示的事件，先改变DOM后渲染），不会产生闪烁。useLayoutEffect总是比useEffect先执行。
在未来的趋势上，两个 API 是会长期共存的，暂时没有删减合并的计划，需要开发者根据场景去自行选择。React 团队的建议非常实用，如果实在分不清，先用 useEffect，一般问题不大；如果页面有异常，再直接替换为 useLayoutEffect 即可。
什么是受控组件和非受控组件
- 受状态控制的组件，必须要有onChange方法，否则不能使用 受控组件可以赋予默认值（官方推荐使用 受控组件） 实现双向数据绑定
class Input extends Component{constructor(){super();this.state = {val:'100'}}handleChange = (e) =>{ //e是事件源let val = e.target.value;this.setState({val});};render(){return (this.state.val} onChange={this.handleChange}/>{this.state.val})}
}- 非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOM
class Sum extends Component{constructor(){super();this.state = {result:''}}//通过ref设置的属性 可以通过this.refs获取到对应的dom元素handleChange = () =>{let result = this.refs.a.value + this.b.value;this.setState({result});};render(){return (this.handleChange}>{/*x代表的真实的dom,把元素挂载在了当前实例上*/}(x)=>{this.b = x;}}/>{this.state.result})}
}
如何配置 React-Router 实现路由切换
（1）使用
路由匹配是通过比较
// when location = { pathname: '/about' }
About}/> // renders Contact}/> // renders null
Always}/> // renders （2）结合使用
Home} />About} />Contact} />
（3）使用 、 组件
组件来在你的应用程序中创建链接。无论你在何处渲染一个 ，都会在应用程序的 HTML 中渲染锚（）。
Home
// Home是一种特殊类型的 当它的 to属性与当前地址匹配时，可以将其定义为"活跃的"。
// location = { pathname: '/react' }
React
// React当我们想强制导航时，可以渲染一个
参考 前端进阶面试题详细解答
为什么虚拟dom会提高性能
虚拟
dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能
具体实现步骤如下
- 用
JavaScript对象结构表示 DOM 树的结构；然后用这个树构建一个真正的DOM树，插到文档当中 - 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
- 把2所记录的差异应用到步骤1所构建的真正的
DOM树上，视图就更新
虚拟DOM一定会提高性能吗？
很多人认为虚拟DOM一定会提高性能，一定会更快，其实这个说法有点片面，因为虚拟DOM虽然会减少DOM操作，但也无法避免DOM操作
- 它的优势是在于diff算法和批量处理策略,将所有的DOM操作搜集起来，一次性去改变真实的DOM,但在首次渲染上，虚拟DOM会多了一层计算，消耗一些性能，所以有可能会比html渲染的要慢
- 注意，虚拟DOM实际上是给我们找了一条最短，最近的路径，并不是说比DOM操作的更快，而是路径最简单
React Hooks在平时开发中需要注意的问题和原因
（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook
这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook，就容易导致调用顺序的不一致性，从而产生难以预料到的后果。
（2）使用useState时候，使用push，pop，splice等直接更改数组对象的坑
使用push直接更改数组无法获取到新值，应该采用析构方式，但是在class里面不会有这个问题。代码示例：
function Indicatorfilter() {let [num,setNums] = useState([0,1,2,3])const test = () => {// 这里坑是直接采用push去更新num// setNums(num)是无法更新num的// 必须使用num = [...num ,1]num.push(1)// num = [...num ,1]setNums(num)}
return (test}>测试{num.map((item,index) => ( index}>{item}))} )
}class Indicatorfilter extends React.Component{constructor(props:any){super(props)this.state = {nums:[1,2,3]}this.test = this.test.bind(this)}test(){// class采用同样的方式是没有问题的this.state.nums.push(1)this.setState({nums: this.state.nums})}render(){let {nums} = this.statereturn(this.test}>测试{nums.map((item:any,index:number) => ( index}>{item}))} )}
} （3）useState设置状态的时候，只有第一次生效，后期需要更新状态，必须通过useEffect
TableDeail是一个公共组件，在调用它的父组件里面，我们通过set改变columns的值，以为传递给TableDeail 的 columns是最新的值，所以tabColumn每次也是最新的值，但是实际tabColumn是最开始的值，不会随着columns的更新而更新：
const TableDeail = ({ columns,}:TableData) => {const [tabColumn, setTabColumn] = useState(columns)
}// 正确的做法是通过useEffect改变这个值
const TableDeail = ({ columns,}:TableData) => {const [tabColumn, setTabColumn] = useState(columns) useEffect(() =>{setTabColumn(columns)},[columns])
}（4）善用useCallback
父组件传递给子组件事件句柄时，如果我们没有任何参数变动可能会选用useMemo。但是每一次父组件渲染子组件即使没变化也会跟着渲染一次。
（5）不要滥用useContext
可以使用基于 useContext 封装的状态管理工具。
高阶组件
高阶函数：如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。
高阶组件：如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。
react 中的高阶组件
React 中的高阶组件主要有两种形式：属性代理和反向继承。
属性代理 Proxy
- 操作
props - 抽离
state - 通过
ref访问到组件实例 - 用其他元素包裹传入的组件
WrappedComponent
反向继承
会发现其属性代理和反向继承的实现有些类似的地方，都是返回一个继承了某个父类的子类，只不过属性代理中继承的是 React.Component，反向继承中继承的是传入的组件 WrappedComponent。
反向继承可以用来做什么：
1.操作 state
高阶组件中可以读取、编辑和删除WrappedComponent组件实例中的state。甚至可以增加更多的state项，但是非常不建议这么做因为这可能会导致state难以维护及管理。
function withLogging(WrappedComponent) { return class extends WrappedComponent { render() { return ( ; ;Debugger Component Logging...;
;state:
;
;{JSON.stringify(this.state, null, 4)}; props:
;
{JSON.stringify(this.props, null, 4)}; {super.render()} ; ); } };
}
2.渲染劫持（Render Highjacking）
条件渲染通过 props.isLoading 这个条件来判断渲染哪个组件。
修改由 render() 输出的 React 元素树
React如何进行组件/逻辑复用?
抛开已经被官方弃用的Mixin,组件抽象的技术目前有三种比较主流:
- 高阶组件:
- 属性代理
- 反向继承
- 渲染属性
- react-hooks
在生命周期中的哪一步你应该发起 AJAX 请求
我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下
React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。- 如果我们将
AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题
说说 React组件开发中关于作用域的常见问题。
在 EMAScript5语法规范中，关于作用域的常见问题如下。
（1）在map等方法的回调函数中，要绑定作用域this（通过bind方法）。
（2）父组件传递给子组件方法的作用域是父组件实例化对象，无法改变。
（3）组件事件回调函数方法的作用域是组件实例化对象（绑定父组件提供的方法就是父组件实例化对象），无法改变。
在 EMAScript6语法规范中，关于作用域的常见问题如下。
（1）当使用箭头函数作为map等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。
（2）事件回调函数要绑定组件作用域。
（3）父组件传递方法要绑定父组件作用域。
总之，在 EMAScript6语法规范中，组件方法的作用域是可以改变的。
Redux 请求中间件如何处理并发
使用redux-Saga redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。它通过创建 Sagas 将所有异步操作逻辑存放在一个地方进行集中处理，以此将react中的同步操作与异步操作区分开来，以便于后期的管理与维护。 redux-saga如何处理并发：
- takeEvery
可以让多个 saga 任务并行被 fork 执行。
import {fork,take
} from "redux-saga/effects"const takeEvery = (pattern, saga, ...args) => fork(function*() {while (true) {const action = yield take(pattern)yield fork(saga, ...args.concat(action))}
})
- takeLatest
takeLatest 不允许多个 saga 任务并行地执行。一旦接收到新的发起的 action，它就会取消前面所有 fork 过的任务（如果这些任务还在执行的话）。
在处理 AJAX 请求的时候，如果只希望获取最后那个请求的响应， takeLatest 就会非常有用。
import {cancel,fork,take
} from "redux-saga/effects"const takeLatest = (pattern, saga, ...args) => fork(function*() {let lastTaskwhile (true) {const action = yield take(pattern)if (lastTask) {yield cancel(lastTask) // 如果任务已经结束，则 cancel 为空操作}lastTask = yield fork(saga, ...args.concat(action))}
})
diff算法如何比较?
- 只对同级比较，跨层级的dom不会进行复用
- 不同类型节点生成的dom树不同，此时会直接销毁老节点及子孙节点，并新建节点
- 可以通过key来对元素diff的过程提供复用的线索
- 单节点diff
- 单点diff有如下几种情况：
- key和type相同表示可以复用节点
- key不同直接标记删除节点，然后新建节点
- key相同type不同，标记删除该节点和兄弟节点，然后新创建节点
对 React 和 Vue 的理解，它们的异同
相似之处：
- 都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
- 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板。
- 都使用了Virtual DOM（虚拟DOM）提高重绘性能
- 都有props的概念，允许组件间的数据传递
- 都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性
不同之处：
1）数据流
Vue默认支持数据双向绑定，而React一直提倡单向数据流
2）虚拟DOM
Vue2.x开始引入"Virtual DOM"，消除了和React在这方面的差异，但是在具体的细节还是有各自的特点。
- Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
- 对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过 PureComponent/shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。
3）组件化
React与Vue最大的不同是模板的编写。
- Vue鼓励写近似常规HTML的模板。写起来很接近标准 HTML元素，只是多了一些属性。
- React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。
具体来讲：React中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以 import 完组件之后，还需要在 components 中再声明下。
4）监听数据变化的实现原理不同
- Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
- React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的vDOM的重新渲染。这是因为 Vue 使用的是可变数据，而React更强调数据的不可变。
5）高阶组件
react可以通过高阶组件（Higher Order Components-- HOC）来扩展，而vue需要通过mixins来扩展。
原因高阶组件就是高阶函数，而React的组件本身就是纯粹的函数，所以高阶函数对React来说易如反掌。相反Vue.js使用HTML模板创建视图组件，这时模板无法有效的编译，因此Vue不采用HOC来实现。
6）构建工具
两者都有自己的构建工具
- React ==> Create React APP
- Vue ==> vue-cli
7）跨平台
- React ==> React Native
- Vue ==> Weex
React的状态提升是什么？使用场景有哪些？
React的状态提升就是用户对子组件操作，子组件不改变自己的状态，通过自己的props把这个操作改变的数据传递给父组件，改变父组件的状态，从而改变受父组件控制的所有子组件的状态，这也是React单项数据流的特性决定的。官方的原话是：共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。 这被称为“状态提升(Lifting State Up)”。
概括来说就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件。
一个简单的例子，父组件中有两个input子组件，如果想在第一个输入框输入数据，来改变第二个输入框的值，这就需要用到状态提升。
class Father extends React.Component {constructor(props) {super(props)this.state = {Value1: '',Value2: ''}}value1Change(aa) {this.setState({Value1: aa})}value2Change(bb) {this.setState({Value2: bb})}render() {return ({ padding: "100px" }}>this.state.Value1} onvalue1Change={this.value1Change.bind(this)} />this.state.Value1} /> )}
}
class Child1 extends React.Component {constructor(props) {super(props)}changeValue(e) {this.props.onvalue1Change(e.target.value)}render() {return (this.props.Value1} onChange={this.changeValue.bind(this)} />)}
}
class Child2 extends React.Component {constructor(props) {super(props)}render() {return (this.props.value2} />)}
}ReactDOM.render(
什么是状态提升
使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。我们来看一下具体如何操作吧。
import React from 'react'
class Child_1 extends React.Component{constructor(props){super(props)}render(){return ({this.props.value+2}
)}
}
class Child_2 extends React.Component{constructor(props){super(props)}render(){return ({this.props.value+1}
)}
}
class Three extends React.Component {constructor(props){super(props)this.state = {txt:"牛逼"}this.handleChange = this.handleChange.bind(this)}handleChange(e){this.setState({txt:e.target.value})}render(){return (this.state.txt} onChange={this.handleChange}/>{this.state.txt}
this.state.txt}/>this.state.txt}/> )}
}
export default Three
在 Redux中使用 Action要注意哪些问题？
在Redux中使用 Action的时候， Action文件里尽量保持 Action文件的纯净，传入什么数据就返回什么数据，最妤把请求的数据和 Action方法分离开，以保持 Action的纯净。
如何使用4.0版本的 React Router？
React Router 4.0版本中对 hashHistory做了迁移，执行包安装命令 npm install react-router-dom后，按照如下代码进行使用即可。
import { HashRouter, Route, Redirect, Switch } from " react-router-dom";
class App extends Component {render() {return (List}> Detail}>{" "} {" "}
React 事件机制
this.handleClick.bind(this)}>点我
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event.stopProppagation()方法。 JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了 document 上。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。
另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。
实现合成事件的目的如下：
- 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；
- 对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。
相关内容