「涨薪必备」React 面试问答系列 Day3
洛竹 133 4

大家好,我是 @洛竹

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

本文翻译自 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 表现形式重新呈现。

vdom

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

vdom2

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

vdom3

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>
    );
  }
}

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

预览图
评论区

索引目录