关于react.js:前端一面常考react面试题

类组件 (Class component) 和函数式组件 (Functional component) 之间有何不同

• 类组件不仅容许你应用更多额定的性能，如组件本身的状态和生命周期钩子，也能使组件间接拜访 store 并维持状态
• 当组件仅是接管 props，并将组件本身渲染到页面时，该组件就是一个 ‘ 无状态组件 (stateless component)’，能够应用一个纯函数来创立这样的组件。这种组件也被称为哑组件(dumb components) 或展现组件

refs 是什么

• refs 是 react 中援用的简写，有主语存储特定 React 元素或组件的援用的属性，它将由组件渲染配置函数返回
• 当咱们须要输入框的内容，触发动画等时候能够应用 refs

组件通信的形式有哪些

• ⽗组件向⼦组件通信: ⽗组件能够向⼦组件通过传 props 的⽅式，向⼦组件进⾏通信
• ⼦组件向⽗组件通信: props+ 回调的⽅式，⽗组件向⼦组件传递 props 进⾏通信，此 props 为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中
• 兄弟组件通信: 找到这两个兄弟节点独特的⽗节点, 联合上⾯两种⽅式由⽗节点转发信息进⾏通信
• 跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如以后认证的⽤户、主题或⾸选语⾔，对于逾越多层的全局数据通过 Context 通信再适宜不过
• 公布订阅模式: 发布者公布事件，订阅者监听事件并做出反馈, 咱们能够通过引⼊ event 模块进⾏通信
• 全局状态治理⼯具: 借助 Redux 或者 Mobx 等全局状态治理⼯具进⾏通信, 这种⼯具会保护⼀个全局状态中⼼ Store, 并依据不同的事件产⽣新的状态

类组件与函数组件有什么异同？

相同点： 组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染的 React 元素。也正因为组件是 React 的最小编码单位，所以无论是函数组件还是类组件，在应用形式和最终出现成果上都是完全一致的。

咱们甚至能够将一个类组件改写成函数组件，或者把函数组件改写成一个类组件（尽管并不举荐这种重构行为）。从使用者的角度而言，很难从应用体验上辨别两者，而且在古代浏览器中，闭包和类的性能只在极其场景下才会有显著的差异。所以，根本可认为两者作为组件是完全一致的。

不同点：

• 它们在开发时的心智模型上却存在微小的差别。类组件是基于面向对象编程的，它主打的是继承、生命周期等外围概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、援用通明等特点。
• 之前，在应用场景上，如果存在须要应用生命周期的组件，那么主推类组件；设计模式上，如果须要应用继承，那么主推类组件。但当初因为 React Hooks 的推出，生命周期概念的淡出，函数组件能够齐全取代类组件。其次继承并不是组件最佳的设计模式，官网更推崇“组合优于继承”的设计概念，所以类组件在这方面的劣势也在淡出。
• 性能优化上，类组件次要依附 shouldComponentUpdate 阻断渲染来晋升性能，而函数组件依附 React.memo 缓存渲染后果来晋升性能。
• 从上手水平而言，类组件更容易上手，从将来趋势上看，因为 React Hooks 的推出，函数组件成了社区将来主推的计划。
• 类组件在将来工夫切片与并发模式中，因为生命周期带来的复杂度，并不易于优化。而函数组件自身轻量简略，且在 Hooks 的根底上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的将来倒退。

React 事件机制

<div onClick={this.handleClick.bind(this)}> 点我 </div>

React 并不是将 click 事件绑定到了 div 的实在 DOM 上，而是在 document 处监听了所有的事件，当事件产生并且冒泡到 document 处的时候，React 将事件内容封装并交由真正的处理函数运行。这样的形式不仅仅缩小了内存的耗费，还能在组件挂在销毁时对立订阅和移除事件。

除此之外，冒泡到 document 上的事件也不是原生的浏览器事件，而是由 react 本人实现的合成事件（SyntheticEvent）。因而如果不想要是事件冒泡的话应该调用 event.preventDefault()办法，而不是调用 event.stopProppagation()办法。JSX 上写的事件并没有绑定在对应的实在 DOM 上，而是通过事件代理的形式，将所有的事件都对立绑定在了 document 上。这样的形式不仅缩小了内存耗费，还能在组件挂载销毁时对立订阅和移除事件。

另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 本人实现的合成事件（SyntheticEvent）。因而咱们如果不想要事件冒泡的话，调用 event.stopPropagation 是有效的，而应该调用 event.preventDefault。

实现合成事件的目标如下：

• 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；
• 对于原生浏览器事件来说，浏览器会给监听器创立一个事件对象。如果你有很多的事件监听，那么就须要调配很多的事件对象，造成高额的内存调配问题。然而对于合成事件来说，有一个事件池专门来治理它们的创立和销毁，当事件须要被应用时，就会从池子中复用对象，事件回调完结后，就会销毁事件对象上的属性，从而便于下次复用事件对象。

React 的事件和一般的 HTML 事件有什么不同？

区别：

• 对于事件名称命名形式，原生事件为全小写，react 事件采纳小驼峰；
• 对于事件函数解决语法，原生事件为字符串，react 事件为函数；
• react 事件不能采纳 return false 的形式来阻止浏览器的默认行为，而必须要地明确地调用 preventDefault() 来阻止默认行为。

合成事件是 react 模仿原生 DOM 事件所有能力的一个事件对象，其长处如下：

• 兼容所有浏览器，更好的跨平台；
• 将事件对立寄存在一个数组，防止频繁的新增与删除（垃圾回收）。
• 不便 react 对立治理和事务机制。

事件的执行程序为原生事件先执行，合成事件后执行，合成事件会冒泡绑定到 document 上，所以尽量避免原生事件与合成事件混用，如果原生事件阻止冒泡，可能会导致合成事件不执行，因为须要冒泡到 document 上合成事件才会执行。

参考 前端进阶面试题具体解答

对 React 中 Fragment 的了解，它的应用场景是什么？

在 React 中，组件返回的元素只能有一个根元素。为了不增加多余的 DOM 节点，咱们能够应用 Fragment 标签来包裹所有的元素，Fragment 标签不会渲染出任何元素。React 官网对 Fragment 的解释：

React 中的一个常见模式是一个组件返回多个元素。Fragments 容许你将子列表分组，而无需向 DOM 增加额定节点。

import React, {Component, Fragment} from 'react'

// 个别模式
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
// 也能够写成以下模式
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

React setState 调用的原理

具体的执行过程如下（源码级解析）：

• 首先调用了setState 入口函数，入口函数在这里就是充当一个散发器的角色，依据入参的不同，将其散发到不同的性能函数中去；

ReactComponent.prototype.setState = function (partialState, callback) {this.updater.enqueueSetState(this, partialState);
  if (callback) {this.updater.enqueueCallback(this, callback, 'setState');
  }
};

• enqueueSetState 办法将新的 state 放进组件的状态队列里，并调用 enqueueUpdate 来解决将要更新的实例对象；

enqueueSetState: function (publicInstance, partialState) {
  // 依据 this 拿到对应的组件实例
  var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');
  // 这个 queue 对应的就是一个组件实例的 state 数组
  var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
  queue.push(partialState);
  //  enqueueUpdate 用来解决以后的组件实例
  enqueueUpdate(internalInstance);
}

• 在 enqueueUpdate 办法中引出了一个要害的对象——batchingStrategy，该对象所具备的isBatchingUpdates 属性间接决定了当下是要走更新流程，还是应该排队期待；如果轮到执行，就调用 batchedUpdates 办法来间接发动更新流程。由此能够揣测，batchingStrategy 或者正是 React 外部专门用于管控批量更新的对象。

function enqueueUpdate(component) {ensureInjected();
  // 留神这一句是问题的要害，isBatchingUpdates 标识着以后是否处于批量创立 / 更新组件的阶段
  if (!batchingStrategy.isBatchingUpdates) {
    // 若以后没有处于批量创立 / 更新组件的阶段，则立刻更新组件
    batchingStrategy.batchedUpdates(enqueueUpdate, component);
    return;
  }
  // 否则，先把组件塞入 dirtyComponents 队列里，让它“再等等”dirtyComponents.push(component);
  if (component._updateBatchNumber == null) {component._updateBatchNumber = updateBatchNumber + 1;}
}

留神：batchingStrategy 对象能够了解为“锁管理器”。这里的“锁”，是指 React 全局惟一的 isBatchingUpdates 变量，isBatchingUpdates 的初始值是 false，意味着“以后并未进行任何批量更新操作”。每当 React 调用 batchedUpdate 去执行更新动作时，会先把这个锁给“锁上”（置为 true），表明“当初正处于批量更新过程中”。当锁被“锁上”的时候，任何须要更新的组件都只能临时进入 dirtyComponents 里排队等待下一次的批量更新，而不能随便“插队”。此处体现的“工作锁”的思维，是 React 面对大量状态依然可能实现有序分批解决的基石。

为什么调用 setState 而不是间接扭转 state？

解答

如果您尝试间接扭转组件的状态，React 将无奈得悉它须要从新渲染组件。通过应用 setState() 办法，React 能够更新组件的 UI。

另外，您还能够谈谈如何不保障状态更新是同步的。如果须要基于另一个状态（或属性）更新组件的状态，请向 setState() 传递一个函数，该函数将 state 和 props 作为其两个参数：

this.setState((state, props) => ({counter: state.counter + props.increment}));

React 组件中怎么做事件代理？它的原理是什么？

React 基于 Virtual DOM 实现了一个 SyntheticEvent 层（合成事件层），定义的事件处理器会接管到一个合成事件对象的实例，它合乎 W3C 规范，且与原生的浏览器事件领有同样的接口，反对冒泡机制，所有的事件都主动绑定在最外层上。

在 React 底层，次要对合成事件做了两件事：

• 事件委派： React 会把所有的事件绑定到构造的最外层，应用对立的事件监听器，这个事件监听器上维持了一个映射来保留所有组件外部事件监听和处理函数。
• 主动绑定： React 组件中，每个办法的上下文都会指向该组件的实例，即主动绑定 this 为以后组件。

哪些办法会触发 React 从新渲染？从新渲染 render 会做些什么？

（1）哪些办法会触发 react 从新渲染?

• setState（）办法被调用

setState 是 React 中最罕用的命令，通常状况下，执行 setState 会触发 render。然而这里有个点值得关注，执行 setState 的时候不肯定会从新渲染。当 setState 传入 null 时，并不会触发 render。

class App extends React.Component {
  state = {a: 1};

  render() {console.log("render");
    return (
      <React.Fragement>
        <p>{this.state.a}</p>
        <button
          onClick={() => {            this.setState({ a: 1}); // 这里并没有扭转 a 的值          }}        >          Click me        </button>
        <button onClick={() => this.setState(null)}>setState null</button>
        <Child />
      </React.Fragement>
    );
  }
}

• 父组件从新渲染

只有父组件从新渲染了，即便传入子组件的 props 未发生变化，那么子组件也会从新渲染，进而触发 render

（2）从新渲染 render 会做些什么?

• 会对新旧 VNode 进行比照，也就是咱们所说的 Diff 算法。
• 对新旧两棵树进行一个深度优先遍历，这样每一个节点都会一个标记，在到深度遍历的时候，每遍历到一和个节点，就把该节点和新的节点树进行比照，如果有差别就放到一个对象外面
• 遍历差别对象，依据差别的类型，依据对应对规定更新 VNode

React 的解决 render 的根本思维模式是每次一有变动就会去从新渲染整个利用。在 Virtual DOM 没有呈现之前，最简略的办法就是间接调用 innerHTML。Virtual DOM 厉害的中央并不是说它比间接操作 DOM 快，而是说不论数据怎么变，都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚构 DOM 树与老的进行比拟，从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各种比对还是相当耗性能的，特地是在顶层 setState 一个渺小的批改，默认会去遍历整棵树。只管 React 应用高度优化的 Diff 算法，然而这个过程依然会损耗性能.

父子组件的通信形式？

父组件向子组件通信：父组件通过 props 向子组件传递须要的信息。

// 子组件: Child
const Child = props =>{return <p>{props.name}</p>
}
// 父组件 Parent
const Parent = ()=>{return <Child name="react"></Child>}

子组件向父组件通信：: props+ 回调的形式。

// 子组件: Child
const Child = props =>{
  const cb = msg =>{return ()=>{props.callback(msg)
      }
  }
  return (<button onClick={cb("你好!")}> 你好 </button>
  )
}
// 父组件 Parent
class Parent extends Component {callback(msg){console.log(msg)
    }
    render(){return <Child callback={this.callback.bind(this)}></Child>    
    }
}

React 中有应用过 getDefaultProps 吗？它有什么作用？

通过实现组件的 getDefaultProps，对属性设置默认值（ES5 的写法）：

var ShowTitle = React.createClass({getDefaultProps:function(){
    return{title : "React"}
  },
  render : function(){return <h1>{this.props.title}</h1>
  }
});

辨别状态和 props

为什么列表循环渲染的 key 最好不要用 index

举例说明

变动前数组的值是[1,2,3,4]，key 就是对应的下标：0，1，2，3
变动后数组的值是[4,3,2,1]，key 对应的下标也是：0，1，2，3

• 那么 diff 算法在变动前的数组找到 key = 0 的值是 1，在变动后数组里找到的 key= 0 的值是 4
• 因为子元素不一样就从新删除并更新
• 然而如果加了惟一的 key, 如下

变动前数组的值是[1,2,3,4]，key 就是对应的下标：id0，id1，id2，id3
变动后数组的值是[4,3,2,1]，key 对应的下标也是：id3，id2，id1，id0

• 那么 diff 算法在变动前的数组找到 key =id0 的值是 1，在变动后数组里找到的 key=id0 的值也是 1
• 因为子元素雷同，就不删除并更新，只做挪动操作，这就晋升了性能

React 中什么是受控组件和非控组件？

（1）受控组件 在应用表单来收集用户输出时，例如<input><select><textearea> 等元素都要绑定一个 change 事件，当表单的状态发生变化，就会触发 onChange 事件，更新组件的 state。这种组件在 React 中被称为 受控组件，在受控组件中，组件渲染出的状态与它的 value 或 checked 属性绝对应，react 通过这种形式打消了组件的部分状态，使整个状态可控。react 官网举荐应用受控表单组件。

受控组件更新 state 的流程：

• 能够通过初始 state 中设置表单的默认值
• 每当表单的值发生变化时，调用 onChange 事件处理器
• 事件处理器通过事件对象 e 拿到扭转后的状态，并更新组件的 state
• 一旦通过 setState 办法更新 state，就会触发视图的从新渲染，实现表单组件的更新

受控组件缺点： 表单元素的值都是由 React 组件进行治理，当有多个输入框，或者多个这种组件时，如果想同时获取到全副的值就必须每个都要编写事件处理函数，这会让代码看着很臃肿，所以为了解决这种状况，呈现了非受控组件。

（2）非受控组件 如果一个表单组件没有 value props（单选和复选按钮对应的是 checked props）时，就能够称为非受控组件。在非受控组件中，能够应用一个 ref 来从 DOM 取得表单值。而不是为每个状态更新编写一个事件处理程序。

React 官网的解释：

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你能够应用 ref 来从 DOM 节点中获取表单数据。
因为非受控组件将实在数据贮存在 DOM 节点中，所以在应用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码好看性，并且心愿疾速编写代码，应用非受控组件往往能够缩小你的代码量。否则，你应该应用受控组件。

例如，上面的代码在非受控组件中接管单个属性：

class NameForm extends React.Component {constructor(props) {super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {alert('A name was submitted:' + this.input.value);
    event.preventDefault();}
  render() {
    return (<form onSubmit={this.handleSubmit}>
        <label>
          Name:          <input type="text" ref={(input) => this.input = input} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

总结： 页面中所有输出类的 DOM 如果是现用现取的称为非受控组件，而通过 setState 将输出的值保护到了 state 中，须要时再从 state 中取出，这里的数据就受到了 state 的管制，称为受控组件。

state 和 props 触发更新的生命周期别离有什么区别？

state 更新流程： 这个过程当中波及的函数：

1. shouldComponentUpdate: 当组件的 state 或 props 产生扭转时，都会首先触发这个生命周期函数。它会接管两个参数：nextProps, nextState——它们别离代表传入的新 props 和新的 state 值。拿到这两个值之后，咱们就能够通过一些比照逻辑来决定是否有 re-render（重渲染）的必要了。如果该函数的返回值为 false，则生命周期终止，反之持续；

留神：此办法仅作为 性能优化的形式 而存在。不要希图依附此办法来“阻止”渲染，因为这可能会产生 bug。应该 思考应用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()

2. componentWillUpdate：当组件的 state 或 props 产生扭转时，会在渲染之前调用 componentWillUpdate。componentWillUpdate 是 React16 废除的三个生命周期之一。过来，咱们可能心愿能在这个阶段去收集一些必要的信息（比方更新前的 DOM 信息等等），当初咱们齐全能够在 React16 的 getSnapshotBeforeUpdate 中去做这些事；
3. componentDidUpdate：componentDidUpdate() 会在 UI 更新后会被立刻调用。它接管 prevProps（上一次的 props 值）作为入参，也就是说在此处咱们依然能够进行 props 值比照（再次阐明 componentWillUpdate 的确鸡肋哈）。

​

props 更新流程： 绝对于 state 更新，props 更新后惟一的区别是减少了对 componentWillReceiveProps 的调用。对于 componentWillReceiveProps，须要晓得这些事件：

• componentWillReceiveProps：它在 Component 承受到新的 props 时被触发。componentWillReceiveProps 会接管一个名为 nextProps 的参数（对应新的 props 值）。该生命周期是 React16 废除掉的三个生命周期之一。在它被废除前，能够用它来比拟 this.props 和 nextProps 来从新 setState。在 React16 中，用一个相似的新生命周期 getDerivedStateFromProps 来代替它。

Redux 中的 connect 有什么作用

connect 负责连贯 React 和 Redux

（1）获取 state

connect 通过 context 获取 Provider 中的 store，通过 store.getState() 获取整个 store tree 上所有 state

（2）包装原组件

将 state 和 action 通过 props 的形式传入到原组件外部 wrapWithConnect 返回—个 ReactComponent 对 象 Connect，Connect 重 新 render 内部传入的原组件 WrappedComponent，并把 connect 中传入的 mapStateToProps，mapDispatchToProps 与组件上原有的 props 合并后，通过属性的形式传给 WrappedComponent

（3）监听 store tree 变动

connect 缓存了 store tree 中 state 的状态，通过以后 state 状态 和变更前 state 状态进行比拟，从而确定是否调用 this.setState()办法触发 Connect 及其子组件的从新渲染

Redux 怎么实现属性传递，介绍下原理

react-redux 数据传输∶ view–>action–>reducer–>store–>view。看下点击事件的数据是如何通过 redux 传到 view 上：

• view 上的 AddClick 事件通过 mapDispatchToProps 把数据传到 action —> click:()=>dispatch(ADD)
• action 的 ADD 传到 reducer 上
• reducer 传到 store 上 const store = createStore(reducer);
• store 再通过 mapStateToProps 映射穿到 view 上 text:State.text

代码示例∶

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';
class App extends React.Component{render(){let { text, click, clickR} = this.props;
        return(
            <div>
                <div> 数据: 已有人{text}</div>
                <div onClick={click}> 加人 </div>
                <div onClick={clickR}> 减人 </div>
            </div>
        )
    }
}
const initialState = {text:5}
const reducer = function(state,action){switch(action.type){
        case 'ADD':
            return {text:state.text+1}
        case 'REMOVE':
            return {text:state.text-1}
        default:
            return initialState;
    }
}

let ADD = {type:'ADD'}
let Remove = {type:'REMOVE'}

const store = createStore(reducer);

let mapStateToProps = function (state){
    return{text:state.text}
}

let mapDispatchToProps = function(dispatch){
    return{click:()=>dispatch(ADD),
        clickR:()=>dispatch(Remove)
    }
}

const App1 = connect(mapStateToProps,mapDispatchToProps)(App);

ReactDOM.render(<Provider store = {store}>
        <App1></App1>
    </Provider>,document.getElementById('root')
)

React.forwardRef 是什么？它有什么作用？

React.forwardRef 会创立一个 React 组件，这个组件可能将其承受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特地有用：

• 转发 refs 到 DOM 组件
• 在高阶组件中转发 refs