React教程：组件，Hooks和性能(2)

如果出现问题并且没有错误边界作为其父级，则会导致整个React 应用失败。不显示信息比误导用户并显示错误信息要好，但这并不意味着你应该放任整个应用崩溃并显示白屏。通过错误边界，可以得到更多的灵活性。你可以在整个应用程序中使用并显示一个错误消息，或者在某些小部件中使用它但是不显示，或者显示少量信息来代替这些小部件。

请记住，它仅涉及声明性代码的问题，而不是你为了处理某些事件或者调用而编写的命令式代码。对于这些情况，你仍应使用常规的 try/catch 方法。

在错误边界也可以将信息发送到你使用的 Error Logger （在 componentDidCatch 生命周期方法中）。

class ErrorBoundary extends React.Component {  
  state = { hasError: false };  
  static getDerivedStateFromError(error) {  
    return { hasError: true };  
  }  
  componentDidCatch(error, info) {  
    logToErrorLogger(error, info);  
  }  
  render() {  
    if (this.state.hasError) {  
      return <div>Help, something went wrong.</div>;  
    }  
    return this.props.children;   
  }  
} 

高阶组件

高阶组件（HOC）经常在 React 中被提及，这是一种非常流行的模式，你可能会用到它（或者已经在用了）。如果你熟悉 HOC，可能已经在很多库中看到过 withNavigation，connect，withRouter。

HOC 只是一种把组件作为参数的函数，并且与没有 HOC 包装器的组件相比，能够返回具有扩展功能的新组件。多亏了这一点，你可以实现一些易于扩展的功能，以此增强自己的组件（例如：访问导航）。 HOC 也有一些其它形式的调用方式，这取决于我们当前拥有什么，唯一的参数必须要传入一个组件，但它也可以接受额外的参数 —— 一些选项，或者像在 connect 中一样，首先使用configurations调用一个函数，该函数稍后返回一个带参组件，并返回 HOC 。

以下是一些你应该做的和要避免做的事情：

•  为包装器 HOC 函数添加显示名称（这样你就能知道它到底是干什么用的，实际上是通过更改 HOC 组件显示名称来做到）。
  • 不要在渲染方法中使用HOC —— 你应该在其中使用增强组件，而不是在那里创建新的 HOC 组件，因为它一直在重新装载并丢失其当前状态。
  • 静态方法不会被自动复制，所以如果你想在新创建的 HOC 中使用一些静态方法，需要自己去复制它们。
  •  涉及到的 Refs 不会被传递，所以使用前面提到的 React.forwardRef 来解决这些问题。 

export function importantHoc() {  
   return (Component) => class extends React.Component {  
       importantFunction = () => {  
           console.log("Very Important Function");  
       };  
       render() {  
           return (  
               <Component  
                   {...this.props}  
                   importantFunction={this.importantFunction}  
               />  
           );  
       }  
   };  
} 

样式

样式不一定与 React 本身有关，但出于各种原因还是值得一提的。

（编辑：ASP站长网）