通宵整理的react面试题并附上自己的答案

什么是 React Fiber?

Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。
React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

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

• 类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
• 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 ‘无状态组件(stateless component)’，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

React必须使用JSX吗？

React 并不强制要求使用 JSX。当不想在构建环境中配置有关 JSX 编译时，不在 React 中使用 JSX 会更加方便。

每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

例如，用 JSX 编写的代码：

class Hello extends React.Component {
   
  render() {
   
    return <div>Hello {
   this.props.toWhat}</div>;
  }
}
ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

1
2
3
4
5
6
7
8
9
10
11
12
13

可以编写为不使用 JSX 的代码：

class Hello extends React.Component {
   
  render() {
   
    return React.createElement('div', null, `Hello ${
     this.props.toWhat}`);
  }
}
ReactDOM.render(
  React.createElement(Hello, {
   toWhat: 'World'}, null),
  document.getElementById('root')
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

react 实现一个全局的 dialog

import React, {
    Component } from 'react';
import {
    is, fromJS } from 'immutable';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './dialog.css';
let defaultState = {
   
  alertStatus:false,
  alertTip:"提示",
  closeDialog:function(){
   },
  childs:''
}
class Dialog extends Component{
   
  state = {
   
    ...defaultState
  };
  // css动画组件设置为目标组件
  FirstChild = props => {
   
    const childrenArray = React.Children.toArray(props.children);
    return childrenArray[0] || null;
  }
  //打开弹窗
  open =(options)=>{
   
    options = options || {
   };
    options.alertStatus = true;
    var props = options.props || {
   };
    var childs = this.renderChildren(props,options.childrens) || '';
    console.log(childs);
    this.setState({
   
      ...defaultState,
      ...options,
      childs
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42