React相关知识点整理_Fragments & Portals & Refs

$\color{#737C93}{Fragments}$

作用

JSX语法仅一个组件仅支持一个元素返回，如果存在 条件渲染 或者 相同层级元素，则需要设置额外的冗余包装元素；Fragment是React提供的包装方案，不会影响 真实DOM渲染，也没有 样式作用

使用方式

从 react库 中引入Fragment，采用 <Fragment></Fragment>， 或者 <></> 形式包裹组件元素

示例

//方法一
import {Fragment} from 'react';
const Post = () => {  
    return (  
        <Fragment>  
            <PostTitle />  
            <PostBody />  
        </Fragment>  
    );  
}
//方法二
const Post = () => {  
    return (  
        <>  
            <PostTitle />  
            <PostBody />  
        </>  
    );  
}

$\color{#737C93}{Portals}$

作用

为了灵活设置 渲染组件的DOM节点，保持更好的 DOM结构。
比如 弹窗蒙层：逻辑上属于弹窗组件，而渲染结构上又是 页面级别，如果依旧将蒙层作为 子组件 渲染在页面中，可能 导致样式和DOM结构的不清晰。因此需要 此方法 重新设置 组件关联渲染的 DOM节点

使用方式

因为是操作DOM节点的方法，所以从 react-dom 库 中引入createPortal，采用 createPortal(children, domNode, key?)设置组件需要挂载的DOM节点

示例

import { createPortal } from 'react-dom';  
//..
<div>  
    <p>This child is placed in the parent div.</p>  
    {createPortal(<p>This child is placed in the document body.</p>,  document.body)}  
</div>

$\color{#737C93}{Refs}$

作用

用于关联DOM，通过逻辑 直接 操作，获取 DOM信息和值。相比于 useState获取某个状态值的改变，这个hook更专注于 结果值的获取，而不是过程值的变化，比如input值的获取，不需要实时监测输入，只需要获取最终输入值，此时采用useRef更为优雅

使用方式

从 react库 中引入useRef，采用 useRef(initialValue)定义ref引用，再在需要使用的组件上使用ref属性关联此引用定义

示例

import {useRef} from 'react';
//..
const emailRef = useRef();
<Input ref={emailRef} type="email">E-Mail</Input>

Demo案例

以下为用户输入表单的demo，采用了以上三个知识点开发，代码结构更为简洁，请参考： github.com/nickyyoung2…