前些日子React团队发布了react18的alpha版本，相信不少小伙伴都惊呼，不是17才出来不久吗，怎么又要到18。但是我们还是要不断去学习，才能跟上前端快速发展的步伐。新版兼容之前的版本，所以升级后代码改动很少，下面介绍一些新版里面的一些新特性。

安装React18 alpha

在自己的项目下面执行下面的命令，尝试之前不要忘了提交之前的代码或者备份一份：

npm install react[@alpha](/user/alpha) react-dom[@alpha](/user/alpha) 或者 yarn add react[@alpha](/user/alpha) react-dom[@alpha](/user/alpha)

新的Root api

新版通过 ReactDom.creatRoot 来创建节点对象，可以用下面的方法代替以往的方式去创建节点对象，用这种方式创建，才能在项目里面尝试新版的特性哟，否则会不生效。

const container = document.getElementById('root');
// Create a root.
const root = ReactDOM.createRoot(container);
// Render the top component to the root.
root.render(<App />);

节点自动批量重渲染

function App() {
  console.log('我渲染了');
  let [count, setCount] = useState(0);
  const handleClick=()=>{
    setCount(++count);
    setTimeout(()=>{
      setCount(++count);
      setCount(++count);
    })
  }
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <div>{count}</div>
    </div>
  );
}

看上面的代码，举个简单的例子，如果是以往react的版本，同步和异步里面的渲染机制是不一样的，每一次点击会打印3次"我渲染了"。但是React18里面，保证了同步和异步更新渲染机制保持一致，异步的多次setState和合并成一次更新，这就使得每一次点击只会打印2次""我渲染了。

新的Suspense组件

React18将会全面支持Suspense组件，实现组件的懒加载，只是当前的api未稳定，不建议在生产环境使用

startTransition API

React18新增的startTransition的api,用于区分非紧急状态更新。使用该api可以让你去控制哪些操作是需要立刻去渲染，哪些是可以延迟更新的。

import './App.css';
import { useState, startTransition } from "react";

function App() {
  let [result, setResult] = useState('');
  const handleChange = (e) => {
    startTransition(() => {
      setResult(e.target.value);
    });
  };
  return (
    <div>
      <input type="text" onChange={(e)=>handleChange(e)} />
      <div>{result}</div>
    </div>
  );
}

export default App;

比如上面这段代码中，输入框输入新的值,之前的更新就会中断，直到没有最新的更新才会去执行非紧急更新。想要更加详细的介绍可以到 https://github.com/reactwg/react-18/discussions/41 这篇文章中看看关于startTransition的介绍。

支持变量延迟更新

import { useState, useDeferredValue } from "react";

function App() {
  let [count, setCount] = useState(0);
  const deferredCount = useDeferredValue(count, { timeoutMs: 2000 });
  const handleClick = ()=>{
    setCount(deferredCount+1)
  }

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <div>{count}</div>
    </div>
  );
}

export default App;

react18使用useDeferredValue支持变量延迟更新，useDeferredValue()会返回一个延迟响应的值，该值的最长延长时间为timeoutMs。目前的用法如上面所示，只是当前该api并未稳定，后面的用法可能会改变

总结

以上就是我对于react18 alpha版本的一些尝试，总的来讲新增了一些新的api，大家如果有时间也可以自己尝试一下，期待react越来越强大。