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。