React中的fragment和StrictMode

最新推荐文章于 2024-03-21 21:35:20 发布

小小白学计算机

最新推荐文章于 2024-03-21 21:35:20 发布

阅读量767

点赞数

文章标签： React Fragment StrictMode 生命周期方法 DOM优化废弃API检查

本文链接：https://blog.csdn.net/weixin_44827418/article/details/121730923

版权

React 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、fragment

在之前的开发中，我们总是在一个组件中返回内容时包裹一个div元素：
在这里插入图片描述
我们又希望可以不渲染这样一个div应该如何操作呢？

使用Fragment
Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点；

React还提供了Fragment的短语法：

它看起来像空标签 <> </>；
但是，如果我们需要在Fragment中添加key，那么就不能使用短语法

二、StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。
在这里插入图片描述

与 Fragment 一样，StrictMode 不会渲染任何可见的 UI；
它为其后代元素触发额外的检查和警告；
严格模式检查仅在开发模式下运行；它们不会影响生产构建；

可以为应用程序的任何部分启用严格模式：

不会对 Header 和 Footer 组件运行严格模式检查；
但是，ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查；

三、严格模式检查的是什么？

但是检测，到底检测什么呢？

识别不安全的生命周期：

在这里插入图片描述

使用过时的ref API
使用废弃的findDOMNode方法

在之前的React API中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了

检查意外的副作用

这个组件的constructor会被调用两次；
这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用；
在生产环境中，是不会被调用两次的；

import React, {PureComponent, StrictMode} from 'react';
class Home extends PureComponent {
    /*UNSAFE_componentWillMount() {
        console.log('home componentWillMount')
    }*/
    constructor(props) {
        super(props);
        console.log('home constructor')
    }
    render() {
        return (
            <div>
                Home
            </div>
        );
    }
}
class Profile extends PureComponent {
    /*UNSAFE_componentWillMount() {
        console.log('profile componentWillMount')
    }*/
    constructor(props) {
        super(props);
        console.log('profile constructor')
    }
    render() {
        return (
            <div>
                Profile
            </div>
        );
    }
}

class App extends PureComponent {
    render() {
        return (
            <div>
                <StrictMode>
                    <Home/>
                </StrictMode>
                <Profile/>
            </div>
        );
    }
}

export default App;