面试问题记录面试回答有问题题目，自用。display:none和visibility:hidden和opacity:0的

display:none和visibility:hidden和opacity:0的区别

css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。区别： display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素(看不见摸不着);visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素（看不到摸不着）； opacity:0 是看不见摸得着

使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流和重绘（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流，引起重绘。 visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。 visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。 CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果，提高用户体验。 ———————————————— 版权声明：本文为CSDN博主「乙只」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：blog.csdn.net/qq_40664253…

useLayoutEffect

useLayoutEffect 相比 useEffect，通过同步执行状态更新可解决一些特性场景下的页面闪烁问题。
useEffect 可以满足大部分的场景，而且 useLayoutEffect 会阻塞渲染，因此谨慎使用。

工作原理是通过 JS 对象模拟 DOM 的节点

虚拟 DOM 的优点主要有三点：

改善大规模 DOM 操作的性能、
规避 XSS 风险、
能以较低的成本实现跨平台开发。

虚拟 DOM 的缺点在社区中主要有两点:

内存占用较高，因为需要模拟整个网页的真实 DOM。
高性能应用场景存在难以优化的情况，类似像 Google Earth 一类的高性能前端应用在技术选型上往往不会选择 React。

虚拟DOM不会进行排版与重绘操作

虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

js原生实现表格拖拽

onMouseDown、onMouseMove、onMouseUp ``

import React, { useRef, useEffect, useState } from 'react';

const onMouseDown = (ref, setDraggable) => (e) => {
  //  记录鼠标距离可拖拽组件的上边距和左边距，使拖动更加准确，不记录的话鼠标每次点击组件，组件左上角就会跑到鼠标处
  setDraggable({
    dy: e.clientY - ref.current.offsetTop,
    dx: e.clientX - ref.current.offsetLeft,
    status:true,
  })
} 

const onMouseMove = (ref, draggable) => (e) => {
  if (draggable.status) {
    const div = ref.current;
    div.style.top = `${e.clientY - draggable.dy}px`;
    div.style.left = `${e.clientX - draggable.dx}px`;
  }
}

const onMouseUp = (draggable, setDraggable) => () => {
  setDraggable({
    ...draggable,
    status:false,
  })
}

const MyComponenet = (props) => {
  const [draggable, setDraggable] = useState({
    status: false,
    dy: 0,
    dx: 0,
  });
  const ref = useRef(null);
  useEffect = (() => {
    document.addEventListner('mousemove', onMouseMove(ref, draggable));
    document.addEventListner('mouseip', onMouseUp(draggable, setDraggable));
  }, []);
  return (
    {
      status &&
      <div
        style={{ left:0, right:0, top: 0, bottom: 0, position: 'fixed' }}
        onMouseMove(ref, draggable)
        onMouseUp(draggable, setDraggable)
      ></div>
    }
    <div
      ref={ref}
      style={{ position: 'fixed', left: 200, top: 200 }}
      onMouseDown={onMouseDown(ref, setDraggable)}
      onMouseMove(ref, draggable)
    >
      // 这里放置拖动组件的图片等
      <img  src="..." alt="" />
    </div>
  )
}