React组件化的一些额外知识点补充

目录
  • React的额外补充
    • Portals的使用
    • Fragment的使用
    • 严格模式StrictMode
  • 总结

React的额外补充

Portals的使用

某些情况下,我们希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM 元素上的)。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案:

第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment;

第二个参数(container)是一个 DOM 元素;

import { createPortal } from 'react-dom'

export class App extends PureComponent {
  render() {
    return (
      <div className='app'>
        <h2>App h1</h2>
        { createPortal(<h2>App h2</h2>, document.querySelector('#abc')) }
      </div>
    )
  }
}

通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点中离其最近的父节点:

然而,有时候将子元素插入到 DOM 节点中的不同位置也是有好处的:

比如说,我们准备开发一个Modal组件,它可以将它的子组件渲染到一个单独的节点, 这个节点在屏幕的中间位置:

步骤一:修改index.html添加新的节点

<div id="root"></div>
<div id="abc"></div>
<!-- 添加新节点 -->
<div id="modal"></div>

步骤二:编写这个节点的样式

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: skyblue;
}

步骤三:编写组件代码, 将组件中传递过来的元素渲染到modal节点上

export class Modal extends PureComponent {
  render() {
    return createPortal(this.props.children, document.querySelector("#modal"))
  }
}

步骤四:在根组件App中使用Modal组件并且向Modal组件中传递一些元素

export class App extends PureComponent {
  render() {
    return (
      <div className='app'>
        <Modal>
          <h2>Modal的标题</h2>
          <p>Modal的内容</p>
        </Modal>
      </div>
    )
  }
}

这样传递给Modal组件的元素就会被单独渲染到modal节点上, 且该节点会显示在屏幕的正中央

Fragment的使用

在之前的开发中,我们总是在一个组件中返回内容时包裹一个div元素:

我们又希望可以不渲染这样一个div应该如何操作呢?

这个时候就可以使用Fragment, 使用Fragment需要先导入Fragment在react包下

Fragment 允许你将子列表分组,而不会渲染到页面中, 类似于Vue中的template和小程序当中的block;

import React, { PureComponent, Fragment } from 'react'

export class App extends PureComponent {
  render() {
    return (
      <Fragment>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈</p>
      </Fragment>
    )
  }
}

export default App

React还提供了Fragment的语法糖的写法:

它看起来像空标签 <> </>;

import React, { PureComponent, Fragment } from 'react'

export class App extends PureComponent {
  render() {
    return (
      <>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈</p>
      </>
    )
  }
}

export default App

但是,如果我们需要在Fragment中添加key,那么此时就不能使用语法糖, 必须完整的写Fragment

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      students: [
        {name: "aaa", age: 18},
        {name: "bbb", age: 19},
        {name: "ccc", age: 20},
      ]
    }
  }

  render() {
    const { students } = this.state
    return (
      <>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈</p>

        {
          students.map(item => {
            return(
              // 绑定key时不能使用语法糖
              <Fragment key={item.name}>
                <h2>名称: {item.name}</h2>
                <h2>年龄: {item.age}</h2>
              </Fragment>
            )
          })
        }
      </>
    )
  }
}

严格模式StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具:

与 Fragment 一样,StrictMode 不会渲染任何可见的 UI;

它的作用是为其后代元素触发额外的检查和警告, 检查代码中潜在的风险;

严格模式检查仅在开发模式下运行, 它们不会影响生产环境的构建;

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

例如下面代码中, 不会对 Header 和 Footer 组件运行严格模式检查;

但是,ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查;

<Header/>
  <StrictMode>
    <div>
      <ComponentOne/>
      <ComponentTwo/>
    </div>
  </StrictMode>
<Footer/>

但是严格模式的检测,到底检测什么呢?

1.识别不安全的生命周期:

2.识别是否使用了过时的ref API

3.检查是否产生意外的副作用

这个组件的constructor会被调用两次;

这是严格模式下故意进行的操作,让你来查看在这里写的一些逻辑代码被调用多次时,是否会产生一些副作用;

在生产环境中,是不会被调用两次的;

4.检查是否使用废弃的findDOMNode方法

在之前的React API中,可以通过findDOMNode来获取DOM,不过已经不推荐使用了,可以自行学习演练一下

5.检测是否使用过时的context API

早期的Context是通过static属性声明Context对象属性,通过getChildContext返回Context对象等方式来使用Context的;

目前这种方式已经不推荐使用,大家可以自行学习了解一下它的用法;

总结

到此这篇关于React组件化的一些额外知识点的文章就介绍到这了,更多相关React组件化知识点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • react 组件实现无缝轮播示例详解

    目录 正文 无缝轮播 实现思路 构思使用时代码结构 Carousel组件 CarouselItem组件 完善组件 完成小圆点 正文 需求是做一个无缝轮播图,我说这不是有很多现成的轮子吗?后来了解到他有一个特殊的需求,他要求小圆点需要在轮播图外面,因为现在大部分插件都是将小圆点写在轮播图内部的,这对于不了解插件内部结构的小伙伴确实不知道如何修改. 很久没有写插件的我准备写一个插件(react) 无缝轮播 无缝轮播从最后一张到第一张的过程中不会原路返回,它就像轮子似的,从结束到开始是无缝连接的,非常

  • react组件的创建与更新实现流程详解

    目录 React源码执行流程图 legacyRenderSubtreeIntoContainer legacyCreateRootFromDOMContainer createLegacyRoot ReactDOMBlockingRoot createRootImpl createContainer createFiberRoot createHostRootFiber createFiber updateContainer 总结 这一章节就来讲讲ReactDOM.render()方法的内部实现

  • React HOC高阶组件深入讲解

    目录 1. 概念 2. 属性代理 2.1 代理props 2.2 条件渲染 2.3 添加状态 3. 反向继承 3.1 拦截渲染 3.2 劫持生命周期 3.3 操作state 3.4 修改react树 3.5 记录渲染性能 4. 使用装饰器 4.1 安装和配置 4.2 使用 5.总结 1. 概念 高阶组件和高阶函数的类似,使用函数接收一个组件,并返回一个组件. function withList(WrapComponent) { return class extends Component { r

  • React组件的应用介绍

    目录 1. 介绍 2. 组件的创建方式 2.1 函数创建组件 2.2 类组件 3. 父子组件传值 3.1 函数组件 3.2 类组件 1. 介绍 组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思.从概念上类似于 JavaScript 类或函数.它接受任意的形参( props ),并返回用于描述页面展示内容的 React元素( jsx ). 定义好的组件一定要有返回值. react中定义组件的2种方式 函数组件(无状态组件/UI组件) 类组件(状态组件/容器组件) 2. 组件

  • React组件如何优雅地处理异步数据详解

    目录 前言 API介绍 Suspense Error Boundaries 完整方案 处理异步请求的子组件 外层组件 总结 前言 我们在编写React应用的时候,常常需要在组件里面异步获取数据.因为异步请求是需要一定时间才能结束的,通常我们为了更好的用户体验会在请求还没有结束前给用户展示一个loading的状态,然后如果发生了错误还要在页面上面展示错误的原因,只有当请求结束并且没有错误的情况下,我们才渲染出最终的数据.这个需求十分常见,如果你的代码封装得比较好的话,你的处理逻辑大概是这样的: c

  • React组件化的一些额外知识点补充

    目录 React的额外补充 Portals的使用 Fragment的使用 严格模式StrictMode 总结 React的额外补充 Portals的使用 某些情况下,我们希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM 元素上的). Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案: 第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment; 第二个参数(conta

  • vue3组件化开发常用API知识点总结

    目录 组件化思想 组件通讯 $props $emits $parent $attrs proviede & inject 插槽 slot 渲染作用域 作用域插槽 v-model 表单组件 自定义组件 改变默认参数 样式绑定相关 class style 总结 组件化思想 为什么使用组件化开发? 当前前端比较流行的 Vue React 等框架,都会通过编写组件来完成业务需求,也就是组件化开发.包括小程序开发也会用到组件化开发的思想. 分析组件化思想开发应用程序: 将一个完整页面拆分成很多个小组件 每

  • React组件化学习入门教程讲解

    目录 模块化 模块 模块化 组件化 组件 组件化 函数式组件 创建函数组件 Props参数传递(重点) 复合函数组件 类式组件 创建实例 用户自定义组件 模块化 模块 理解:向外提供特定功能的js程序,一般就是一个js文件. 为什么:要拆成模块,随着业务逻辑增加,代码越来越多且复杂. 作用:复用js,简化js的编写,提高js运行效率. 模块化 当应用的js都以模块来编写,这个应用就是一个模块化的应用 组件化 组件 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)

  • react组件中的constructor和super知识点整理

    1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是? typeofChild === 'function' , 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 } B.Child类调用时候( new Child() ),会优先执行,并且自动执行Child的constructor函数. constructor() { console.log('执

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • Hello React的组件化方式之React入门小案例演示

    目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化 组件化的方式 数据依赖 事件绑定 其他案例练习 电影列表展示 计数器的案例 React初体验 接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引入React开发依赖 <!-- crossorigin用来解决跨域 --> <script src="https://unpk

  • React styled components样式组件化使用流程

    目录 安装 基本使用 props传值修改样式 样式化组件 样式扩展 动画 将style样式写在同一个文件中并且组件化使用. 安装 npm i styled-components 基本使用 const 样式组件名=引入的styled-components.替代的标签(支持sass写法) 再使用样式组件名将标签包裹起来即可 import React, { Component } from 'react'; import styled from 'styled-components'; class A

  • 测试平台开发vue组件化重构前端代码

    目录 基于 springboot+vue 的测试平台开发 一.为什么重构 二.如何拆分 1. 补充对应知识 2. 合理拆分 三.关于项目 基于 springboot+vue 的测试平台开发 继续更新(人在魔都 T_T). 这期其实并不是一个详细的开发过程记录,主要还是针对本次前端重构来聊聊几个关注点. 目前重构的总进度在80%,重构完的页面没什么变化,再回顾一下. 一.为什么重构 目前项目的功能开发重点还是在接口管理这一大块,内容多,任务重,可当我着手准备继续开发新功能的时候发现了个重大的问题.

  • 详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • 简要剖析PHP的Yii框架的组件化机制的基本知识

    组件是 Yii 应用的主要基石.是 yii\base\Component 类或其子类的实例.三个用以区分它和其它类的主要功能有: 属性(Property) 事件(Event) 行为(Behavior) 或单独使用,或彼此配合,这些功能的应用让 Yii 的类变得更加灵活和易用.以小部件 yii\jui\DatePicker 来举例,这是个方便你在 视图中生成一个交互式日期选择器的 UI 组件: use yii\jui\DatePicker; echo DatePicker::widget([ 'l

随机推荐