React：如何在第一次渲染时跳过 useEffect

Question

我正在尝试使用useEffect受控表单组件中的钩子在用户更改表单内容时通知父组件并返回表单内容的 DTO。这是我目前的尝试

const useFormInput = initialValue => {
  const [value, setValue] = useState(initialValue)

  const onChange = ({target}) => {
    console.log("onChange")
    setValue(target.value)
  }

  return { value, setValue, binding: { value, onChange }}
}
useFormInput.propTypes = {
  initialValue: PropTypes.any
}

const DummyForm = ({dummy, onChange}) => {

  const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
  const {value: bar, binding: barBinding} = useFormInput(dummy.value)

  // This should run only after the initial render when user edits inputs
  useEffect(() => {
    console.log("onChange callback")
    onChange({foo, bar})
  }, [foo, bar])

  return (
    <div>
      <input type="text" {...fooBinding} />
      <div>{foo}</div>

      <input type="text" {...barBinding} />
      <div>{bar}</div>
    </div>
  )
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <DummyForm dummy={{value: "Initial"}} onChange={(dummy) => console.log(dummy)} />
      </header>
    </div>
  );
}

但是，现在效果在第一次渲染时运行，当在安装期间设置初始值时。我该如何避免？

以下是加载页面和随后编辑两个字段的当前日志。我也想知道为什么我会收到缺少依赖项的警告。

onChange callback
App.js:136 {foo: "Initial", bar: "Initial"}
backend.js:1 ./src/App.js
  Line 118:  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
r @ backend.js:1
printWarnings @ webpackHotDevClient.js:120
handleWarnings @ webpackHotDevClient.js:125
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:190
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial"}
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial2"}

Answer 1

您可以查看此答案以了解如何忽略初始渲染的方法。这种方法用于useRef跟踪第一次渲染。

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
    } else {
     // do things after first render
    }
  });

至于你收到的警告：

React Hook useEffect 缺少依赖项：'onChange'

钩子调用中的尾随数组 ( useEffect(() => {}, [foo]) 列出了钩子的依赖关系。这意味着如果您在挂钩范围内使用一个变量，该变量可以根据对组件的更改（例如组件的属性）进行更改，则需要在此处列出。

Answer 2

如果你正在寻找像 componentDidUpdate() 这样的东西而不通过 componentDidMount()，你可以编写一个像这样的钩子：

export const useComponentDidMount = () => {
  const ref = useRef();
  useEffect(() => {
    ref.current = true;
  }, []);
  return ref.current;
};

在您的组件中，您可以像这样使用它：

const isComponentMounted = useComponentDidMount();

useEffect(() => {
 if(isComponentMounted) {
  // Do something
 }
}, [someValue])

在你的情况下它将是：

const DummyForm = ({dummy, onChange}) => {
  const isComponentMounted = useComponentDidMount();
  const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
  const {value: bar, binding: barBinding} = useFormInput(dummy.value)

  // This should run only after the initial render when user edits inputs
  useEffect(() => {
    if(isComponentMounted) {
      console.log("onChange callback")
      onChange({foo, bar})
    }
  }, [foo, bar])

  return (
    // code
  )
}

如果有帮助请告诉我。

Answer 3

我为此创建了一个简单的钩子

https://stackblitz.com/edit/react-skip-first-render?file=index.js

它基于 paruchuri-p

const useSkipFirstRender = (fn, args) => {
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('running')
      return fn();
    }
  }, args)

  useEffect(() => {
    isMounted.current = true
  }, [])
}

第一个效果是主要效果，就好像您在组件中使用它一样。它将运行，发现 isMounted 不是true，并且将跳过执行任何操作。

然后在底部useEffect运行后，它将更改isMounted为true- 因此当组件被迫重新渲染时。它将允许第一个 useEffect 正常渲染。

它只是一个很好的自封装可重复使用的钩子。显然，您可以更改名称，这取决于您。