网站开发项目经验描述怎么写,青岛无间设计公司网站,佛山建站,泸溪县建设局网站在之前的文章 探讨#xff1a;围绕 props 阐述 React 通信 中总结了关于“父子”组件传值#xff0c;但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时#xff0c;传递 props 就会变得很麻烦。
实际案例#xff1a; 下述展示有两种状态#xff1a;① 详…在之前的文章 探讨围绕 props 阐述 React 通信 中总结了关于“父子”组件传值但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时传递 props 就会变得很麻烦。
实际案例 下述展示有两种状态① 详情态② 编辑态tag形式
组件设计通过 isDetailed 来决定是“详情”还是“编辑”。 开发过程拆分了四层根组件设置了 isDetailed 来确定最终确定 ViolationGroup 中展示。 {data.map((item) isDetailed ? (div{item.disposeReasonName}/div) : (Tag bordered{false}{item.disposeReasonName}/Tag),)}#mermaid-svg-XexWk0Vn8Po8kmgJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .error-icon{fill:#552222;}#mermaid-svg-XexWk0Vn8Po8kmgJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-XexWk0Vn8Po8kmgJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .marker.cross{stroke:#333333;}#mermaid-svg-XexWk0Vn8Po8kmgJ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-XexWk0Vn8Po8kmgJ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .cluster-label text{fill:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .cluster-label span{color:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .label text,#mermaid-svg-XexWk0Vn8Po8kmgJ span{fill:#333;color:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .node rect,#mermaid-svg-XexWk0Vn8Po8kmgJ .node circle,#mermaid-svg-XexWk0Vn8Po8kmgJ .node ellipse,#mermaid-svg-XexWk0Vn8Po8kmgJ .node polygon,#mermaid-svg-XexWk0Vn8Po8kmgJ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-XexWk0Vn8Po8kmgJ .node .label{text-align:center;}#mermaid-svg-XexWk0Vn8Po8kmgJ .node.clickable{cursor:pointer;}#mermaid-svg-XexWk0Vn8Po8kmgJ .arrowheadPath{fill:#333333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-XexWk0Vn8Po8kmgJ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-XexWk0Vn8Po8kmgJ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-XexWk0Vn8Po8kmgJ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-XexWk0Vn8Po8kmgJ .cluster text{fill:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ .cluster span{color:#333;}#mermaid-svg-XexWk0Vn8Po8kmgJ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-XexWk0Vn8Po8kmgJ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 根组件 DetailViolationGroupList Item ViolationGroup props 传递逐层传递
根组件设置 isDetailed然后逐层传递。 ☝️缺点需要找到最近的父节点“状态提升” 到太高的层级会导致“逐层传递props”的情况。
✌️优势这样做可以让哪些组件用了哪些数据变得十分清晰 context 传递深层传递
Context 使组件向其下方的整个树提供信息会穿过中间的任何组件。子组件可以通过某种方式“访问”到组件树中某处在其上层的数据。
无需逐层透传直接广播形式需要的组件直接获取。 创建 一个 context。可以将其命名为 IsDetailedContext)
export const IsDetailedContext createContext(false);在需要数据的组件内 使用 刚刚创建的 context。ViolationGroup 将会使用 IsDetailedContext const isDetailed useContext(IsDetailedContext);在指定数据的组件中 提供 这个 context。 根组件 将会提供 IsDetailedContext
IsDetailedContext.Provider value{true}DetailViolationGroupList violationGroupList{data?.detail?.violationGroupList}/DetailViolationGroupList
/IsDetailedContext.Provider☝️缺点对数据的抽离导致理解成本略高。
✌️优势许多组件需要相同的信息避免通过许多中间组件向下传递 props冗长 ⚓ Context 的工作方式类似于 CSS 属性继承。在 React 中覆盖来自上层的某些 context 的唯一方法是将子组件包裹到一个提供不同值的 context provider 中。
包装成组件形式
定义组件形式
/* context.js */
import { createContext, useContext } from react;export const IsDetailedContext createContext(false);export const IsDetailedProvider ({ children, isDetailed }) {const originalIsDetailed useContext(IsDetailedContext); // 原始默认值 falsereturn (IsDetailedContext.Provider value{isDetailed ?? originalIsDetailed}{children}/IsDetailedContext.Provider);
};使用方
IsDetailedProvider isDetailed{true}DetailViolationGroupListviolationGroupList{data?.detail?.violationGroupList}/DetailViolationGroupList
/IsDetailedProvider知识点空值合并运算符 空值合并运算符??是一个逻辑运算符当左侧的操作数为 null 或者 undefined 时返回其右侧操作数否则返回左侧操作数。与逻辑或运算符||不同逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说如果使用 || 来为某些变量设置默认值可能会遇到意料之外的行为。 ?? 1 // || 1 // 1
0 ?? 1 // 0
0 || 1 // 1与 state 结合
Context 不局限于静态值。如果在下一次渲染时传递不同的值React 将会更新读取它的所有下层组件可以和 state 结合使用。
children 传递jsx
抽象组件并将 JSX 作为 children 传递。 #mermaid-svg-nnhMDHOWM1SdDjxC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC .error-icon{fill:#552222;}#mermaid-svg-nnhMDHOWM1SdDjxC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-nnhMDHOWM1SdDjxC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-nnhMDHOWM1SdDjxC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-nnhMDHOWM1SdDjxC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-nnhMDHOWM1SdDjxC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-nnhMDHOWM1SdDjxC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-nnhMDHOWM1SdDjxC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-nnhMDHOWM1SdDjxC .marker.cross{stroke:#333333;}#mermaid-svg-nnhMDHOWM1SdDjxC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-nnhMDHOWM1SdDjxC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC .cluster-label text{fill:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC .cluster-label span{color:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC .label text,#mermaid-svg-nnhMDHOWM1SdDjxC span{fill:#333;color:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC .node rect,#mermaid-svg-nnhMDHOWM1SdDjxC .node circle,#mermaid-svg-nnhMDHOWM1SdDjxC .node ellipse,#mermaid-svg-nnhMDHOWM1SdDjxC .node polygon,#mermaid-svg-nnhMDHOWM1SdDjxC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-nnhMDHOWM1SdDjxC .node .label{text-align:center;}#mermaid-svg-nnhMDHOWM1SdDjxC .node.clickable{cursor:pointer;}#mermaid-svg-nnhMDHOWM1SdDjxC .arrowheadPath{fill:#333333;}#mermaid-svg-nnhMDHOWM1SdDjxC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-nnhMDHOWM1SdDjxC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-nnhMDHOWM1SdDjxC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-nnhMDHOWM1SdDjxC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-nnhMDHOWM1SdDjxC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-nnhMDHOWM1SdDjxC .cluster text{fill:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC .cluster span{color:#333;}#mermaid-svg-nnhMDHOWM1SdDjxC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-nnhMDHOWM1SdDjxC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} children 根组件 Item ViolationGroup 上述示例让 Item 把 children 当做一个参数渲染 ItemViolationGroup isDetailed{true} //Item然后去掉DetailViolationGroupList 层。这样就减少了定义数据的组件和使用数据的组件之间的层级。 直接在父组件中引用使用
