javascript - 在 useState 钩子(Hook)回调中使用副作用可以吗？

Question

想象一下情况:

const [value, setValue] = useState(false);

const setSomething = (val) => {
  setValue((prev) => {
    fn(); dispatch(action); // or any other side effect
    
    return prev + val;
  });
};

使用 react 原理在 useState 内部调用副作用是否可以通过编程方式进行操作？打回来？它会以某种方式影响渲染过程吗？

Answer 1

是不能使用副作用里面updater function .它可能会影响渲染过程，具体取决于特定的副作用。
是 react 原理不好 (关注点分离，声明性代码)。
(我记得见过一些特殊的用例，其中将一些代码放在更新程序函数中据说是唯一的解决方案，但我不记得它是什么。我希望在评论中提供一个示例。)
1.使用副作用的后果
使用副作用是不行的，基本上与你不应该在 useEffect 之外的任何其他地方使用副作用的原因相同。
一些副作用可能会影响渲染过程，其他副作用可能会正常工作(技术上)，但你是 不是 应该 依靠发生的事情在setter函数内部。
react 保证例如如果您调用setState( prev => prev + 1 ) ，然后 state现在将比以前多一个。
React 做 不保证为了实现这一目标，幕后会发生什么。 react 可能 call these setter functions multiple times ，或者根本没有，并且以任何顺序:

StrictMode - Detecting unexpected side effects

... Because the above methods might be called more than once, it’s important that they do not contain side-effects. ...

2. 遵循 react 原则
您不应该将副作用放在更新程序函数中，因为它验证了一些原则，例如关注点分离和编写声明性代码。
关注点分离: setCount除了设置 count 之外什么都不做.
编写声明性代码:
一般来说，你应该写你的代码 declarative, not imperative .

IE。您的代码应该“描述”状态应该是什么，而不是一个接一个地调用函数。

IE。你应该写“B 的值应该是 X，取决于 A”而不是“更改 A，然后更改 B”

在某些情况下，React 对您的副作用一无所知，因此您需要自己注意保持一致的状态。
有时你无法避免编写一些命令式代码。 useEffect是否可以帮助您保持状态一致，例如允许您将一些命令式代码与一些状态相关联，也就是。 “指定依赖关系”。
如果你不使用 useEffect ，您仍然可以编写工作代码，但是 你只是没有使用 react 为此目的提供的工具 .您没有按照应有的方式使用 React，并且您的代码变得不那么可靠。
副作用问题的示例
例如。在这段代码中，您会期望 A和 B总是相同的，但它可能会给你 意外结果 ，如 B增加 2 而不是 1(例如，在 DEV 模式和 strict mode 时):

export function DoSideEffect(){
  const [ A, setA ] = useState(0);
  const [ B, setB ] = useState(0);

  return <div>
    <button onClick={ () => {
      setA( prevA => {                // <-- setA might be called multiple times, with the same value for prevA
        setB( prevB => prevB + 1 );   // <-- setB might be called multiple times, with a _different_ value for prevB
        return prevA + 1;
      } );
    } }>set count</button>
    { A } / { B }
  </div>;
}

例如。这不会显示 当前值在副作用之后，直到组件由于某些其他原因重新渲染，例如增加 count :

export function DoSideEffect(){
  const someValueRef = useRef(0);
  const [ count, setCount ] = useState(0);

  return <div>
    <button onClick={ () => {
      setCount( prevCount => {
        someValueRef.current = someValueRef.current + 1; // <-- some side effect
        return prevCount; // <-- value doesn't change, so react doesn't re-render
      } );
    } }>do side effect</button>

    <button onClick={ () => {
      setCount(prevCount => prevCount + 1 );
    } }>set count</button>

    <span>{ count } / {
      someValueRef.current // <-- react doesn't necessarily display the current value
    }</span>
  </div>;
}