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

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

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

ReactDOMServer.renderToString(<App />)。

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

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

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

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

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

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

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

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

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

  • componentWillMount()
  • componentWillReceiveProps()
  • componentWillUpdate()

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

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

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

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

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

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

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

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}

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

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

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

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

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

使用 displayName 来命名组件。

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

推荐的方法。

export default class TodoApp extends React.Component {
  // ...
}

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

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

  • static 方法
  • constructor()
  • getChildContext()
  • componentWillMount()
  • componentDidMount()
  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • componentDidUpdate()
  • componentWillUnmount()
    点击处理程序或事件处理程序,如 onClickSubmit() 或 onChangeDescription()
    渲染的 getter 方法,如 getSelectReason() 或 getFooterContent()
    可选的渲染方法,如 renderNavigation() 或 renderProfilePicture()
    render()

转载于:https://juejin.cn/post/6973675487977537549

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。