2021 React面试题知识点很全面

最新推荐文章于 2024-01-23 23:10:38 发布

尘之微识

最新推荐文章于 2024-01-23 23:10:38 发布

阅读量378

点赞数 1

文章标签： react.js 面试

本文链接：https://blog.csdn.net/Q_909804/article/details/120705271

版权

本文详细解析React面试中常见的知识点，包括虚拟DOM的概念、类组件与函数组件的区别、Refs的用途、事件处理机制、state与props的区别、受控与非受控组件、JSX的运用、生命周期方法、React Hooks的优势等核心概念。

摘要由CSDN通过智能技术生成

一，什么是虚拟DOM？

虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。

虚拟DOM更多是一种模式，不是一种特定的技术。

二，类组件和函数组件之间有什么区别？

类组件（ Class components ）

无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props 。

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

React是单项数据流，父组件改变了属性，那么子组件视图会更新。

属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改

组件的属性和状态改变都会更新视图。

class Welcome extends React.Component {
  render() {
    return (
      <h1>Welcome { this.props.name }</h1>
    );
  }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

函数组件（functional component）

函数组件接收一个单一的 props 对象并返回了一个React元素

function Welcome (props) {
     return <h1>Welcome {props.name}</h1> 
} 
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

区别

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

区别函数组件类组件是否有this没有有是否有生命周期没有有是否有状态state没有有

三，React中的refs作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。

另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：