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

VPointer 发布于2019-08-19 11:48 / 3288人阅读

摘要：简评除了常见的和技巧，作者介绍了个有用的知识点。但这会添加额外的元素。因此，如果你有多个需要值的，建议使用。静态类型检查不会对类型进行检查，这可能导致很多的问题。可以使用类型检查器例如来帮助我们提前发现错误。

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

使用 Fragment 而不是 div

很多时候我们想要处理多个 component，但是 render 只允许返回一个 component，为了处理这个问题很可以使用

标签来包装所有的 component 。但这会添加额外的 HTML 元素。所以官方的建议是推荐使用 React Fragments 来处理这个问题。

import React, { Fragment } from "react";
function ListItem({ item }) {
  return (
    
    
      {item.term}
      {item.description}
    

    // 也可以使用 <>.... 来替换     // 等同于    // <>    //  {item.term}
    //  {item.description}    //    
  );}
function Glossary(props) {
  return (
    
      {props.items.map(item => (
        
      ))}
    
  );}

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 Something went wrong.;
    }return this.props.children; 
  }}

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

注意：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 (
      
    );
  }
}

然后就可以在合适的时机聚焦这个

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 = () => (
  
    Loading...

}> );

注意： React.lazy 和 Suspense 暂不支持服务端渲染，如果服务端渲染想要实现这个功能可以使用 React
Loadable。

静态类型检查

JavaScript 不会对类型进行检查，这可能导致很多的问题。可以使用类型检查器（例如 Flow）来帮助我们提前发现错误。Flow 是有 facebook 开发的类型检查器，可以给变量、函数和 React Component 添加而外的注释是一个不错的选择。

原文：Concepts to become an advanced React developer

云服务器 GPU云服务器你知道你应该知道数据分析知道你百度一下你就知道了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77908.html

掘金 AMA：听《Android进阶解密》作者--刘望舒聊 Android 开发、进阶那些事

摘要：第二十二期掘金团队请来了进阶解密作者刘望舒做了为期三天的活动活动已结束。我们在此精选了一些来自用户的提问及刘望舒的回答。提醒本期分布式微服务主题的正在进行，欢迎前去提问，传送门关于刘望舒进阶之光进阶解密的作者，安卓巴士等技术大会特邀讲师。第二十二期 AMA 掘金团队请来了《Android进阶解密》作者-- 刘望舒做了为期三天的 Ask Me Anything (AMA) 活动（活动已结束）。...

wenyiweb 2019-05-23 17:30 评论0 收藏0
2017年最好的javascript 书籍

摘要：请记住，这些书中的一些可能不是最新的，但概念和基础仍应适用。是最好的老师之一。的秘密由部分组成。在你完成这些书后，查看书籍和最好的本土书籍。我看过三本，第1本，第二本，第四本。第一本买的的实体书，其他两本看的是电子书。第一本是大名鼎鼎老道写的，书很薄，但是非常经典。javascirpt忍者秘籍是jquery的作者写的，也是非常经典。you dont kown js系列也是非常好。看了...

mingzhong 2019-08-20 15:05 评论0 收藏0
React知识梳理

摘要：只是一个语法糖，它可以将文件里的转换成所以对于方法使用要知道。组件的传递给内部组件，内部组件传递给内内部组件。没有解决什么问题如何构建大型项目没有解决，如何管理大型项目的数据状态没有解决。 React解决了什么问题？首先React是单页应用时期出现的框架，它适合开发单页应用，随之配套的构建工具webpack、node环境。传统UI操作关注太多DOM的API细节。React帮助我们不...

GitChat 2019-08-23 17:14 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0