大家好，我是 @洛竹

本文首发于 洛竹的官方网站

本文翻译自 sudheerj/reactjs-interview-questions

本文同步于公众号洛竹早茶馆，转载请联系作者。

1. refs 转发是什么？

Ref 转发 是让某些组件可以使用它们接收的 ref 的特性，这些组件还可以进一步将其传递给子组件。

const ButtonElement = React.forwardRef((props, ref) => (
  <button ref={ref} className="CustomButton">
    {props.children}
  </button>
));

// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>;

2. refs 回调和 findDOMNode() 哪个是首选项？

最好使用 refs 回调 而不是 findDOMNode() API。因为 findDOMNode() 将来会阻止对 React 的某些改进。

使用 findDOMNode 的“传统”方法：

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }

  render() {
    return <div />;
  }
}

推荐的方式是：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.node = createRef();
  }
  componentDidMount() {
    this.node.current.scrollIntoView();
  }

  render() {
    return <div ref={this.node} />;
  }
}

3. 为什么 Strings Refs 被遗弃了？

如果你以前使用过 React，那么你可能会熟悉一个较旧的 API，其中的ref 属性是一个字符串，例如 ref = {textInput'}，并且 DOM 节点作为this.refs.textInput 访问。我们建议你不要这样做，因为 String 引用有以下问题，并且被认为是旧版的。字符串引用已经在 React v16中被删除。

1. 他们迫使 React 跟踪当前正在执行的组件。这是有问题的，因为它使 React 模块成为有状态的，并因此在打包 React 模块时冲突而引起奇怪的错误。

2. 它们是“不可组合的” — 如果库在传递的子项上放置了引用，则用户不能在其上放置其他引用。回调引用完全可以组合。

3. 他们不能和静态分析工具配合（比如 Flow）。Flow 无法猜测出框架 this.refs 上出现的字符串引用及其类型（可能不同）。 回调引用对静态分析更友好。

4. 它无法像大多数人期望的那样使用“渲染回调”模式（例如）

   class MyComponent extends Component {
     renderRow = index => {
       // This won't work. Ref will get attached to DataTable rather than MyComponent:
       return <input ref={'input-' + index} />;
   
       // This would work though! Callback refs are awesome.
       return <input ref={input => (this['input-' + index] = input)} />;
     };
   
     render() {
       return <DataTable data={this.props.data} renderRow={this.renderRow} />;
     }
   }

4. 虚拟 DOM 是什么？

_Virtual DOM_（VDOM）是_Real DOM_的内存表示形式。 UI的表示形式保留在内存中，并与“真实” DOM同步。 这是在调用渲染函数和在屏幕上显示元素之间发生的一步。 这整个过程称为 协调。

5. 虚拟 DOM 原理

虚拟 DOM 工作原理只有三个简单的步骤。

1. 无论何时任何基础数据发生更改，整个 UI 都将以虚拟 DOM 表现形式重新呈现。

2. 然后，计算先前的 DOM 表现形式与新的 DOM 表现形式之间的差异。

3. 一旦完成计算，将只会更新内容真正改变的那部分真是 DOM。

6. Shadow DOM 和 Virtual DOM 有什么区别？

Shadow DOM 是一种浏览器技术，主要用于确定 web components 中的变量和 CSS。Virtual DOM 是由浏览器 API 之上的 JavaScript 库实现的概念。

7. React Fiber 是什么?

Fiber 是React v16 中新的 协调 引擎或核心算法的重新实现。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用工作的能力，以及为不同类型的更新分配优先级等方面的适用性和新的并发原语。

8. React Fiber 的主要设计目的是什么？

React Fiber 的目标是提高其对动画、布局和手势等领域的适用性。它的 headline 功能是增量渲染：能够将渲染工作拆分为多个块并将其分布到多个帧中。

9. 受控组件是什么？

在用户输入后能够控制表单中输入元素的组件被称为“受控组件”，比如每一个状态概念都将有一个相关的处理函数

例如下面的例子中，为了将名字转换为全大写，我们使用 handleChange：

handleChange(event) {
   this.setState({value: event.target.value.toUpperCase()})
}

10. 非受控组件是什么？

受控组件是那些把状态维护在其内部的组件，当你想要获得当前值时需要使用 ref 查询 DOM。这有一点像传统的 HTML。

在下面的 UserProfile 组件中，name 输入被使用 ref 获取：

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          {'Name:'}
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

大多数场景中，我们建议使用受控组件来代替表单组件。