css选择器

请务必优秀
78 阅读2分钟

选择器的基本意义是：根据一些特征，选中元素树上的一批元素。

我们把选择器的结构分一下类，那么由简单到复杂可以分成以下几种。

简单选择器：针对某一特征判断是否选中元素。

复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。

复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。选择器列表：由逗号分隔的复杂选择器，表示“或”的关系。

简单选择器

类型选择器和全体选择器

一个小tip

在React中，useState返回的状态值在函数组件的每一次渲染中都是常量，它们不会在组件的生命周期内改变。这意味着如果您在WebSocket的回调函数中使用了useState返回的状态值，那么您拿到的将是当回调函数定义时的状态值，而不是最新的状态值。

例如，假设您有以下代码：

const [count, setCount] = useState(0);

useEffect(() => {
  const socket = new WebSocket(URL);
  socket.onmessage = (event) => {
    console.log(count); // 这里的count值是当onmessage被定义时的值，而不是最新的值
  };
}, []);

在这个例子中，onmessage回调函数在定义时就已经捕获了count的值，即使后续count的值发生了变化，onmessage中的count值也不会改变。

为了在WebSocket的回调函数中获取到最新的状态值，您可以使用useRef钩子。useRef返回的对象在组件的整个生命周期内保持不变，但其current属性可以被改变，因此可以用来保存最新的状态值。以下是一个示例：

const countRef = useRef(0);
const [count, setCount] = useState(0);

// 同步状态值到ref
useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  const socket = new WebSocket(URL);
  socket.onmessage = (event) => {
    console.log(countRef.current); // 这里的countRef.current值是最新的状态值
  };
}, []);

在这个例子中，我们使用了一个额外的useEffect钩子来同步状态值到countRef，然后在WebSocket的回调函数中使用countRef.current来获取最新的状态值。 此文章为8月Day10学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程！

avatar
文章
阅读
粉丝