React 面试必知必会 Day10-一一网

这是我参与更文挑战的第16天，活动详情查看：更文挑战

大家好，我是 @洛竹，一个坚持写作的博主，感恩你的每一个点赞和评论。

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

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

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

1. 在 React 中使用 ES6 类的，`super()` 和 `super(props)` 之间有什么区别？

当你想在 constructor() 中访问 this.props 时，你应该把 props 传给 super() 方法。

使用 super(props)：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // { name: 'John', ... }
  }
}
复制代码

使用 super()：

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
  }
}
复制代码

在 constructor() 之外，两者都会显示相同的 this.props 的值。

2. 如何在 JSX 内循环？

你可以简单地使用 Array.prototype.map 与 ES6 箭头函数语法。

例如，对象的 items 数组被映射成组件的数组。

<tbody>
  {items.map(item => (
    <SomeComponent key={item.id} name={item.name} />
  ))}
</tbody>
复制代码

但你不能用 for 循环来迭代。

<tbody>
for (let i = 0; i < items.length; i++) {
  <SomeComponent key={items[i].id} name={items[i].name} />
}
</tbody>
复制代码

这是因为 JSX 标签被转换为函数调用，而且你不能在表达式中使用语句。这可能会改变，因为 do 表达式是第一阶段的建议。

3. 你如何在属性引号中访问 props？

React（或 JSX）不支持属性值内的变量插值。下面的表示方法就不能用了。

<img className="image" src="images/{this.props.image}" />
复制代码

但你可以把任何 JS 表达式放在大括号内作为整个属性值。所以下面的表达式是有效的。

<img className="image" src={'images/' + this.props.image} />
复制代码

使用模板字符串也可以。

<img className="image" src={`images/${this.props.image}`} />
复制代码

4. 什么是带 shape 的 React 原型数组？

如果你想把一个对象数组传递给一个具有特定 shape 的组件，那么使用 React.PropTypes.shape() 作为 React.PropTypes.arrayOf() 的一个参数。

ReactComponent.propTypes = {
  arrayWithShape: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      color: React.PropTypes.string.isRequired,
      fontSize: React.PropTypes.number.isRequired,
    }),
  ).isRequired,
};
复制代码

5. 如何有条件地应用类属性？

你不应该在引号内使用大括号，因为它将被计算为一个字符串。

<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">
复制代码

相反，你需要把大括号移到外面（别忘了在类名之间包括空格）。

<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>
复制代码

模板字符串也可以使用。

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>
复制代码

6. React 和 ReactDOM 之间有什么区别？

react 包包含 React.createElement()、React.Component、React.Children, 以及其他与元素和组件类相关的帮助函数。你可以把这些看作是你构建组件所需要的同构或通用助手。react-dom 包包含 ReactDOM.render()，在 react-dom/server 中，我们有 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup() 的服务器端渲染支持。

7. 为什么 ReactDOM 要从 React 中分离出来？

React 团队致力于将所有与 DOM 相关的功能提取到一个单独的库中，称为 ReactDOM。React v0.14 是第一个分割库的版本。通过查看一些包，react-native、react-art、react-canvas和 react-three，已经很清楚，React 的优秀和本质与浏览器或 DOM 无关。

为了建立更多 React 可以渲染的环境，React 团队计划将主 React 包分成两个：react 和 react-dom。这就为编写可以在网络版 React 和 React Native 之间共享的组件铺平了道路。

8. 如何使用 React label 元素？

如果你试图用标准的 for 属性渲染一个绑定在文本输入上的 <label> 元素，那么它产生的 HTML 会缺少该属性，并在控制台打印出警告。

<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />
复制代码

由于 for 在 JavaScript 中是一个保留关键字，我们可以使用 htmlFor 代替。

<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />
复制代码

9. 如何组合多个内联样式对象？

你可以在常规 React 中使用展开语法。

<button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
  {'Submit'}
</button>
复制代码

如果你使用的是 React Native，那么你可以使用数组符号。

<button style={[styles.panel.button, styles.panel.submitButton]}>
  {'Submit'}
</button>
复制代码

10. 如何在浏览器调整大小时重新渲染视图？

你可以在 componentDidMount() 中监听 resize 事件，然后更新尺寸（width 和 height）。你应该在 componentWillUnmount() 方法中移除监听器。

class WindowDimensions extends React.Component {

  componentWillMount() {
    this.updateDimensions();
  }

  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  }

  render() {
    return (
      <span>
        {this.state.width} x {this.state.height}
      </span>
    );
  }
}
复制代码