当受控组件中的兄弟需要保持同步时，我可以避免使用 useEffect 吗？

Question

通常我会有一个由两个输入组成的输入。例如，带有数字输入的滑块，或带有十六进制输入的颜色选择器。这些组件需要在用户完成对它们的操作时宣布状态更改，但它们需要相互通知每一个改变。每个都需要以比父级更细的粒度来跟踪另一个的变化。

例如，如果用户拖动滑块，则数字输入应始终代表滑块的值。当用户输入数字时，滑块应该跳来跳去并保持同步。当用户释放滑块时，应从组件触发 onChange 回调，以便父级可以更新状态。

为清楚起见：在下面的示例中，如果用户在左侧输入上单击“向上”10 次，我希望看到每个更改都反映在左侧输入上，但当组件失去焦点时，父项中只有 1 个更改。

下面是一些实现此行为的代码。这段代码确实确切地我想让它做什么。对于我的用例，该行为 100% 正确。但是，我不想在这个组件中有一个useEffect。那是我的问题“我怎样才能删除这个 useEffect？”

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [state, setState] = useState(0);

  // this is called whenever the user is "done" manipulating the compound input
  const handleChange = (change) => {
    console.log("change", change);
    setState(change);
  };

  return (
    <div className="App">
      <CompoundInput value={state} onChange={handleChange} />
    </div>
  );
}

function CompoundInput(props) {
  const [internalState, setInternalState] = useState(props.value);

  // this is a _controlled_ component, so this internal state
  // must also track the parent state
  useEffect(() => {
    setInternalState(props.value);
  }, [props.value]);

  // each input updates to reflect the state of the other input
  // but does so without the parent knowing
  return (
    <>
      <input
        type="number"
        value={internalState}
        onChange={(e) => setInternalState(e.target.value)}
        onBlur={(e) => props.onChange(e.target.value)}
      />
      <input
        type="number"
        value={internalState}
        onChange={(e) => setInternalState(e.target.value)}
        onBlur={(e) => props.onChange(e.target.value)}
      />
    </>
  );
}

https://codesandbox.io/s/compassionate-sun-8zc7k9?file=/src/App.js

由于 useState，我发现这个实现令人沮丧。我的感觉是，当遵循这种模式时，最终每个组件都需要一点 useEffect 来跟踪受控组件的内部状态。我的感觉是应该用useEffect来实现效果这并不是真正的效果。

有没有办法实现这个组件没有使用效果？

Answer 1

有没有办法在没有 useEffect 的情况下实现这个组件？

绝对，只是省略它。

因为您的组件具有 state 值作为属性，所以如果父级更改该状态，它将重新呈现。

在内部，它将保持自己的状态，并且仅在蓝色的事件触发 onChange 道具功能。

这个例子更清楚地展示了它

import { useState } from "react";

export default function App() {
  const [state, setState] = useState(0);

  const handleChange = (change) => {
    console.log("change", change);
    setState(change);
  };

  return (
    <div className="App">
      <fieldset>
        <legend>App state</legend>
        <input type="number" onChange={(e) => handleChange(e.target.value)} value={state}/>
        <pre>state = {state}</pre>
      </fieldset>
      <fieldset>
        <legend>CompoundInput</legend>
        <CompoundInput value={state} onChange={handleChange} key={state} />
      </fieldset>
    </div>
  );
}

function CompoundInput({ value, onChange }) {
  const [internalState, setInternalState] = useState(value);

  return (
    <>
      <input
        type="number"
        value={internalState}
        onChange={(e) => setInternalState(e.target.value)}
        onBlur={(e) => onChange(e.target.value)}
      />
      <pre>internalState = {internalState}</pre>
    </>
  );
}