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年所能看到的最重要的变革。

（编辑：湖南网）

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