React中如何使用类vue的插槽模式，以及React.cloneElement

React中实现插槽模式

👉 sandbox 👈

概念

插槽：从父组件中传递一个对像给子组件，这个对象中的内容可以是组件，也可以是一段文本内容，还可以是一个事件方法

• 父组件：定义插槽，并将插槽和插槽的输入参数传入子组件，

• 子组件：接收插槽，并渲染/执行插槽

插槽分为匿名和具名两种模式

• 匿名插槽：直接通过props.children传递
• 具名插槽：在props作为参数传递（函数式组件本质上是个函数，可以做参数）

使用 netlify 部署React项目，2种方式：

• 直接部署静态资源
• 关联git仓库动态部署

考虑兼容性和优化的细节：

• favicon：适配桌面端、ios和安卓端
• 图片：选择合适尺寸、使用webp格式、使用srcset适配

性能评估工具：LightHouse

响应式：响应不同屏幕设备合适地展现网页效果的方式或着手段

• 桌面端优先vs移动端优先
• rem弹性布局
• 媒体查询
• 响应式导航栏（折叠+粘性布局）实现方案

平滑滚动：scrollIntoView、react-scroll

禁止滚动：桌面端禁止滚动，移动端禁止滚动

监听滚动：IntersectionObserver

• 容器属性
  • 列宽、行高：grid-template-columns | grid-template-rows
  • 间距：row-gap | column-gap | gap
  • 对齐：justify-items | align-items
• 项目属性
  • 跨度：grid-row | grid-column
  • 对齐：justify-self | align-self
• Flexbox中使用gap属性

参考课程：Build Responsive Real-World Websites with HTML and CSS
视频 | 源码

基于React的响应式单页应用开发、优化和部署

• 项目地址：https://github.com/luryZhu/omnifood
• 在线demo：https://omnifood-lury.netlify.app/

实现返回顶部效果：

• 滚动一定高度后从下到上平移出现
• 点击后自动滚动到顶部
• 滚动到顶部以后从上到下平移消失

重点掌握：

• 必看：水杯分水、割金条、烧绳子
• 理解思路：概率、组合、锦标赛、毒药消耗
• 其他困难：海盗分钱、秘书问题、二人博弈等

面经手写常考经典布局

• 两栏布局：左定宽，右自适应
• 三栏布局：左右定宽，中间自适应
  • 双飞翼布局：float + margin-left + margin
  • 圣杯布局：float + margin-left + padding + position