常见面试题

什么是虚拟dom?

虚拟DOM(VDOM)是真实DOM在内存中的表示, UI的表示形式保存在内存中, 并与实际的DOM同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和

类组件与函数组件的区别？

1）类组件可以使用其他特性，如状态 state 和生命周期钩子

2）当组件只接收props渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件

函数组件与类组件的区别：

函数组件性能比类组件高（因为类组件使用的时候需要实例化，函数组件直接执行函数取返回结果）

类组件中有this、函数组价中没有

类组件中有状态state

3. react 生命周期

1）class component生命周期
挂载阶段  -  组件实例被创建和插入 DOM 树的过程
更新阶段  -  组件被重新渲染的过程
卸载阶段  -  组件从 DOM 树中被删除的过程
·挂载阶段：
    static defaultProps     --> 设置props的默认值
    static propTypes        --> props数据类型检测
    constructor(props)      --> 构造函数  初始化props、state 绑定事件处理函数
    componentWillMount()    --> 组件挂载前钩子（17版本后删除）
    componentDidMount()     --> 组件挂载成功后 已经加载到真实DOM
·更新阶段
    componentWillReceiveProps(nextProps) --> 父组件更新Props钩子（17版本后删除）
    sholdComponentUpdate(nextProps, nextState)  --> 组件是否更新钩子
    componentWillUpdate()   --> 组件更新前钩子（17版本后删除）
·卸载阶段
    componentWillUnmount()  --> 组件销毁 （清除定时器、取消监听......）

2）Function Component生命周期
Function Component 是更彻底的状态驱动抽象，甚至没有 Class Component 生命周期的概念，只有一个状态，而 React 负责同步到 DOM。

·useEffect
useEffect 就是一个 Effect Hook ，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount 、 componentDidUpdate  和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

useEffect做了什么？
·使用 useEffect 相当于告诉 React 组件需要在渲染后执行某些操作，React 将在执行 DOM 更新之后调用它。
·React 保证了每次运行 useEffect 的时候，DOM 已经更新完毕。

class组件Demo：
`
class Example extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    count: 0
    };
}

componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
}

render() {
    return (
    <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Click me
        </button>
    </div>
    );
}
}
`
Function Component重写案例：
```
import React, { useState, useEffect } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
        // 使用浏览器的 API 更新页面标题
        document.title = `You clicked ${count} times`;
    });

    return (
        <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
            Click me
        </button>
        </div>
    );
}

```

4. React中的refs干嘛用的？

Refs提供了一种访问在render方法中创建DOM节点或者React元素的方法。在典型的数据流中，props是

父子组件交互的唯一方式，想要修改子组件，需要使用新的props重新渲染它，某些情况下需要在典型数据流外，强制修改子代，这个时候可以使用Refs。

咱们可以在组件添加一个 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属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

在React中如何处理事件

为了解决浏览器的兼容性问题，SyntheticEvent（合成事件）实例将被传递给你的事件处理函数，SyntheticEvent是React跨浏览器原生包装器，它拥有和浏览器原生事件相同的接口，包括stopPropagation()和 preventDefault()

比较有趣的是，React实际上并不是将事件附加到子节点本事。React使用单个事件监听器监听顶层的所有事件。这对性能有好处，也意味React在更新DOM时不需要跟踪事件监听器。

state和props区别？

props与state都是普通的JS对象。虽然他们都包含影响渲染输出的详细，但是它们在组件的功能是不同的：

1）state是组价自己管理数据，控制自己的状态，可变
2）props是外部传入的数据参数，不可变
3）没有state的叫做无状态组件（函数组件）， 有state的叫做有状态组件（类组件）

7. 如何创建refs

refs是使用React.createRef()创建的，并通过ref属性附加到React元素。在构造组件时，通常将refs分配给实例属性，以便可以在整个组件中引用它们。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
// or
class 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>
    )
  }
}

什么是高阶组件HOC？

高阶组件（HOC）是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从React的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制组件中的任何行为。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC的特性？
1）代码重用、逻辑和引导抽象
2）渲染劫持
3）state抽象和操作
4）props处理

9. 什么是React Hooks?

Hooks是react 16.8中新添加内容。它们允许在不编写类的情况下使用state和其他React特性。使用Hooks，可以从组件中提取状态逻辑，这样就可以独立地测试和重用它。Hooks允许在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享Hooks变的容易。

使用 React Hooks 好处？

首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 props 的负担。Hooks 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。

Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect这样的内置钩子。

React 中的 useState() 是什么？

useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。

持续更新....

借鉴了很多大神的文章！如有雷同，联系我马上删除！

前端面经 react篇

常见面试题