useEffect 在初始渲染中不运行

Question

在 Piano 组件中，我使用挂钩 (useWindowDimensions()) 获取 window 的尺寸。在 useEffect 中，我想在每次 window 的宽度发生变化时渲染组件。

它会在每次宽度变化时重新渲染组件（因为 keyData 取决于它并且它在 dependencyList 中）但不会在初始渲染中渲染。 因此，在我调整 window 的大小之前，组件不会呈现。

以下代码是Piano组件。

const svgRef = React.useRef(null);
const svgEl = d3.select(svgRef.current);

const { width } = useWindowDimensions();
const height = width / 4;

const keyData = generateKeyData(88, width);

React.useEffect(() => {
  svgEl.selectAll("*").remove();
  generatePianoNode(svgEl, keyData);
}, [svgEl, keyData]);

return (
  <svg ref={ svgRef } width={ width } height={ height } />
);

我尝试用相同的代码放置另一个具有空依赖项列表的 useEffect 挂钩，但它也没有用。

Answer 1

useEffect 挂钩实际上在初始组件安装时呈现，但这里的问题是您生成 piano 节点的方式。

您需要以某种方式将值放入状态并更新状态，以便组件在每次状态更改以及组件安装时重新呈现。

const [value , setValue ] = React.useState("1")

React.useEffect(() => {
  // your logic
  // setValue("2")
}, [value]);

现在 useEffect 挂钩将运行加载到组件上，然后每次状态值更改时。

注意

如果值同时更改，将导致组件出现渲染问题，因此在这种情况下更好的选择是在 useEffect 中分配一个事件侦听器，如下所示：

const handleScroll = () => {
 // your logic
}

React.useEffect(() => {
  if (typeof window !== "undefined"){
    window.addEventListener("scroll" , handleScroll)
  } 
  return () => {
     // on component unmount remove event listener
     if (typeof window !== "undefined"){
       window.removeEventListener("scroll" , handleScroll)
     } 
  }
}, []);

useEffect 在初始渲染中不运行

useEffect does not run in initial render

reactjs

react-hooks

use-effect

useEffect 在初始渲染中不 运行

useEffect does not run in initial render

reactjs

react-hooks

use-effect

useEffect 在初始渲染中不运行