react学习—常用工具

一、常用工具

1、严格模式

StrictMode(React.StrictMode)，本质是一个组件，该组件不进行UI渲染（React.Fragment <> </>），它的作用是，在渲染内部组件时，发现不合适的代码。

• 识别不安全的生命周期

//App
import React, { Component } from 'react'
export default class App extends Component {
  componentWillMount() {
    console.log("componentWillMount")
  }
  render() {
    return (
      <div></div>
    )
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App"

ReactDOM.render((
  <React.StrictMode>
      <App/>
  </React.StrictMode>
), document.getElementById('root'));

• 关于使用过时字符串 ref API 的警告

import React, { Component } from 'react'

export default class App extends Component {
  componentWillMount() {
    console.log("componentWillMount")
  }
  render() {
    return (
      <div ref="div"></div>
    )
  }
}

• 关于使用废弃的 findDOMNode 方法的警告

• 检测意外的副作用

  • React要求，副作用代码仅出现在以下生命周期函数中
  • 1. ComponentDidMount
  • 2. ComponentDidUpdate
  • 3. ComponentWillUnMount
       副作用：一个函数中，做了一些会影响函数外部数据的事情，例如：

1. 异步处理
2. 改变参数值
3. setState
4. 本地存储
5. 改变函数外部的变量

相反的，如果一个函数没有副作用，则可以认为该函数是一个纯函数

在严格模式下，虽然不能监控到具体的副作用代码，但它会将不能具有副作用的函数调用两遍，以便发现问题。（这种情况，仅在开发模式下有效）

• 检测过时的 context API

2、Profiler

性能分析工具

分析某一次或多次提交（更新），涉及到的组件的渲染时间

火焰图：得到某一次提交，每个组件总的渲染时间以及自身的渲染时间

排序图：得到某一次提交，每个组件自身渲染时间的排序

组件图：某一个组件，在多次提交中，自身渲染花费的时间

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！