React教程：组件，Hooks和性能

如果你计划冻结库的版本，并认为它们可能长时间内不会被更改，那么 Vendor bundles 可能很有用。此外，更大的文件更适合用 gzipping，因此从拆分获得的好处有时可能不值得。这取决于文件大小，有时你需要自己去尝试。

代码拆分

代码拆分的方式比这里给出的建议多得多，但让我们关注 CRA 和 React 本身可用的内容。基本上，为了将代码分成不同的块，可以使用 import()，这可以用 Webpack 支持（ import本身是第3阶段的提案，所以它还不是语言标准的一部分）。每当 Webpack 看到 import 时，它就会知道需要在这个阶段开始拆分代码，并且不能将它包含在主包中（它在import中的代码）。

现在我们可以将它与 React.lazy() 连接起来，它需要 import() 一个文件路径，其中包含需要在那个地方渲染的组件。接下来，我们可以用 React.suspense()，它会在该位置显示不同的组件，一直到导入的组件全部加载完毕。有人可能会想，如果我要导入单个组件，是不是就不需要它了呢？

实际上并非如此，因为 React.lazy() 将显示我们 import() 的组件，但 import() 可能会获取比单个组件更大的块。例如这个组件可能包含其他库，或更多代码，所以不只是需要一个文件 —— 它可能是绑在一起的多个文件。最后，我们可以将所有这些包装在 ErrorBoundary 中（你可以在本文关于错误边界的那部分中找到代码） 如果某些内容因我们想要导入的组件而失败（例如出现网络错误），这将作为备用方案。

import ErrorBoundary from './ErrorBoundary';  
const ComponentOne = React.lazy(() => import('./ComponentOne'));  
function MyComponent() {  
   return (  
       <ErrorBoundary>  
           <React.Suspense fallback={<div>Loading...</div>}>  
               <ComponentOne/>  
           </React.Suspense>  
       </ErrorBoundary>  
   );  
} 

这是一个简单的例子，但显然你可以做得更多。你可以使用 import 和 React.lazy 进行动态路由划分（例如：管理员与常规用户）。请注意，React.lazy 仅支持默认导出，并且不支持服务器端呈现。

React 代码性能

关于性能，如果你的 React 应用运行缓慢，有两种工具可以帮助你找出问题。

第一个是 Chrome Performance Tab，它会告诉你每个组件会发生什么（例如，mount，update ）。有了它你应该能够确定哪个组件可能会出现性能问题，然后进行优化。

另一种选择是 DevTools Profiler ，它在 React 16.5+ 中可用，并与 shouldComponentUpdate 配合（或PureComponent，在本教程的第一部分中解释），我们可以提高一些关键组件的性能。

显然，对网络进行基本优化是最佳的，例如对一些事件进行去抖动（例如，滚动），对动画保持谨慎（使用变换而不是通过改变高度并实现动画）等等。这些问题很容易被忽略，特别是如果你刚刚掌握了 React。

2019年及以后的 React 现状

如果要讨论 React 的未来，我个人不会太在意。从我的角度来看，React 在 2019 年及以后的地位很难被撼动。

React 拥有如此强大的地位，在一个大社区的支持下很难被废弃。 React社区非常棒，它总是产生新的创意，核心团队一直在不断努力改进 React，并添加新功能和修复旧问题。 React 也得到了一家大公司的支持，但许可证已经不是问题 —— 它现在使用 MIT license。

是的，有一些事情有望改变或改进；例如，使 React 稍微小一些（提到的一个措施是删除合成事件）或将 className 重命名为 class。当然，即使这些看似微小的变化也可能导致诸如影响浏览器兼容性等问题。就个人而言，我也想知道当 WebComponent 获得更多人气时会发生什么，因为它可能会增加一些 React 经常用到的东西。我不相信他们会成为一个彻头彻尾的替代者，但我相信他们可以很好地相互补充。

至于短期，hook 刚刚被加入到 React。这可能是自 React 重写以来发生的最大变化，因为它们将带来更多可能性并增强更多功能组件（现在他们真的被大肆宣传）。

最后，正如我最近所说的那样，有React Native。对我来说，这是一项伟大的技术，在过去的几年中发生了很大的变化。 React Native正在重写它的核心，这应该以与 React 重写类似的方式完成（它全部是内部的，几乎没有任何东西应该为开发人员改变）。异步渲染成为本机和 JavaScript 之间更快更轻量级的桥梁。当然还有更多改变。

在 React 生态中有很多值得期待的东西，但 hook（以及React Native，如果有人喜欢手机应用的话）的更新可能将会是我们在2019年所能看到的最重要的变化。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!