建站
咨询
售后
建站咨询
这期内容当中小编将会给大家带来有关有哪些高级React面试题，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
Q1：什么是虚拟DOM？
难度：⭐
虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。
虚拟DOM更多是一种模式，不是一种特定的技术。
资料来源：https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://www.javascriptcn.com/read-65385.html
Q2：类组件和函数组件之间有什么区别？
难度：⭐⭐
类组件（Class components）
无论是使用函数或是类来声明一个组件，它决不能修改它自己的
props。- 所有 React 组件都必须是纯函数，并禁止修改其自身
props。
- 所有 React 组件都必须是纯函数，并禁止修改其自身
React是单项数据流，父组件改变了属性，那么子组件视图会更新。
- 属性
props是外界传递过来的，状态state是组件本身的，状态可以在组件中任意修改 - 组件的属性和状态改变都会更新视图。
- 属性
class Welcome extends React.Component {
render() {
return (
Welcome { this.props.name }
);
}
}
ReactDOM.render(函数组件（functional component）
- 函数组件接收一个单一的
props对象并返回了一个React元素
function Welcome (props) { returnWelcome {props.name}
} ReactDOM.render(, document.getElementById('root')); - 函数组件接收一个单一的
区别
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
| 区别 | 函数组件 | 类组件 |
|---|---|---|
是否有 this | 没有 | 有 |
| 是否有生命周期 | 没有 | 有 |
是否有状态 state | 没有 | 有 |
资料来源：https://github.com/Pau1fitz/react-interview
参考资料：https://overreacted.io/how-are-function-components-different-from-classes/
Q3：React中的refs作用是什么？
难度：⭐⭐
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
)
}
}上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：
function CustomForm ({handleSubmit}) {
let inputElement
return (
)
}资料来源：https://github.com/Pau1fitz/react-interview
参考资料：https://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components
Q4：描述React事件处理。
难度：⭐⭐
为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同。
有点有趣的是，React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处，也意味着React在更新DOM时无需担心跟踪事件监听器。
资料来源：https://tylermcginnis.com/react-interview-questions/
参考资料：https://www.cnblogs.com/xiangming25/p/6430461.html
Q5：state 和 props有什么区别？
难度：⭐⭐
state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即
props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。
资料来源： https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
Q6：如何创建refs？
难度：⭐⭐
Refs 是使用 React.createRef() 方法创建的，并通过 ref 属性添加到 React 元素上。为了在整个组件中使用refs，只需将 ref 分配给构造函数中的实例属性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return ;
}
}和：
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
)
}
}我们还可以借助闭包在功能组件中使用它。
资料来源： https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://segmentfault.com/a/1190000015113359
Q7：什么是高阶组件？
难度：⭐⭐
高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件， 因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
- 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧
- 高阶组件的参数为一个组件返回一个新的组件
- 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件
资料来源： https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://css-tricks.com/what-are-higher-order-components-in-react/
Q8：constructor中super与props参数一起使用的目的是什么？
难度：⭐⭐
在调用方法之前，子类构造函数无法使用this引用super()。
在ES6中，在子类的constructor中必须先调用super才能引用this。
在constructor中可以使用this.props
使用props：
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // Prints { name: 'sudheer',age: 30 }
}
}不使用props：
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // Prints undefined
// But Props parameter is still available
console.log(props); // Prints { name: 'sudheer',age: 30 }
}
render() {
// No difference outside constructor
console.log(this.props) // Prints { name: 'sudheer',age: 30 }
}
}上面的代码片段揭示了this.props行为仅在构造函数中有所不同。外部构造函数相同。
资料来源：
https://github.com/sudheerj/reactjs-interview-questions
https://www.fullstack.cafe/React)
Q9：什么是受控组件？
难度：⭐⭐⭐
在HTML当中，像,