其实 React 有点难用

论开发体验，Vue 是肯定大于 react 的，毕竟简单，上手快，但是之所以选择 react ，还是因为生态，尤其是 nextjs 的生态。没办法。

react 的坑很多啊！

先是那个很让人头疼的 HTML ?? 其实是 JSX 。不是 HTML ，跟 HTML 没有多大关系。

初学者会发现里面混入了一个奇怪的东西：

<></>

这是什么？这是一个 容器！防止 < div > 不断进行堆叠成一大坨的！因为 JSX 只能有一个根元素，外面得包裹 div，每个组件都得搞一个根节点，比如这里的 main：

return (
  <main>
    <h2>欢迎光临</h2>
    <span>这是我们的新网站！</span>
  </main>
);

// 但是容易把布局搞乱，因此就引入了一个概念叫 React.Fragment

return (
  <React.Fragment>
    <h2>欢迎光临</h2>
    <span>这是我们的新网站！</span>
  </React.Fragment>
);

// 使用语法糖 <></> ，和上面这个等同

return (
  <>
    <h2>欢迎光临</h2>
    <span>这是我们的新网站！</span>
  </>
);

这样就好多了。

妥协了，但是奇奇怪怪。不过也避免了各种 HTML 混乱，甚至布局混乱。当初，这一点让我觉得 react 真的有点设计的不给力，不好用。

另外还有 setState 、 setCount 这些概念，里面也有陷阱：

这个 setCount 是更新状态的吧，但是调用时，其实是不会立即改值的，它竟然是异步的！

react 呢美其名曰，这是优化性能：

import { useState } from "react";

export default function Test() {
  const [num, setNum] = useState(10);

  function change() {
    console.log("点击时，当前值是：", num); // 10

    setNum(20); // 改成 20！

    console.log("刚改完立刻打印：", num); // 其实还是 10！！！
  }

  return (
    <button onClick={change}>点我测试异步</button>
  );
}

然后，因为它是异步的，就又引申一个 陷阱！！！！

如果你一次性让它加 三次值 ，你会发现就加了一次！

import { useState } from "react";

export default function Test() {
  const [num, setNum] = useState(0);

  const add = () => {  // 让它加三次（实际上运行结果是只加了一次）
    setNum(num + 1);
    setNum(num + 1);
    setNum(num + 1);
  };

  return (
    <div>
      <h1>{num}</h1>
      <button onClick={add}>点我+3</button>
    </div>
  );
}

这是个抽象版本，。，实际上当年没少被这个 bug 坑。比如多次修改某组件的属性，组件仅仅只会有1次更新？？？而不是每次修改，状态都更新。

因为 useState 是异步的，所以不能这样写，要这样写：

import { useState } from "react";

export default function Test() {
  const [num, setNum] = useState(0);

  const add = () => {
    setNum(prev => prev + 1);  // 变化，就是 
    setNum(prev => prev + 1);  // num + 1 变成了 prev => prev + 1
    setNum(prev => prev + 1);  // 这样才行！
  };

  return (
    <div>
      <h1>{num}</h1>
      <button onClick={add}>点我+3</button>
    </div>
  );
}

这样才能拿到最新的值，再给下走。

太难用了。