前端每日问题 - day2

margin：auto 居中布局有时候不生效？

通常margin：auto 居中布局只对block元素生效，同时要求元素自身有设置宽度（没有宽度默认100%）

不生效情况：

• 对行内或行内块元素设置，例如设置图片(inline-block)居中，如果没有display: block;就无法居中

• 布局冲突， 外层设置了float(浮动)，内外冲突

• 居中元素没有宽度，比如span元素设定为块元素后不设置宽度，仍然不会居中

• 作用对象混淆，margin: auto 需要添加到你的目标对象，也就是想要居中的那个对象。

使用 position 和 transform 实现垂直居中为什么父元素要使用相对定位？

当子元素使用绝对定位时，其定位相对于最近的具有定位属性的祖先元素。如果没有具有定位属性的祖先元素，那么它会相对于最初的包含块（通常是 body 元素）进行定位。

因此，为了确保子元素相对于父元素进行定位，父元素需要具有定位属性。在这种情况下，为父元素添加相对定位属性可以确保子元素相对于其进行定位，从而实现垂直居中。

同时需要注意的是相对定位没有脱离文档流而绝对定位脱离文档流了，所以父元素通常使用相对定位避免扰乱页面UI。

react 一个文件导出多个组件？

方式一：命名导出（Named Exports）

导出： export function Component2() { return <div>Component 2</div>; }

使用： import { Component1, Component2 } from './MyComponents';

方式二：默认导出

导出：export { Component1, Component2 as AnotherComponent }; export default Component1;

使用： import DefaultComponent, { Component1, AnotherComponent } from './MyComponents';

react 实现一个功能优雅的过程？

从原型开始

• 步骤一: 将UI拆解为组件层级结构
• 步骤二: 使用React构建—个静态版本
• 步骤三: 找出UI精简且完整的state表示
• 步骤四: 验证state应该被放置在哪里
• 步骤五: 添加反向数据流