前端每日问题总结 - day3

伪类元素添加内容对内容和格式的要求？ :before :after

1. 内容添加：可以通过 CSS 的 content 属性来添加内容。这个属性允许你插入一些文本内容、图标、图片等。

2. 格式和样式：你可以为这些插入的内容指定样式，包括字体、颜色、大小、位置等等。这意味着你可以利用 CSS 来精确控制伪类元素插入的内容的外观。

3. 支持的元素：::before 和 ::after 伪类元素可以应用于所有元素，而不仅仅是 <p> 元素。这意味着你可以在任何元素的前后添加额外的内容。

4. 对内容的要求：插入的内容可以是文本、图标、图片等，但不支持插入其他HTML元素。也就是说，你不能直接插入一个 <div> 或者 <span> 元素，但你可以插入这些元素的文本内容。

5. 语义性：在使用 :before 和 :after 时，要确保添加的内容不会破坏页面的语义性或者可访问性。

• :before p:before 在每个<p>元素之前插入内容

• :after p:after 在每个<p>元素之后插入内容

react组件触发响应式函数， 传递给事件处理函数的函数是调用（handleClick()）还是传递(handleClick)？

传递一个函数（正确）	调用一个函数（错误）
<button onClick={handleClick}>	<button onClick={handleClick()}>

应该是传递， 我们需要让 React 记住它，并且只在用户点击按钮时调用你的函数 而非直接执行，因为在JSX语法中，函数调用会立即执行，而非在组件触发之后执行。

当子组件和父组件都具有点击事件时，点击子组件会触发父组件的点击事件吗？

会，因为react 中所有事件都会传播（事件冒泡），除了 onScroll，它仅适用于你附加到的 JSX 标签。

react事件顺序，由根组件到最小组件事件捕获阶段，这时候会按照捕获顺序执行捕获事件函数，知道目标元素，执行目标元素的事件后向上冒泡，逐步执行父组件的事件，也可以在事件中通过调用事件的stopPropagation方法阻止事件冒泡。

• e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。

• e.preventDefault() 阻止少数事件的默认浏览器行为。

React 什么是副作用？

在React中，"副作用"（side effects）通常指的是在组件渲染过程中产生的操作，这些操作会影响到组件以外的部分，比如修改全局变量、发送网络请求、操作DOM等。React组件的渲染应该是纯粹的，即相同的输入应该始终产生相同的输出，而不应该对外部环境产生任何影响。

副作用可能会对应用程序的状态、性能和行为产生重大影响，因此需要谨慎处理。在React中，你可以利用useEffect钩子来处理副作用。useEffect钩子会在每次组件渲染完成后执行副作用代码，你可以通过它来管理组件的副作用。

以下是一些常见的副作用：

1. 数据获取：从服务器或者本地存储中获取数据。

2. 数据订阅：订阅外部数据源的变化，比如监听 WebSocket 连接或者事件总线。

3. DOM操作：直接操作DOM元素，比如改变元素的样式、属性或者插入/删除元素。

4. 定时器操作：设置定时器、清除定时器。

5. 副作用清理：在组件销毁时执行清理操作，比如取消数据订阅、清除定时器等。