React 面试必知必会 Day12

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

大家好，我是洛竹🎋，一只住在杭城的木系前端🧚🏻‍♀️，如果你喜欢我的文章📚，可以通过点赞帮我聚集灵力⭐️。

1. 如何在 create-react-app 中使用 https 而不是 http？

你只需要是用 HTTPS=true 配置。你可以编辑 package.json scripts 部分：

"scripts": {
 "start": "set HTTPS=true && react-scripts start"
}

或者运行 set HTTPS=true && npm start

2. 如何避免在 create-react-app 中使用相对路径导入？

在项目里根目录创建一个叫 .env 的文件并写入导入的路径：

NODE_PATH=src/app

然后重启调试服务器。现在你应该能够在 src/app 目录下不使用相对路径导入任何东西。

3. 如何在 React Router 中添加 Google Analytics？

在 history 对象上添加一个监听器，以记录每个页面的浏览。

history.listen(function(location) {
  window.ga('set', 'page', location.pathname + location.search);
  window.ga('send', 'pageview', location.pathname + location.search);
});

4. 如何每秒更新一次组件？

你需要使用 setInterval() 来触发变化，但你也需要在组件卸载时清除计时器以防止错误和内存泄漏。

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
}

componentWillUnmount() {
  clearInterval(this.interval)
}

5. 如何在 React 中对内联样式使用 CSS 厂商前缀？

React 不会自动应用 CSS 厂商前缀。你需要手动添加 CSS 厂商前缀。

<div
  style={{
    transform: 'rotate(90deg)',
    WebkitTransform: 'rotate(90deg)', // 注意大写 'W'
    msTransform: 'rotate(90deg)', // 'ms' 是全小写
  }}
/>

6. 如何使用 React 和 ES6 导入和导出组件？

你应该使用默认值来导出组件

import React from 'react';
import User from 'user';

export default class MyProfile extends React.Component {
  render() {
    return <User type="customer">//...</User>;
  }
}

有了导出指定符，MyProfile 将成为成员并导出到这个模块，同样可以在其他组件中导入而不提及名称。

7. 为什么组件构造器只会被调用一次？

React 的 reconciliation（协调）算法假定，在没有任何相反信息的情况下，如果一个自定义组件在随后的渲染中出现在相同的地方，它就是之前的那个组件，所以 React 重用之前的实例而不是创建一个新的。

8. 如何在 React 中定义常量？

你可以使用 ES7 的 静态 字段来定义常量。

class MyComponent extends React.Component {
  static DEFAULT_PAGINATION = 10;
}

静态字段是类字段第三阶段提案的一部分。

9. 如何在 React 中以编程方式触发点击事件？

你可以使用 ref props 通过回调获得对底层 HTMLInputElement 对象的引用，将该引用存储为类属性，然后使用该引用从事件处理程序中使用 HTMLElement.click 方法触发点击。

这可以分两步进行。

在 render 方法中创建 ref：

<input ref={input => (this.inputElement = input)} />

在你的事件处理程序中应用点击事件。

this.inputElement.click();

10. 有可能在纯 React 中使用 async/await 吗？

如果你想在 React 中使用 async/await，你将需要 Babel 和 transform-async-to-generator 插件。React Native 已经包含了 Babel 和一系列的转换功能。

本文首发于「掘金专栏」，同步于公众号「洛竹早茶馆」和「洛竹的官方网站」，翻译自 reactjs-interview-questions。