首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React 面试必知必会 Day8

React 面试必知必会 Day8

作者头像
用户1250838
发布2021-07-30 11:09:49
2.3K0
发布2021-07-30 11:09:49
举报
文章被收录于专栏:洛竹早茶馆洛竹早茶馆

大家好,我是洛竹?,一只住在杭城的木系前端?,如果你喜欢我的文章?,可以通过点赞帮我聚集灵力⭐️。 本文首发于 洛竹的官方网站,翻译自 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()
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-07-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 洛竹早茶馆 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 你如何实现服务器端渲染或SSR?
  • 2. 如何在 React 中启用生产模式?
  • 3. 什么是 CRA 以及它的好处?
  • 4. 安装中的生命周期方法的顺序是什么?
  • 5. 在 React v16 中,有哪些生命周期方法将被废弃?
  • 6. getDerivedStateFromProps() 生命周期方法的目的是什么?
  • 7. getSnapshotBeforeUpdate() 生命周期方法的目的是什么?
  • 8. Hooks 是否取代了渲染 props 和高阶组件?
  • 9. 推荐用什么方式来命名组件?
  • 10. 建议在组件类中方法的排序是什么?
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档