React 面试必知必会 Day8

大家好，我是洛竹?，一只住在杭城的木系前端?，如果你喜欢我的文章?，可以通过点赞帮我聚集灵力⭐️。 本文首发于 洛竹的官方网站，翻译自 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_ENV 为 production，通过它来剥离诸如 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()