React 面试必知必会 Day12

December 17, 2023
测试
测试
测试
测试
4 分钟阅读

这是我参与更文挑战的第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。

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多