React教程：组件，Hooks和性能

假如呈现题目而且没有错误界线作为其父级，则会导致整个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 自己有关，但出于各类缘故起因照旧值得一提的。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!