简评：除了常见的 HOC 和 RenderProp 技巧，做者介绍了 7 个有用的知识点。node
使用 Fragment 而不是 divreact
不少时候咱们想要处理多个 component，可是 render 只容许返回一个 component，为了处理这个问题很可使用 <div /> 标签来包装全部的 component 。但这会添加额外的 HTML 元素。因此官方的建议是推荐使用 React Fragments 来处理这个问题。webpack
import React, { Fragment } from 'react'; function ListItem({ item }) { return (web
<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> );}react-router
context 用起来app
Context 提供了一种方式将数据传递到整个 component 树中，而没必要手动为每一层 component 传递 props。 所以，若是你有多个须要值的 component，建议使用 context。若是只有一个子 component 须要使用这个值建议使用 compositions。dom
最少使用一个 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