react面试：基础知识（一）

1. 什么是虚拟DOM

     答：相对真实的DOM，它是真实DOM的内存表示，同步了虚拟DOM，react的diff算法自动同步真实的DOM。

2. 类组件和函数组件的区别？

类组件定义：

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

 函数组件定义：

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

   答：共同点：

                     1.都不能修改自己的props，都是纯函数，它单项数据流，父组件的属性变了，它的子组件视图自动会更新，它都有props属性和state的两个概念。

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

          区别：

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

                     2. 类组件有this,有生命周期，有状态state；相反函数组件没有这些，但注意有了hooks技术后，也支持state，同时还有状态的副作用功能来支持生命周期。

 

3. react中的refs有什么作用？

     答：用于react能访问Dom元素或者某一个组件的实例的一个句柄用法。

4.state和props有什么区别？

    答：它都是组件的普通javascript对象，功能不同props一般是父组件传给子组件的，在子组件中它是只读的。而state是组件本身的状态，它可以读写，但只用于组件本身，即私有属性，外部不能访问，只能通过组件内部的thi.setState来修改。

            不管是props还是state值的变化，都会引起视图的重新渲染。

5.什么是高阶组件即HOC

     答：  高阶组件就是一个函数，只是它接收参数是一个组件，并返回一个新的组件。

6.  什么是jsx?

    答：jsx是JavaScript XML的简写，是写React组件的一种语法，即一个文件有js又有html，浏览器本身解析不了jsx，它通过babel来转译后生成最终还是js。

7.为什么不直接更新state状态？

   答：不能直接赋值，而是通过setState方法来更新，这样才能重新渲染视图，并且setState有时同步，有时候又是异步（setState只在合成事件和钩⼦函数中是“异步”的，在原⽣事件和setTimeout中都是同步的），。它会放到一个更新的队列中完成，考虑到render次数，

          它会将多个值改变并一次render，这样才没有性能问题。

           我们在改变state时，需要重新生成一个对象去代替原来的state，而不是直接修改原来的。

8.React中的这三个点...是做什么？

      答：扩展传值符号，ES2018添加的新用法，即参数本身有多个值。

9.为什么需要React Hooks？

      答：react16.8引入的新特性，一种React组件的新式写法，它可以在不写类组件的情况下支持操作state和react的其他特性，例如副作用功能。

             hooks 只是多了一种写组件的方法（即编写特殊的函数组件），使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。

10.为什么类的方法需要绑定？

     答：Javascript中的this取决于当前上下文，

在React类的组件方法中，开发人员通常希望它引用组件的当前实例，因此有必要 将 这些方法 绑定 到该实例。通常，这是在构造函数中完成的，例如：

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

 11.Mvc和Flux的区别？

    答：MVC是分离数据（模型）、UI（视图）、逻辑（控制器）三个方面很好，但数据流定义不佳，缺乏数据完整型。

           Flux不再受级联的更新困扰，通过限制共享数据的直接访问来增强数据的完整性。

12.React Fiber是什么？

   答：翻译是纤维化，其实是基于浏览器的一个单线程调度算法，把递归的diff算法进行了优化即react的核心算法进行一次重新的实现React V16新增加的特性，

          原来痛点就是：原来的组件树的更新是同步的，当组件树很大时需要同步更新时会造成性能问题，现象就是界面会卡顿，不好的用户体验。

          Fiber工作原理：  破解JavaScript中同步操作时间过长的方法其实很简单——分片，即更新过程碎片化，智能化去更新最紧急最重要的分片，而维护这个分片的数据结构就是Fiber。它一般更新分成两个阶段：第一步先找出哪些需要更新，这个过程可以被打断；  第二步一鼓作气把DOM更新完，绝不会被打断。

          第一个阶段它可能会执行以下生命周期：

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate   

         第二个阶段可能会执行以下生命周期：

• componentDidMount
• componentDidUpdate
• componentWillUnmount

特别注意：在现有的React中，每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次；在React Fiber中，不再是这样了，第一阶段中的生命周期函数在一次加载和更新过程中可能会被多次调用！

使用React Fiber之后，一定要检查一下第一阶段相关的这些生命周期函数，看看有没有逻辑是假设在一个更新过程中只调用一次，有的话就要改了。

我们挨个看一看这些可能被重复调用的函数。

componentWillReceiveProps，即使当前组件不更新，只要父组件更新也会引发这个函数被调用，所以多调用几次没啥，通过！

 

shouldComponentUpdate，这函数的作用就是返回一个true或者false，不应该有任何副作用，多调用几次也无妨，通过！

render，应该是纯函数，多调用几次无妨，通过！

只剩下componentWillMount和componentWillUpdate这两个函数往往包含副作用，所以当使用React Fiber的时候一定要重点看这两个函数的实现。