一、组件化1、使用组合思想来实现组件化在react中组件的复用是组合还是继承是组合2、一个正常的组件有哪些东西3、字段校验1一般校验两种必填非必填是什么类型2PropTypes.elementreact元素类型包含jsx、string、null、undifined3必填属性使用isRequired来约束非必填属性一般给默认值4所有属性都要给类型约束5PropTypes.oneOf([primary, danger, info])取值是其中之一6oneOfType([PropTypes.bool,PropTypes.instanceOf(Array), PropTypes.element])取值类型是其中之一7PropTypes.node比PropTypes.element范围更广8指定user这个对象类型的结构user: PropTypes.shape({name: PropTypes.string.isRequired,age: PropTypes.number,})4、函数命名规则1如果一个函数参与视图渲染前面不加on2如果一个函数跟事件有关前面加on5、什么是render props1在封装React组件时如果一个props属性其值是函数类型并返回JSX视图结果那么这个props属性就是render props即可以参与组件的视图渲染。例如Modal footer{(){xxx}}。这个footer属性就被称为render props2render props在组件化中用的非常多6、{...props}属性穿透父组件给的props直接给到子组件7、Protal1protal提供了一种将子节点渲染到存在于父组件以外的DOM节点的方案比如我要将弹窗挂载到body上2可以把一段JSX结构“穿梭”插入到父级节点中的一种能力语法ReactDOM.createPortal(jsx/,dom节点)8、到底什么是组合怎么理解组合组合是一种设计模式它是React组件化的基础9、如何封装组件第一步根据UI视图拆解结构得到一个一个可独立封装的小组件第二步把这些独立的小部件分别封装第三步再使用props把这些小组件串联起来二、例子import /assets/modal.scss; import PropTypes from prop-types; import { useState } from react; import { createPortal } from react-dom; // 封装button组件 function Button (props) { const { type, children, onClick } props; return ( div classNameself-button span className{type} onClick{onClick}{children}/span /div ); } Button.propTypes { type: PropTypes.oneOf([default, primary, danger, info]), children: PropTypes.string, onClick: PropTypes.func, }; Button.defaultProps { type: default, children: 点击按钮, }; // 封装组件 function Modal (props) { const { title, closable, children, type, visible, onCancel, onOk, onDelete, footer } props; const randerFooter () { switch (type) { case confirm: return ( div Button typeprimary onClick{onOk}确认/Button Button onClick{onCancel}取消/Button /div ); case danger: return ( div Button typedanger onClick{onDelete}删除/Button Button onClick{onCancel}取消/Button /div ); case info: return ( div Button typeinfo onClick{onOk}确认/Button Button onClick{onCancel}取消/Button /div ); default: return ( div Button typeinfo onClick{onCancel}我知道了/Button /div ); } }; const handlerLayer (ev) { console.log(---ev.currentTarget, ev.currentTarget.dataset); console.log(---ev.target, ev.target.dataset); if (ev.target.dataset.self layer) { // 防止事件冒泡到父元素 onCancel(); } }; return ( div classNamelayer style{{ display: visible ? block : none }} >.layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); .modal { width: 520px; background: white; border-radius: 3px; position: absolute; top: 150px; left: 50%; margin-left: -260px; box-sizing: border-box; header { line-height: 50px; padding: 0 20px; border-bottom: 1px solid #eee; font-size: 12px; div { width: 100%; height: 100%; overflow: hidden; div:first-child { float: left; } div:last-child { float: right; cursor: pointer; } } } footer { line-height: 50px; padding: 0 20px; border-top: 1px solid #eee; height: 50px; overflow: hidden; divdiv { // 嵌套写法 .self-button { float: right; } } } main { box-sizing: border-box; padding: 20px; font-size: 14px; } } } .self-button { display: inline-block; // 行内块元素 height: 30px; box-sizing: border-box; line-height: 25px; font-size: 12px; border-radius: 2px; border: 1px solid transparent; overflow: hidden; margin: 0 10px; cursor: pointer; span { display: block; padding: 0 15px; box-sizing: border-box; width: 100%; height: 100%; } span.default { color: #333; border: 1px solid #333; } span.primary { color: #fff; background-color: #007bff; border: 1px solid #007bff; } span.danger { color: #fff; background-color: #dc3545; border: 1px solid #dc3545; } span.info { color: #fff; background-color: #28a745; border: 1px solid #28a745; } }
