阅读 1171
React 面试必知必会 Day12

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 方法触发点击。

这可以分两步进行。

  1. 在 render 方法中创建 ref:
<input ref={input => (this.inputElement = input)} />
复制代码
  1. 在你的事件处理程序中应用点击事件。
this.inputElement.click();
复制代码

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

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

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

文章分类
前端