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

大家好,我是 @洛竹

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

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

「涨薪必备」React 面试问答系列 Day3

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

「涨薪必备」React 面试问答系列 Day3

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

「涨薪必备」React 面试问答系列 Day3

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

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

「涨薪必备」React 面试问答系列 Day3

评论区

索引目录