文档章节

成为高级 React 开发你需要知道的知识点

极光开发者服务
 极光开发者服务
发布于 07/24 10:43
字数 1013
阅读 4
收藏 0

简评:除了常见的 HOC 和 RenderProp 技巧,作者介绍了 7 个有用的知识点。

使用 Fragment 而不是 div

很多时候我们想要处理多个 component,但是 render 只允许返回一个 component,为了处理这个问题很可以使用 <div /> 标签来包装所有的 component 。但这会添加额外的 HTML 元素。所以官方的建议是推荐使用 React Fragments 来处理这个问题。

`import React, { Fragment } from 'react'; function ListItem({ item }) { return (

<Fragment>
  <dt>{item.term}</dt>
  <dd>{item.description}</dd>
</Fragment>

// 也可以使用 <>....</> 来替换 <Fragment>    // 等同于    // <>    //  <dt>{item.term}</dt>    //  <dd>{item.description}</dd>    // </>   

);} function Glossary(props) { return ( <dl> {props.items.map(item => ( <ListItem item={item} key={item.id} /> ))} </dl> );}`

context 用起来

Context 提供了一种方式将数据传递到整个 component 树中,而不必手动为每一层 component 传递 props。 因此,如果你有多个需要值的 component,建议使用 context。如果只有一个子 component 需要使用这个值建议使用 compositions。

最少使用一个 Error Boundaries

React 16 附带了一个惊艳的功能 Error Boundaries。使用 Error Boundaries 我们可以处理这种问题,子组件出现错误不会导致整个应用报错和白屏。

举个例子: 定义一个 ErrorBoundary 组件

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; }static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; }componentDidCatch(error, info) { // You can also log the error to an error reporting service logErrorToMyService(error, info); }render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; }return this.props.children; }}

用法和其他组件一样简单:

<ErrorBoundary> <MyWidget /></ErrorBoundary>

注意:React15 中的 unstable_handleError 方法不再有效,需要替换成 componentDidCatch 方法。 在生产环境中使用 production build

官网提供了很多提高性能的 配置。只需要 10 分钟即可给你的应用带来质的飞跃,在部署到生产环境前别忘了检查它们。

使用 Refs 来操纵元素

我们可以使用 Refs 来触发动画,文本选择或焦点管理。

例如: 我们可以 获取 inpout DOM 节点引用。

class CustomTextInput extends React.Component { constructor(props) { super(props); // Create a ref to store the textInput DOM element this.textInput = React.createRef(); } render() { // Use the ref callback to store a reference to the text input DOM // element in an instance field (for example, this.textInput). return ( <input type="text" ref={this.textInput} /> ); } }

然后就可以在合适的时机聚焦这个 <input />

focus() { // Explicitly focus the text input using the raw DOM API // Note: we're accessing "current" to get the DOM node this.textInput.current.focus(); }

使用代码拆分

如果你使用 create-react-app 创建应用或使用 NextJs 会自动创建一个 webpack 配置文件,webpack 会将整个应用打包到一个文件中,如果应用程序变得复杂或者添加第三方库都会导致最终生成的文件变大,导致应用访问速度变慢。这时候可以使用代码拆分,创建多个输出,在需要的时候才加载对应的包,可以大大改善网页加载时间。

可以使用 React.lazy 来实现代码拆分。

使用方式也很简单,这里简单实现一个基于路由代码分割的例子:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';import React, { Suspense, lazy } from 'react';const Home = lazy(() => import('./routes/Home'));const About = lazy(() => import('./routes/About'));const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> </Switch> </Suspense> </Router>);

注意: React.lazy 和 Suspense 暂不支持服务端渲染,如果服务端渲染想要实现这个功能可以使用 React Loadable。 静态类型检查 JavaScript 不会对类型进行检查,这可能导致很多的问题。可以使用类型检查器(例如 Flow)来帮助我们提前发现错误。Flow 是有 facebook 开发的类型检查器,可以给变量、函数和 React Component 添加而外的注释是一个不错的选择。

原文:Concepts to become an advanced React developer

© 著作权归作者所有

极光开发者服务
粉丝 43
博文 240
码字总数 257306
作品 1
深圳
个人站长
私信 提问
学习 React 前你需要知道些什么

如果你正在看这篇文章,你很可能已经知道 React 是啥了。React 的学习曲线陡峭是众所周知的,很多人在开始学习 React 时都一头雾水,笔者自然也不例外。究其原因,是因为我们在学习 React 的...

Hopsken
01/16
0
0
成为高级 React 开发你需要知道的知识点

使用 Fragment 而不是 div 很多时候我们想要处理多个 component,但是 render 只允许返回一个 component,为了处理这个问题很可以使用 标签来包装所有的 component 。但这会添加额外的 HTML...

大灰狼的小绵羊哥哥
2018/11/13
0
0
Flutter上阵,一套代码、多端运行的梦想,也许就要实现了

  “小步快跑、快速迭代”的开发大环境下 ,“一套代码、多端运行” 可以说是很多技术团队的梦想。为了这个梦想,我 曾考察过很多跨平台开发框架 ,比如 React Native、Weex、PWA 等等,但...

Android群英传
07/03
0
0
iOS高级架构师是如何养成?我来教你方法!

最近好多人私信问我,该怎样才能成为架构师,还有一个就对当前的状态感到迷茫。我在此做一个简单的说明,或者对迷茫中的你来说有些许帮助。 如果你是想成为iOS架构师,那么你首先要是一个iOS...

原来是泽镜啊
2018/05/09
10
0
自学前端之前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

爱龙猫
2017/02/24
2.5K
7

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
16
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
18
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部