Question

我正在构建一个带有不错的下拉菜单的搜索栏，以使用户知道他可以做什么。下拉菜单仅需要显示一个触发器。（我用2个输入节点表示它们）

function SearchBar() {

    const [focus1, setFocus1] = useState(false);
    const [focus2, setFocus2] = useState(false);
    return <>
        <input onFocus={(event) => setFocus1(true)}
               onBlur={(event) => setFocus1(false)} />
        <input onFocus={(event) => setFocus2(true)}
               onBlur={(event) => setFocus2(false)} />
        {focus1 || focus2 ? <p>drop-down with other onClick actions</p> : null}
    </>;
}

问题是当我从一个输入切换到另一个输入时，react重新渲染了<p>节点。正常行为不应更新节点树，因为内容相同。

如何避免React重新渲染该节点？

Answer 1

将焦点从一个输入切换到下一个输入后，焦点状态之一始终为true，因此可以预期（因为<p>节点使用||逻辑有条件地呈现）。您可以使用useEffect挂钩来监视焦点状态。

useEffect(() => {
    console.log
      ('focus1', focus1)
  }, [focus1])

  useEffect(() => {
    console.log
      ('focus2', focus2)
  }, [focus2])

用useState和||反应不正确的更新算子

1 个答案: