React 面试必知必会 Day8

·  阅读 3207
React 面试必知必会 Day8

这是我参与更文挑战的第14天,活动详情查看:更文挑战

大家好,我是 @洛竹,一个坚持写作的博主,感恩你的每一个点赞和评论。

本文首发于 洛竹的官方网站

本文翻译自 sudheerj/reactjs-interview-questions

本文同步于公众号洛竹早茶馆,转载请联系作者。

1. 你如何实现服务器端渲染或SSR?

React 已经具备了在 Nod e服务器上处理渲染的能力。有一个特殊版本的 DOM 渲染器,它与客户端的模式相同。

import ReactDOMServer from 'react-dom/server';
import App from './App';

ReactDOMServer.renderToString(<App />)。
复制代码

这个方法将把常规的 HTML 输出为一个字符串,然后可以作为服务器响应的一部分放在页面主体内。在客户端,React 检测到预渲染的内容,并无缝地衔接该内容。

2. 如何在 React 中启用生产模式?

你应该使用 Webpack 的 DefinePlugin 方法来设置 NODE_ENVproduction,通过它来剥离诸如 propType 验证和额外警告的东西。除此之外,如果你对代码进行最小化处理,例如 Uglify 的无效代码消除法,剥离出只用于开发的代码和注释,这将极大地减少你的包的大小。

3. 什么是 CRA 以及它的好处?

create-react-app CLI 工具允许你快速创建和运行React应用程序,无需配置步骤。

让我们使用 CRA 创建 Todo 应用程序。

# 安装
$ npm install -g create-react-app

# 创建新项目
$ create-react-app todo-app
$ cd todo-app

# 构建、测试、运行
$ npm run build
$ npm run test
$ npm start
复制代码

它包括我们建立一个 React 应用程序所需要的一切。

  1. 支持 React、JSX、ES6 和 Flow 语法。
  2. 超越 ES6 的语言额外功能,如对象传播操作者。
  3. 自动前缀的 CSS,所以你不需要 -webkit- 或其他前缀。
  4. 一个快速的交互式单元测试运行器,内置支持覆盖率报告。
  5. 一个实时的开发服务器,对常见的错误发出警告。
  6. 一个构建脚本,用于捆绑 JS、CSS 和图片,并提供哈希和源码图。

4. 安装中的生命周期方法的顺序是什么?

当一个组件的实例被创建并插入到 DOM 中时,生命周期方法按以下顺序被调用。

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

5. 在 React v16 中,有哪些生命周期方法将被废弃?

以下生命周期方法将是不安全的编码做法,在异步渲染中会出现更多问题。

  1. componentWillMount()
  2. componentWillReceiveProps()
  3. componentWillUpdate()

从 React v16.3 开始,这些方法被别名为 UNSAFE_ 前缀,未加前缀的版本将在 React v17 中被移除。

6. getDerivedStateFromProps() 生命周期方法的目的是什么?

新的静态的 getDerivedStateFromProps() 生命周期方法在一个组件实例化后以及重新渲染前被调用。它可以返回一个对象来更新状态,也可以返回 null 来表示新的 props 不需要任何状态更新。

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // ...
  }
}
复制代码

这个生命周期方法与 componentDidUpdate() 一起涵盖了 componentWillReceiveProps() 的所有用例。

7. getSnapshotBeforeUpdate() 生命周期方法的目的是什么?

新的 getSnapshotBeforeUpdate() 生命周期方法会在 DOM 更新前被调用。这个方法的返回值将作为第三个参数传递给 componentDidUpdate()

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}
复制代码

这个生命周期方法与 componentDidUpdate() 一起涵盖了 componentWillUpdate() 的所有用例。

8. Hooks 是否取代了渲染 props 和高阶组件?

渲染 props 和高阶组件都只渲染一个 children,但在大多数情况下,Hooks 是一种更简单的方式,通过减少树中的嵌套来达到这个目的。

9. 推荐用什么方式来命名组件?

建议通过引用来命名组件,而不是使用 displayName

使用 displayName 来命名组件。

export default React.createClass({
  displayName: 'TodoApp',
  // ...
});
复制代码

推荐的方法。

export default class TodoApp extends React.Component {
  // ...
}
复制代码

10. 建议在组件类中方法的排序是什么?

建议从安装到渲染阶段的方法的排序。

  1. static 方法
  2. constructor()
  3. getChildContext()
  4. componentWillMount()
  5. componentDidMount()
  6. componentWillReceiveProps()
  7. shouldComponentUpdate()
  8. componentWillUpdate()
  9. componentDidUpdate()
  10. componentWillUnmount()
  11. 点击处理程序或事件处理程序,如 onClickSubmit()onChangeDescription()
  12. 渲染的 getter 方法,如 getSelectReason()getFooterContent()
  13. 可选的渲染方法,如 renderNavigation()renderProfilePicture()
  14. render()
分类:
前端
标签: