1. 是否升级版本

新的React版本对生命周期有比较大的改动，那么对于老项目，代码量很大，到底该不该升级呢？如果老项目改动起来非常麻烦，而且回归的点特别多的话，在React17之前，老的生命周期没有移除，可以继续使用，只是需要在老的生命周期前面加上UNSAFE前缀 npx react-codemod rename-unsafe-lifecycles这是升级到React16.x比较方便的方法，但是React17开始就移除了一些老的生命周期了。

2. React 新版本带来的新技能

2.1 Fragments/Portals/Strict Mode

Fragments：等价于空标签<>，用于包裹React元素，作为顶级元素使用的；
Portals：React Portals是React 16中引入的一个特性，它允许开发者在React应用中将组件渲染到DOM树中的任何位置，而不仅仅是在组件层级中；
React Strict Mode： React Strict Mode是React 16.3中引入的一个特性，它是一种工具，可以帮助开发者发现潜在的问题，同时也可以帮助React更好地优化应用程序。

React Strict Mode可以用来包裹整个应用程序，从而启用一些额外的检查和警告。具体来说，React Strict Mode会在开发环境中进行以下操作：

检查不安全的生命周期方法：React Strict Mode会检查使用了不安全的生命周期方法的组件，并在控制台中打印出警告信息。这可以帮助开发者发现可能导致问题的代码，并且可以更好地了解React的生命周期。

检查意外的副作用：React Strict Mode会在开发环境中对应用程序进行两次渲染，并比较两次渲染之间的输出。如果输出有所不同，React Strict Mode会在控制台中打印出警告信息，提示开发者进行排查。这可以帮助开发者发现可能会导致意外副作用的代码。

检查过时的API使用：React Strict Mode会检查应用程序中使用了过时的React API，并在控制台中打印出警告信息。这可以帮助开发者更新代码，以使用更新的React API。

除了上述检查之外，React Strict Mode还会在一些其他方面对应用程序进行优化，例如禁用一些不安全的生命周期方法，优化合成事件的行为等等。

使用React Strict Mode非常简单，只需要在根组件中使用<React.StrictMode>标签包裹应用程序即可。例如：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
在这个示例中，我们将应用程序包裹在<React.StrictMode>标签中。这样，在开发环境中，React会自动启用React Strict Mode，并对应用程序进行额外的检查和优化。

2.2 React Concurrent Mode

React Concurrent Mode是React的一个实验性特性，旨在改进React的并发渲染能力，提高应用程序的性能和用户体验。

传统的React渲染是单线程的，也就是说，每个组件的渲染都是按顺序进行的，如果某个组件的渲染时间过长，就会阻塞整个应用程序的渲染。这会导致应用程序的性能变差，用户体验变得不流畅。

React Concurrent Mode引入了一些新的特性和API，旨在改善这个问题。具体来说，React Concurrent Mode提供了以下几个方面的改进：

异步渲染：React Concurrent Mode支持异步渲染，也就是说，React可以将组件的渲染工作分解成小的任务，并按优先级顺序处理这些任务，以达到更快的渲染速度。这个特性可以显著提高应用程序的性能和用户体验。
调度器：React Concurrent Mode引入了一个新的调度器，它可以根据任务的优先级和剩余时间等因素，决定下一个任务应该执行哪个。这个特性可以帮助React更加智能地处理任务，提高渲染效率。
Suspense API：React Concurrent Mode还引入了一个新的API叫做Suspense，它可以帮助开发者更好地处理异步数据的加载和错误处理。使用Suspense API，开发者可以更加方便地在应用程序中处理异步数据，同时还可以提供更好的错误处理体验。

需要注意的是，React Concurrent Mode是一个实验性特性，目前还在开发和测试中，它可能会在未来的React版本中发生变化。如果您想使用React Concurrent Mode，请先仔细阅读相关文档，并在测试环境中进行尝试。

下面是一个使用React Concurrent Mode的示例：

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const result = await fetch('/api/data');
      setData(result);
    }

    fetchData();
  }, []);

  return (
    <React.ConcurrentMode>
      {data ? <MyComponent data={data} /> : <Loading />}
    </React.ConcurrentMode>
  );
}

在这个示例中，我们使用了React Concurrent Mode来处理异步数据的加载。当数据加载完成后，我们渲染了一个名为MyComponent的组件，并将数据传递给它。如果数据还没有加载完成，我们会渲染一个名为Loading的组件来提示用户数据正在加载中。

3. 清理缓存的命令

yarn cache clean

关于React的一些记录

1. 是否升级版本

2. React 新版本带来的新技能

2.1 Fragments/Portals/Strict Mode

2.2 React Concurrent Mode

3. 清理缓存的命令