是否可以覆盖 React 的 useState、useMemo、useEffect 钩子的相等函数？-解网

问：

假设我有以下代码：

const [obj, setObj] = useState({ value: 0 });

// somewhere else

setState({value: 0});

// somewhere else

const value = useMemo(() => obj.value, [ obj ]);

// somewhere else

useEffect(() => { console.log(obj.value) }, [ obj ] );

是否有可能拥有类似的东西：

const [ obj, setObj ] = useStateWithSelector(obj, (prev, next) => prev.value === next.value);

所以我可以告诉 react 只有在 equalityFunction 时才能重新渲染

(prev, next) => prev.value === next.value

返回 false ？

javascript reactjs react-hooks 相等 rerender

function App() {
  const [input, setInput] = React.useState("")
  const [obj, setObj] = React.useState({ value: input })
  React.useEffect(_ => {
    console.log("state changed", obj.value)
  }, [obj.value]) // ✅ don't use objects as dependencies
  return <div>
    <input
      onChange={e => setInput(e.target.value)}
      value={input}
      placeholder="enter any value"
    />
    <button
      onClick={_ => setObj({ value: input })}
      children="Set"
    />
    <p>Repeated presses of <kbd>Set</kbd> will not triggger state change</p>
    <pre>{JSON.stringify(obj)}</pre>
  </div>
}

ReactDOM.render(<App/>, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

定制钩子解决方案

如果必须用作依赖项，则可以按照建议编写自定义钩子。[obj]useStateWithGuard

function useStateWithGuard(initState, guard) {
  const [value, setValue] = React.useState(initState)
  return [
    value,
    next => setValue(prev => guard(prev, next) ? prev : next)
  ]
}

Run在下面的代码示例中，输入一个值并单击几次。用作依赖项，但仅当新值通过保护时，状态才会更改。Set[obj]

function App() {
  const [input, setInput] = React.useState("")
  const [obj, setObj] = useStateWithGuard(
    { value: "" },
    (prev, next) => prev.value === next.value
  )
  React.useEffect(_ => {
    console.log("state changed", obj.value)
  }, [obj]) // ⚠️ works now but maybe still a bad practice
  return <div>
    <input
      onChange={e => setInput(e.target.value)}
      value={input}
      placeholder="enter any value"
    />
    <button
      onClick={_ => setObj({ value: input })}
      children="Set"
    />
    <p>Repeated presses of <kbd>Set</kbd> will not triggger state change</p>
    <pre>{JSON.stringify(obj)}</pre>
  </div>
}

function useStateWithGuard(initState, guard) {
  const [value, setValue] = React.useState(initState)
  return [
    value,
    next => setValue(prev => guard(prev, next) ? prev : next)
  ]
}

ReactDOM.render(<App/>, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

是否可以覆盖 React 的 useState、useMemo、useEffect 钩子的相等函数？

Is it possible to override the equality function of React's useState, useMemo, useEffect hooks?

评论

评论