前端面试题React高频面试题集锦.pdfVIP

前端⾯试题React⾼频⾯试题集锦 1. 什么是虚拟DOM？ 虚拟DOM（VDOM）它是真实DOM的内存表⽰,⼀种编程概念，⼀种模式。它会和真实的DOM同步，⽐如通过ReactDOM这种库，这个 同步的过程叫做调和(reconcilation)。 虚拟DOM更多是⼀种模式，不是⼀种特定的技术。 2.React中的类组件和函数组件之间有什么区别？ 类组件（Class components） 1. ⽆论是使⽤函数或是类来声明⼀个组件，它决不能修改它⾃⼰的 props。 1. 所有 React 组件都必须是纯函数，并禁⽌修改其⾃⾝ props。 2. React是单项数据流，⽗组件改变了属性，那么⼦组件视图会更新。 1. 属性 props是外界传递过来的，状态 state是组件本⾝的，状态可以在组件中任意修改 2. 组件的属性和状态改变都会更新视图。 class Welcome extends React.Component { render() { return ( h1Welcome { }/h1 ) } } ReactDOM.render(Welcome name=react /, document.getElementById(root)) 函数组件（functional component） 函数组件接收⼀个单⼀的 props 对象并返回了⼀个React元素 function Welcome (props) { return h1Welcome {}/h1 } ReactDOM.render(Welcome name=react /, document.getElementById(root)) 区别 1. 语法上 两者最明显的不同就是在语法上，函数组件是⼀个纯函数，它接收⼀个props对象返回⼀个react元素。⽽类组件需要去继承 React.Component并且创建render函数返回react元素，这将会要更多的代码，虽然它们实现的效果相同。 2. 状态管理 因为函数组件是⼀个纯函数，你不能在组件中使⽤setState()，这也是为什么把函数组件称作为⽆状态组件。 如果你需要在你的组件中使⽤state，你可以选择创建⼀个类组件或者将state提升到你的⽗组件中，然后通过props对象传递到⼦组 件。 3. ⽣命周期钩⼦ 你不能在函数组件中使⽤⽣命周期钩⼦，原因和不能使⽤state⼀样，所有的⽣命周期钩⼦都来⾃于继承的React.Component中。 因此，如果你想使⽤⽣命周期钩⼦，那么需要使⽤类组件。 **注意：**在react16.8版本中添加了hooks，使得我们可以在函数组件中使⽤useState钩⼦去管理state，使⽤useEffect钩⼦去使 ⽤⽣命周期函数。因此，2、3两点就不是它们的区别点。从这个改版中我们可以看出作者更加看重函数组件，⽽且react团队曾提及 到在react之后的版本将会对函数组件的性能⽅⾯进⾏提升。 4. 调⽤⽅式 如果SayHi是⼀个函数，React需要调⽤它： // 你的代码 function SayHi() { return pHello, React/p } // React 内部 const result = SayHi(props) // » pHello, React/p 如果SayHi是⼀个类，React需要先⽤new操作符将其实例化，然后调⽤刚才⽣成实例的render⽅法： // 你的代码 class SayHi extends React.Component { render() { return pHello, React/p } } // React 内部 const instance = new SayHi(props) // » SayHi {} const result = instance.render() // » pHello, React/p 可想⽽知，函数组件重新渲染将重新调⽤组件⽅法返回新的react元素，类组件重新渲染将new⼀个新的组件实例，然后调⽤render类⽅法 返回react元素，这也说明为什么类组件中this是可变的。 3. 什么是⾼阶组件？