听说你还不知道React18新特性？看我给你整明白！

前言

目前react的最新版本是18.2.0。React 团队在 2022 年 3 月 29 日正式发布了 React 的第 18 个版本 是 React 框架的最新版本，它主要着眼于解决 React 应用在性能、稳定性、开发体验等方面的问题。本文将介绍 React 18 的升级内容、新特性、新的 API、底层逻辑更新等方面的内容，并通过示例展示其使用效果。 我将在这篇文章里简单介绍 React 18 的新特性，React Concurrent Mode（并发模式）的实现，以及简要的升级指南。

升级

• react18 已经不支持IE浏览器
• 新项目： 直接用 npm 或者 yarn 安装最新版依赖即可（如果是js，可以不需要安装types类型声明文件）
• 改变根节点的挂载方式使用新的 API createRoot，使用旧的 API 仍然兼容，只有在使用 createRoot 了之后才会有 React 18 的新特性。

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App/>
    </Provider>
  </React.StrictMode>,
)

在这个示例中，我们使用了 ReactDOM.createRoot 方法创建了一个根节点，并使用 render 方法将组件渲染到根节点中。这样可以让 React 应用更快地响应用户操作，提高用户体验。

react18 setState异步同步

在 React 18 中，setState 的行为有一些改变，它将更倾向于以异步方式进行更新，但也提供了一些选项来控制同步更新。下面是关于 React 18 中 setState 的异步和同步行为的解释：

1. 异步更新（默认行为）：

在 React 18 中，默认情况下，setState 方法会以异步方式进行更新。这意味着它会将多个状态更新批量处理，并在适当的时机进行合并和应用，以优化性能。这样做可以减少不必要的重渲染，并提高应用程序的响应性。

// 异步更新
this.setState({ count: this.state.count + 1 });

2. 同步更新（使用 flushSync）：

尽管 setState 默认以异步方式进行更新，但在某些情况下，您可能需要立即获取更新后的状态。为了实现此目的，React 18 提供了 flushSync 方法，可以强制执行同步更新。

import { flushSync } from 'react-dom';

// 同步更新

flushSync(() => {

  this.setState({ count: this.state.count + 1 });

});

通过使用 flushSync 包裹 setState 的调用，您可以确保在执行下一个任务之前立即获取到更新后的状态。请注意，使用 flushSync 可能会对性能产生影响，并且应谨慎使用，以避免阻塞主线程。

需要注意的是，React 18 引入了一种新的异步渲染优先级机制，称为 useTransition。通过使用 useTransition，您可以控制异步更新的优先级。这对于在高优先级工作（例如用户交互）和低优先级工作（例如懒加载数据）之间进行平衡非常有用。然而，它不直接影响 setState 的异步/同步行为，而是影响更新的优先级。

总结一下，在 React 18 中，setState 通常以异步方式进行更新，并且使用 flushSync 可以实现同步更新。此外，您还可以使用 useTransition 提供的优先级控制来平衡不同任务之间的更新。

React18 新增API

React 18 是 React 的一个重要版本，它包含了一些新的特性和改进，其中一些会对应用程序的开发流程、性能和用户体验产生重要影响。以下是 React 18 中新增的一些 API：

1. startTransition

startTransition 是一个新的 React API，旨在帮助开发者优化应用程序的性能和用户体验。这个函数可以告诉 React 在下次重新渲染组件时，应该延迟更新状态。这样，一些较慢的操作（例如异步请求等）就可以在后台执行，不会影响应用程序的交互性能。

import { startTransition } from 'react';

function App() {

  const [searchTerm, setSearchTerm] = useState('');

  const [results, setResults] = useState([]);

  function handleSearch(event) {

    setSearchTerm(event.target.value);

    startTransition(() => {

      fetch(`/api/search?query=${searchTerm}`)

        .then(response => response.json())

        .then(data => setResults(data));

    });

  }

  return (

    <div>

      <input type="text" value={searchTerm} onChange={handleSearch} />

      <ul>

        {results.map(result => (

          <li key={result.id}>{result.title}</li>

        ))}

      </ul>

    </div>

  );

}

在上述代码中，我们使用 startTransition 函数将异步请求和状态更新操作包裹起来，以告诉 React 在下一次重新渲染之前应该延迟更新状态。

2. useTransition

useTransition 是 startTransition 的 hook 版本。它可以在函数组件中使用，从而让开发者更方便地控制异步操作的状态。

import { useState, useTransition } from 'react';

function App() {

  const [searchTerm, setSearchTerm] = useState('');

  const [results, setResults] = useState([]);

  const [isPending, setIsPending] = useState(false);

  const [startTransition, isPendingTransition] = useTransition({ timeoutMs: 3000 });

  function handleSearch(event) {

    setSearchTerm(event.target.value);

    startTransition(() => {

      setIsPending(true);

      fetch(`/api/search?query=${searchTerm}`)

        .then(response => response.json())

        .then(data => setResults(data))

        .finally(() => setIsPending(false));

    });

  }

  return (

    <div>

      <input type="text" value={searchTerm} onChange={handleSearch} />

      {isPendingTransition ? <p>Loading...</p> : null}

      <ul>

        {results.map(result => (

          <li key={result.id}>{result.title}</li>

        ))}

      </ul>

    </div>

  );

}

在上述代码中，我们使用 useTransition hook 来控制异步请求的状态，并在加载数据时显示一个 Loading... 的提示信息。

3. createRoot

createRoot 是一个新的入口函数，用于创建根 React 组件。它可以替代原先的 ReactDOM.render 方法，使得开发者可以将多个根节点渲染到一个页面上。

import { createRoot } from 'react-dom';

function App() {

  return (

    <div>Hello, world!</div>

  );

}

// 原先的使用方式

ReactDOM.render(<App />, document.getElementById('root'));

// 新的使用方式

const rootElement = document.getElementById('root');

createRoot(rootElement).render(<App />);

在上述代码中，我们使用 createRoot 函数来创建根 React 组件，并将其渲染到页面上。这样，我们就可以使用多个根节点来构建各种复杂的应用程序界面。

4. useDeferredValue

useDeferredValue 是一个新的 hook，可以将某个状态值的更新延迟一段时间后再执行，从而提高应用程序的性能和用户体验。

import { useState, useDeferredValue } from 'react';

function App() {

  const [searchTerm, setSearchTerm] = useState('');

  function handleSearch(event) {

    setSearchTerm(event.target.value);

  }

  const deferredSearchTerm = useDeferredValue(searchTerm, {

    timeoutMs: 1000

  });

  return (

    <div>

      <input type="text" value={searchTerm} onChange={handleSearch} />

      <p>Search term: {deferredSearchTerm}</p>

    </div>

  );

}

在上述代码中，我们使用 useDeferredValue hook 将搜索词的更新延迟了一秒钟。这样，用户在快速输入搜索词时，不会因为频繁的重新渲染而出现卡顿等问题。

5. useTransition

上面已经提到过了，在 React 18 中新增了 useTransition hook，用于帮助开发者控制异步操作的状态。

6. useMutableSource

useMutableSource 是一个新的 hook，用于获取可变数据源，并可以在多个组件之间共享状态。它可以帮助开发者拆分组件逻辑，并使其更加灵活和可复用。

import { useMutableSource } from 'react';

const myDataSource = {

  get: () => ({ count: 0 }),

  subscribe: (handleUpdate) => {

    const intervalId = setInterval(() => {

      handleUpdate({ count: Math.floor(Math.random() * 100) });

    }, 1000);

    return () => clearInterval(intervalId);

  }

};

function Counter() {

  const [dataSource, setDataSource] = useState(() => myDataSource);

  const [count, setCount] = useState(0);

  function handleUpdate(data) {

    setCount(count => count + data.count);

  }

  useEffect(() => {

    const unsubscribe = dataSource.subscribe(handleUpdate);

    return unsubscribe;

  }, [dataSource]);

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setDataSource(myDataSource)}>Restart</button>

    </div>

  );

}

function App() {

  const [dataSource, setDataSource] = useState(() => myDataSource);

  const [, forceUpdate] = useReducer(x => x + 1, 0);

  function handleRestart() {

    setDataSource(myDataSource);

    forceUpdate();

  }

  const count = useMutableSource(dataSource, ({ count }) => count);

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={handleRestart}>Restart</button>

    </div>

  );

}

在上述代码中，我们使用 myDataSource 作为可变数据源，并将其共享到多个组件中。在 Counter 组件中，我们订阅了数据源的更新，并实时反映出计数器的变化。在 App 组件中，我们使用了 useMutableSource hook 来获取数据源的值，从而实现了多组件之间的状态共享。

总而言之，React 18 中引入了许多有用的新特性和 API，包括 startTransition、useTransition、createRoot、useDeferredValue、useMutableSource 等。这些新特性和 API 可以让开发者更方便地构建高性能、灵活和可复用的 React 应用程序。

新增Hooks

React 18 引入了一些新的 hooks，以帮助开发者更好地管理状态和副作用。以下是 React 18 中新增的一些 hooks：

1. useTransition

useTransition 允许开发者在处理潜在的延迟操作时控制异步更新的优先级。它接受一个配置对象，可以设置超时时间和中断标志等选项。

import { useTransition } from 'react';

function MyComponent() {

  const [isPending, startTransition] = useTransition({ timeoutMs: 2000 });

  function handleClick() {

    startTransition(() => {

      // 执行某个需要较长时间的操作

    });

  }

  return (

    <div>

      <button onClick={handleClick}>开始操作</button>

      {isPending && <p>操作进行中...</p>}

    </div>

  );

}

在上述代码中，我们使用了 useTransition hook 来控制长时间操作的优先级，并在操作进行中显示一个提示信息。

2. useDeferredValue

useDeferredValue 允许开发者将某个状态的更新推迟到未来的帧中。这对于处理与用户输入相关的操作非常有用，可以避免在频繁输入时产生连续的重渲染。

import { useState, useDeferredValue } from 'react';

function MyComponent() {

  const [searchTerm, setSearchTerm] = useState('');

  function handleChange(event) {

    setSearchTerm(event.target.value);

  }

  const deferredSearchTerm = useDeferredValue(searchTerm, {

    timeoutMs: 500

  });

  return (

    <div>

      <input type="text" value={searchTerm} onChange={handleChange} />

      <p>搜索词: {deferredSearchTerm}</p>

    </div>

  );

}

在上述代码中，我们使用了 useDeferredValue hook 来将搜索词的更新推迟了 500ms。这样，在频繁输入时，只有用户停止输入一段时间后，才会执行搜索操作。

3. useMutableSource

useMutableSource 允许开发者访问可变的数据源，并在多个组件之间共享状态。这对于高性能的数据订阅和共享非常有用。

import { useMutableSource } from 'react';

const myDataSource = {

  get: () => ({ count: 0 }),

  subscribe: (callback) => {

    const interval = setInterval(() => {

      callback({ count: Math.floor(Math.random() * 100) });

    }, 1000);

    return () => clearInterval(interval);

  }

};

function MyComponent() {

  const [, forceUpdate] = useState({});

  const count = useMutableSource(myDataSource, source => source.get());

  function handleRestart() {

    forceUpdate({});

  }

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={handleRestart}>重启</button>

    </div>

  );

}

在上述代码中，我们使用了 useMutableSource hook 来获取可变数据源中的值，并在计数器组件中共享该状态。

这些是 React 18 中新增的一些重要 hooks。通过使用这些 hooks，开发者可以更好地管理状态、处理潜在的延迟操作，并实现高性能的数据共享。除了这些新增的 hooks，React 18 也支持其他常用的 hooks，如 useState、useEffect、useCallback 等。

严格模式

React 严格模式（Strict Mode）是一个开发模式，可以帮助开发者发现一些潜在的问题，以提高应用程序的质量。启用严格模式后，React 会执行额外的检查和警告，以帮助开发者发现一些常见问题，并尽早地解决它们。

启用 React 严格模式可以通过在代码中添加如下代码实现：

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

在上述代码中，我们使用 React.StrictMode 组件来包裹应用程序的顶层组件 <App>。这样，React 将会在严格模式下执行应用程序，并对常见问题进行检查和提示。

React 严格模式主要包含以下几个方面的检查和提示：

• 识别不安全的生命周期方法，提示开发者修改，这些方法可能会导致意外的副作用或错误。
• 检测意外的副作用，例如：多余的重新渲染、不符合预期的函数调用等。
• 检测某些过时的 API 使用，提供更好的替代方案。
• 检测警告信息，使其更加明显和易于发现。

需要注意的是，React 严格模式只在开发环境下工作，不会影响生产环境下的应用程序。因此，在开发过程中启用严格模式可以帮助开发者及早发现问题，并尽可能将这些问题解决，以提高应用程序的稳定性和质量。

总而言之，React 严格模式是一种非常有用的开发模式，可以帮助开发者发现常见问题并提高应用程序的质量。通过在顶层组件中添加 <React.StrictMode> 包裹，我们可以启用严格模式，并享受其带来的好处。

如何禁用严格模式

在 React 应用中禁用严格模式可以通过以下两种方式实现：

1. 直接移除 <React.StrictMode> 组件

最简单的方法是将应用程序顶层组件中的 <React.StrictMode> 组件直接移除。这样，React 将不会启用严格模式，也不会执行额外的检查和警告。

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

2. 在应用程序启动时禁用严格模式

在一些情况下，移除 <React.StrictMode> 组件可能不太方便，例如：在大型项目中或已经存在大量的 console.log 调用等代码片段。此时，可以在应用程序启动时禁用严格模式。

在应用程序启动文件中，我们可以使用 React 的 unstable_disableDevMode() 函数来禁用严格模式：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

React.unstable_disableDevMode();

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

在上述代码中，我们在调用 ReactDOM.render 之前调用了 React.unstable_disableDevMode() 函数，以禁用严格模式。该函数并不在文档中明确提供支持，因此请谨慎使用。

需要注意的是，禁用严格模式可能会导致一些潜在问题无法被及早发现，因此建议仅在必要时使用。同时，需要确保 React 版本兼容性，并遵循最佳实践和安全规则。

并发模式

React 并发模式（React Concurrent Mode）是 React 的一项新功能，旨在改善在复杂应用程序中的用户体验和性能。在传统的 React 中，更新组件树时会阻塞用户界面的响应，可能导致卡顿和延迟。而并发模式通过将任务分解为多个小步骤，让 React 在执行渲染和布局时可以中断和恢复任务，从而提供更平滑和响应式的用户体验。

在 React 并发模式中，引入了两个主要概念：任务调度和优先级。任务调度器负责决定哪些任务执行、何时执行以及中断和恢复任务。优先级允许 React 根据任务的紧迫性来安排任务的执行顺序，确保响应度更高的任务能够优先执行。

利用并发模式，React 可以将渲染过程分解为多个小任务，并根据优先级来动态调整任务执行的顺序。这样，在浏览器空闲时间或网络请求等异步操作期间，React 可以暂停当前任务，执行其他具有更高优先级的任务，以实现更爽快的用户交互体验。

总而言之，React 并发模式通过任务调度和优先级机制，提供了更好的用户体验和性能，使得 React 应用程序能够更加平滑地响应用户操作。

以下是一个简单的示例代码，展示了 React Concurrent Mode 的基本用法：

import React, { useState, useEffect, unstable_ConcurrentMode as ConcurrentMode } from 'react';


function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {

    const timer = setInterval(() => {

      setCount((prevCount) => prevCount + 1);

    }, 1000);

    return () => {

      clearInterval(timer);

    };

  }, []);

  return (

    <ConcurrentMode>

      <div>

        <h1>计数器</h1>

        <p>{count}</p>

      </div>

    </ConcurrentMode>

  );

}

export default App;

在上面的示例中，我们使用了 unstable_ConcurrentMode 组件来包裹根元素。这表示该组件下的子组件可以享受到并发模式的好处。

在 App 组件中，我们使用了 useState 来声明一个状态变量 count，并通过 setCount 来更新它的值。在 useEffect 中，我们使用定时器每秒钟增加 count 的值。注意，我们传递了空数组作为第二个参数，表示只在组件挂载时执行一次。

最后，在组件的返回值中，我们使用 <ConcurrentMode> 组件包裹了整个应用程序的 UI。这样，React 将会利用并发模式来处理渲染任务，以提供更平滑和响应式的用户体验。

服务端渲染

React 18 并没有专门针对服务端渲染（SSR）进行大规模的改进，但它仍然提供了一些与 SSR 相关的 API 和改进。以下是一些我们在 React 18 中可以使用的 SSR 相关功能：

1. useOpaqueIdentifier

useOpaqueIdentifier 允许开发者生成与数据不相关的、不透明的标识符，并在 SSR 上使用这些标识符来生成唯一的 DOM ID。

import { useOpaqueIdentifier } from 'react';

function MyComponent() {
  const id = useOpaqueIdentifier();

  return <div id={`my-component-${id}`}>My component</div>;
}

在上述代码中，我们使用了 useOpaqueIdentifier hook 来生成一个不透明的标识符，并将其用于组件的 DOM ID 中。由于这个标识符与数据无关，因此在 SSR 上也可以正确地生成唯一的 ID。

2. ReactDOMServer.renderToStringAsync

ReactDOMServer.renderToStringAsync 允许开发者异步地渲染组件并输出 HTML。这样可以避免在 SSR 期间阻塞主线程，在数据加载和计算时保持响应性。

import ReactDOMServer from 'react-dom/server';

async function renderApp(req, res) {
  const app = <MyApp />;
  const html = await ReactDOMServer.renderToStringAsync(app);
  res.send(html);
}

在上述代码中，我们使用了 ReactDOMServer.renderToStringAsync 方法异步地将 <MyApp /> 组件渲染为 HTML，并在 Express 中将其发送到客户端。

3. Concurrent Mode

Concurrent Mode 是 React 18 中引入的一个新特性，它通过异步渲染和交互优先级控制等方式提升了应用程序的响应性。在 SSR 中，Concurrent Mode 可以帮助开发者更好地处理异步数据加载和渲染等任务。

import { unstable_createRoot } from 'react-dom';

async function renderApp(req, res) {
  const app = <MyApp />;
  const root = unstable_createRoot(document.createDocumentFragment());
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟数据加载延迟
  root.render(app);
  const html = ReactDOMServer.renderToString(root);
  res.send(html);
}

在上述代码中，我们使用了 unstable_createRoot 方法来创建一个 Concurrent Mode 的根节点。在数据加载完成后，我们渲染了应用程序，并将其输出为 HTML。

这些是 React 18 中与 SSR 相关的一些功能和改进。通过使用这些功能，开发者可以更好地处理异步数据加载和渲染，并提升应用程序的响应性。