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