小编Fil*_*zyk的帖子

import { useState } from "react";

export default function App() {
  const [buttonClicked, setButtonClicked] = useState(false);

  console.log('Render');

  return (
    <div className="App">
      <button onClick={() => setButtonClicked(true)}>Click me</button>
      {buttonClicked && <div>Button was clicked</div>}
    </div>
  );
}

该组件未在StrictMode. 它首先渲染，因此我们在控制台中看到一个渲染。当我们单击按钮时，它会因状态更新而重新呈现。我们可以Render再次在控制台看到。但是，令我惊讶的是，当我们再次单击该按钮时，它也会重新渲染该组件，我们Render第三次在控制台中看到。

我认为状态更新正在检查值是否已更改，因此不会第三次渲染。

对我来说更奇怪的是，当我们第三次单击该按钮时，它不会重新渲染组件。

为什么会发生这种情况？

Codesandbox： https://codesandbox.io/s/proud-star-rg49x9? file=/src/App.js:0-336

因此，我将ul元素的max-height设置为0，但仍显示了文本内容。

 <ul>
    <li>Bendeykt</li>
    <li>Analfabata</li>
</ul>

这是链接：

http://jsfiddle.net/wh9ntf2z/1/。

稍后，当用户单击菜单图标时，我想使用过渡效果来隐藏和显示导航栏。但是我不知道如何使列表元素消失。

当我将窗口大小调整为较小的分辨率时，我希望最后一个元素居中。我知道我可以通过将 parent 的justify-content参数设置为space-aroundor来实现这一点center，但必须将其设置为: space-between。

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgba(255, 0, 0, 0.3);
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  min-width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

http://jsfiddle.net/k7fzdn80/