10个专家ReactJS提示,您今天需要知道

Expert ReactJS tips

+$React has grown into one of the most popular tools found in a web developer’s library, but like anything, you need to learn how to use it properly to get the most out of it.

+$If you're struggling with React, you're in luck. As we've compiled a selection of essential techniques that will improve your code output. Read on to discover how to get the most out of the framework.

01.高阶组件

组件通常彼此共享功能,例如日志记录或网络请求。随着使用该逻辑的数量增加,这些可能变得难以维持。鼓励开发人员抽象共享代码并在必要时包含它。

在常规的JavaScript应用程序中,概念了高阶功能是接近它的一种方式。简而言之,它们是将其他功能作为参数并将行为传递给它们的功能。数组方法如地图过滤就是这些例子。

高阶组件(HOC)是React实现同样目标的方式。它们是将行为传递给通过的组件的组件。

const Logger = WrappedComponent =>(类Logger extends Component {componentDidMount(){console.log('mounted');} render(){return  }}; export default Logger(MyComponent);

在此示例中,该函数返回一个新的包装组件,该组件呈现与任何道具一起传入的原始组件。 HOC是常规组件,可以做任何事情,例如传递自己的道具和挂钩到生命周期回调中。然后该函数将原始包装在导出上。通过使用HOC,它使常用的代码块更易于维护和测试。当需要特定功能时,它们很容易插入,安全地知道它将按预期运行。

02.容器和表示组件

calendar UI

对于复杂的UI(例如日历),只要将容器保持独立,就可以将容器放在表示组件中。

在开发应用程序的不同部分时保持关注点分离始终很重要。在可能的情况下,保持获取数据的方法远离它的显示方式。在React中,当涉及容器和表示组件时,采用类似的概念。

class ProductsContainer扩展了Component {[...] componentDidMount(){fetchProducts()。then(products => this.setState({products})); } render(){return  ; }}

这里,产品通过容器内部的外部方法获取,保存在自己的商店中,然后作为道具传递给表示组件制品显示它们。

容器组件不知道如何显示信息,它只知道如何获取和调整它。同样,表示组件不知道数据来自何处。任一组件的功能都可以更改,而不会影响另一个组件。

应用程序的另一部分 - 或完全单独的应用程序 - 可以使用相同的表示组件。通过让它仅在props上工作,应用程序的每个部分只需要在它周围创建自己的容器。

这种方法也使单元测试变得更容易。容器测试只需要担心设置状态,而表示组件可以通过静态道具来实现可预测的结果。

03.错误边界

无论项目如何组合在一起,错误仍然会找到方法。这些可能在非常特定的情况下发生,难以诊断并使应用程序处于不稳定状态 - 这对用户和开发人员来说都是绝对的噩梦。

React V16于2017年9月发布。作为该更新的一部分,任何未处理的错误现在都将卸载整个应用程序。为了解决这个问题,引入了错误边界的概念。当组件中发生错误时,它将通过其父项冒泡,直到它到达将要卸载的应用程序的根目录,或者找到将处理错误的组件。错误边界的概念是一个通用组件,负责处理其子级的错误。

componentDidCatch(error,info){this.setState({error:error.message}); } render(){return this.state.error?  :this.props.children; }

通过挂钩到新的生命周期方法,可以将错误存储在状态中并替换子内容。这有效地将应用程序的这个分支与其余部分隔离开来。

边界像try / Catch块一样工作。它们可以在没有问题的情况下彼此嵌套,但是在它们内部发生的任何错误都将被下一个边界向上捕获。它们最好保持尽可能简单。

04.门户网站

The contents of the portal appear inside the original component within React's DevTools

门户网站的内容显示在React的DevTools中的原始组件内

有时,组件需要从其父组件中脱离出来以在DOM中的其他位置。例如,模态窗口属于页面的顶层,以避免z-index和定位问题。

门户网站也是v16的一部分,它使React能够将组件呈现为完全独立于应用程序其余部分的DOM节点。内容将保留在React的结构中,但会在其他地方呈现。这意味着在门户网站内触发的任何事件都会在React中通过父级冒泡,而不是进入门户网站容器元素本身。

ReactDOM.createPortal(this.props.children,document.getElementById('modal'),);

通过创建专用组件,可以通过渲染功能返回门户。当需要显示内容时,可以将其包装在此组件中,然后显示在另一个元素中。

05.带有样式组件的CSS

default and primary Reactjs

组件被赋予一个随机的className以匹配样式,遗憾的是,它可以使DevTools中的重新定位变得更加困难

使用可重用组件设置应用程序样式可能会导致类名冲突的问题。 BEM等公约有助于缓解这一问题,但它们的目的是治疗症状而不是问题。

组件可以负责自己的风格。这意味着他们可以动态调整视觉效果,而无需内联样式或类切换。其中一个解决方案是风格组件,它使用JavaScript的优势。

顾名思义,它不是创建classNames而是创建全新的现成样式组件。系统使用ES2015标记模板文字,它可以接受常规CSS并将其应用于请求的元素。

const Button = styled.button` font-size:2rem;背景:$ {props => props.primary? '#3CB4CB':'white'}; `;

通过使用占位符,可以动态更改样式。在此示例中,按钮背景会根据按钮是否通过a而更改支柱。这里可以使用任何表达式来计算所需的样式。

创建的组件可以像任何其他组件一样使用,任何道具都将通过。自定义组件也可以使用相同的方式设置样式风格(组件名称)代替。

06.使用React特定的linting

Visual Studio Code

Visual Studio Code等代码编辑器可以与链接器集成,并在编写组件时为用户提供实时反馈

保持代码清洁的最佳方法之一是使用linter工具。它们定义了代码应遵循的一组规则,并将突出显示失败的任何位置。通过确保所有代码在合并到代码库之前传递这些规则,项目保持可维护性并且代码质量提高。

ESLint是各种JavaScript项目的流行品牌。有些插件可用于分析特定的代码样式。其中最常见的一种
React是一个名为的npm包Eslint-插件反应的

默认情况下,它会检查一些最佳实践,规则将迭代器中的键检查到一组完整的prop类型。通过更新.eslintrc配置文件,可以在每个项目的基础上启用更多选项。

另一个流行的插件是eslint-插件 - JSX-A11Y,这将有助于解决可访问性的常见问题。由于JSX提供的语法与常规HTML略有不同,因此存在问题ALT文字和Tabindex属性例如,常规插件不会被拾取。它还将获取特定于React的问题,例如分配咏叹调道具有不同的语法。

07.用Jest进行快照测试

Jest

Jest将准确显示两个快照之间发生了哪些变化,这有助于识别意外的故意变更

尽管具有完整的测试覆盖率具有明显的优势,但确实需要付出代价。在编写大量小组件时,测试可能需要比组件本身更长的代码。大多数情况下,实际上只需检查是否有任何变化。

Jest是由Facebook创建的测试框架。其独特的功能之一使开发人员能够在一个时间点捕获组件的视图,并将其与未来的任何更改进行比较。这些变化 - 有意或无意 - 将被标记为接受或拒绝。当很容易看到确切的变化时,测试变得快速,可预测且易于调试。

test('Button renders',()=> {const button = renderer .create(  ).toJSON(); expect(button).toMatchSnapshot();});

当测试首次运行时,Jest会将视图转换为JSON并将其存储在可以提交给源代码控制的特殊目录中。下次运行时,它会检查文件并标记任何差异。如果该更改是故意更改,则替换快照并且测试通过。了解有关Jest和快照测试的更多信息

08.代码分裂

与任何单页面应用程序一样,所有内容都捆绑在一个文件中,如果不加以检查,它可以快速绽放。诸如Webpack之类的工具可以帮助将此捆绑包拆分为更易于管理的块,然后可以根据需要进行请求。

由于React鼓励创建大量较小的组件,因此有很多机会可以打破捆绑。该反应可装载Package使组件能够准确定义它需要呈现的内容,并且Webpack可以自动拆分它的包以适应这种情况。

const LoadableButton =可加载({loader:()=> import('./ Button'),loading:()=> 
载入中...
,});

可加载是一个HOC,它将动态导入组件所需的任何内容。它需要一些设置,例如在所有内容加载时显示的内容,这使得它可以高度自定义。LoadableButton然后可以作为常规组件使用而不会出现问题。

对于具有路由的较大应用程序,按路由而不是组件分割可能更有利。可以通过一个请求引入公共路径,并且可以帮助加快速度。在捆绑数量和总体大小之间取得平衡非常重要,这将根据应用程序的需要而变化。

关于的更多细节反应可装载可以被找寻到这里

09.服务器渲染

对于大型应用程序,用户可以在网站加载时查看空白屏幕。理想情况下,这应该尽可能小。通过在服务器上呈现初始视图,可以减少感知的加载时间,这带来了使爬虫更容易解析内容的额外好处。

React已经配备了处理节点服务器上的渲染。可以使用特殊版本的DOM渲染器,它遵循与客户端相同的模式。

从'react-dom / server'导入ReactServer;从'./App'导入应用程序; [...] ReactServer.renderToString(  );

此方法将输出常规HTML作为字符串,然后可以将其作为服务器响应的一部分放在页面主体中。在客户端,React检测预先呈现的内容并无缝地从中断的位置进行选择。

使用代码拆分,路由或状态容器的应用程序中的服务器呈现可能会变得更复杂,但仍然可能。例如,Redux将在服务器上构建一个预加载的状态对象,它可以在创建存储时为客户端提供水分。

10.国际化

Intl API

大多数浏览器的最新版本都支持Intl API,其他浏览器可以使用polyfill

对于全球网站而言,国际化(i18n)对于吸引当地受众至关重要。对于像React这样的客户端库,过去唯一的选择就是提供缓慢,庞大的库来处理翻译和数字格式等问题。最近,本机Intl API已在浏览器中提供,以避免繁重的下载成本。

雅虎团队的一个名为React Intl的库有助于将这个新API引入React项目。一组特殊的组件会自动转换字符串并格式化数字,日期和货币。它构成了名为FormatJS的i18n工具集的一部分。

每个组件都采用镜像Intl API可用设置的道具。通过提供所需的日期格式,API可以使用它所知道的浏览器区域设置来计算字符串。任何这些道具改变时,字符串都会自动更新。

字符串翻译需要添加适当的翻译消息支持应用程序根目录的提供程序,但可以在整个应用程序中使用。库会检测ID并根据需要替换内容。可以找到此功能中所有选项的详细信息这里

+$This article was originally published in a 2018 issue of,这是全球最畅销的网页设计师和开发者杂志。在这里订阅

相关文章:



翻译字数超限