理解use效应（）和useState（）钩子的行为

Question

因此，我有一些代码并没有像预期的那样工作。当前焦点是在父组件上使用useState（）设置的，因此它是一个状态变量。但是，当父级中的currentFocus值更改时，此处的focus变量本身不会更新。我希望重新呈现父组件，这反过来会重新呈现该组件，从而导致foucs值发生更改。

import React, { useRef, useEffect, useState } from 'react';
const CookieDetails = props => {
  const {
    name,
    cost,
    value,
    numOwned,
    onMouseClick,
    cookieId,
    currentFocus,
  } = props;

  let cookieInfoRef = useRef(null);
  //My focus doesnt change even if I change currentFocus in parent component
  const [focus, setFocus] = useState(currentFocus);

  useEffect(() => {
    console.log('currentFocus', currentFocus);
    console.log('focus', focus);
    console.log('cookieID', cookieId); 
    if (cookieInfoRef.current && cookieId === focus) {
      console.log('current', cookieInfoRef.current);
      cookieInfoRef.current.focus();
    }
  }, [focus]);

  return (
    <React.Fragment>
      <button
        onClick={onMouseClick}
        ref={cookieId === focus ? cookieInfoRef : null}
      >
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </button>
    </React.Fragment>
  );
};

export default CookieDetails;

现在我可以通过执行以下操作来解决此问题，

import React, { useRef, useEffect, useState } from 'react';
const CookieDetails = props => {
  const {
    name,
    cost,
    value,
    numOwned,
    onMouseClick,
    cookieId,
    currentFocus,
  } = props;

  let cookieInfoRef = useRef(null);

  useEffect(() => {
    console.log('currentFocus', currentFocus);
    console.log('cookieID', cookieId);        
    if (cookieInfoRef.current && cookieId === currentFocus) {
      console.log('current', cookieInfoRef.current);
      cookieInfoRef.current.focus();
    }
  });

  return (
    <React.Fragment>
      <button
        onClick={onMouseClick}
        ref={cookieId === currentFocus ? cookieInfoRef : null}
      >
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </button>
    </React.Fragment>
  );
};

export default CookieDetails;

但我只想在更新focus/currentFocus时运行useEffect挂钩，而不是在每次渲染之后。那么为什么会发生这种情况呢？我在这里缺少什么来理解。

我之前也注意到，如果您这样做，handleStuff函数总是使用初始值100（因此它总是100 10），而不是每次按下一个键时递增10。我可以通过删除空[]作为useffect中的第二个参数来解决这个问题。但是，我希望handleStuff仍然使用最新的值进行更新，因为eventListner已经在初始渲染时添加，并且在第二次按键时，它应该将10添加到110而不是100，但它仍然使用初始状态值100。为什么每次都要清除旧的侦听器并添加新的侦听器才能正常工作？

[value, setValue] = useState(100)

handleStuff = (event) => {
 setValue(value+10)
}

useEffect(() => {
  window.addEventListener('keydown', handleStuff)
  return () => {
    window.removeEventListener('keydown', handleStuff)
  }
 },[]);

我对解决方案并不感兴趣，我真正感兴趣的是理解useffect（）和useState（）钩子在这种情况下是如何工作的。

Answer 1

嘿，使用效果钩子可能有点混乱。但思考的方式是

useEffect(() => {
  // Called every render
})

useEffect(() => {
  // Called on first render
}, [])

useEffect(() => {
  // Called when x y & z updates
}, [x, y, z])

问题是您没有在代码中侦听currentFocus更新。

useEffect(() => {
  // Called when focus updates
}, [focus]);

useEffect(() => {
  // Called when props.currentFocus & focus updates
}, [props.currentFocus, focus]);

现在来解释你的困惑：

// My focus doesnt change even if I change currentFocus in parent component
const [focus, setFocus] = useState(currentFocus);

在此处传递currentFocus时，currentFocus值传递给focus useState的唯一时间是在第一次渲染时。因此，您需要监听currentFocus更新，然后设置新的焦点，该焦点应该按照您的意愿工作！

// Focus set to props.currentFocus on first render
const [focus, setFocus] = useState(currentFocus);

useEffect(() => {
  // Update focus
  setFocus(props.currentFocus)
}, [props.currentFocus])

useEffect(() => {
  // currentFocus will be the same as focus now
  console.log('currentFocus', currentFocus);
  console.log('focus', focus);
  console.log('cookieID', cookieId); 
  if (cookieInfoRef.current && cookieId === focus) {
    console.log('current', cookieInfoRef.current);
    cookieInfoRef.current.focus();
  }
}, [focus]);

希望有帮助！