React面试题整理

1、什么是虚拟DOM？（start）
虚拟DOM是真实DOM的内存表示，是一种模式。用ReactDOM将虚拟DOM和真实DOM调和（同步），也就是虚拟DOM通过ReactDOM呈现到页面。
虚拟DOM是React内部在用的，不需要那么多的属性。
虚拟DOM的本质是object类型的对象。

2、类组件和函数组件的区别？（start）
1）函数组件的性能比类组件的性能要高。
2）类组件使用时需要实例化，函数组件直接执行函数取返回结果即可。
3）为了提高性能，尽量使用函数组件。
4）函数组件没有this,没有生命周期，没有状态state,
5）　类组件有this,有生命周期，有状态state。

3、React中的refs作用是什么？（start：start）
Refs 是react 提供给我们的安全访问DOM元素或者某个组件实例的句柄。

4、描述React事件处理。（start：start）
为了解决跨浏览器兼容性问题，React事件处理程序将传递SyntheticEvent（综合事件）实例，该实例是React跨浏览器本机的跨浏览器包装器。

5、state 和 props的区别？（start：start）
props 是一个外部传进组件的参数，主要用于父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。
state 的主要用于组件保存、控制及修改自己的状态，它只能在constructor中初始化1，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState 来修改，修改state 属性会导致组件的重新渲染。

6、如何创建refs？（start：start）
refs 是使用React.createRef( ) 方法创建的，并通过ref属性添加到React 元素上。为了在整个组件中使用refs，只需要ref 分配给构造函数中的实例属性。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}


lass UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

还可以借助闭包在功能组件中使用它。
7、什么是高阶组件？（start：start）
高阶组件就是一个函数，且该函数接受一个组件作为参数，返回一个新的组件。
const EnhancedCo