react常见面试问题（持续更新）

1. React16的周期函数

React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps，componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。 getDerivedStateFromProps：组件每次被 rerender的时候，包括在组件构建之后(虚拟 dom之后，实际 dom挂载之前)，每次获取新的 props或 state之后；每次接收新的props之后都会返回一个对象作为新的 state，返回null则说明不需要更新 state；配合 componentDidUpdate，可以覆盖 componentWillReceiveProps的所有用法

2. 为什么有时连续多次setState只有一次生效？

原因就是 React会批处理机制中存储的多个 setState进行合并，如果传入的是对象，很明显会被合并成一次，所以下面的代码两次打印的结果是相同的：

componentDidMount() {

    this.setState({ index: this.state.index + 1 }, () => {

      console.log(this.state.index);

    })

    this.setState({ index: this.state.index + 1 }, () => {

      console.log(this.state.index);

    })

  }

=>Object.assign(nextState, {index: state.index+ 1},{index: state.index+ 1})

3. 虚拟DOM

       在原生的 JavaScript程序中，我们直接对 DOM进行创建和更改，而 DOM元素通过我们监听的事件和我们的应用程序进行通讯。而 React会先将你的代码转换成一个 JavaScript对象，然后这个 JavaScript对象再转换成真实 DOM。这个 JavaScript对象就是所谓的虚拟 DOM。

       当我们需要创建或更新元素时， React首先会让这个 VitrualDom对象进行创建和更改，然后再将 VitrualDom对象渲染成真实DOM。当我们需要对 DOM进行事件监听时，首先对 VitrualDom进行事件监听， VitrualDom会代理原生的 DOM事件从而做出响应。

4. 为什么代码中一定要引入React？

     JSX只是为 React.createElement(component,props,...children)方法提供的语法糖。所有的 JSX代码最后都会转换成 React.createElement(...)， Babel帮助我们完成了这个转换的过程。所以使用了 JSX的代码都必须引入 React。

5.componentDidCatch

捕获子组件中发生的错误，在父组件中进行设置
componentDidCatch (error, info) {
    this.setState({
        error: true
    });
}

6.react中性能优化Fragments

 添加有个没有实际意义的节点

7.纯函数去创建一个组件

function com(props){
    return ()
}

等同构造函数

8.Hook在无状态组件中调用state及周期函数

useState这个函数可以允许在纯函数中操作状态，它的参数就是初始化的state数据，可以在组件中多次使用

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
   

     

You clicked {count} times

      setCount(count + 1)}>
        Click me
     
   

  );
}