React教程：组件，Hooks和性能

正如我们的React教程的***部分中所指出的，开始使用 React 相对容易。首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。组件有可能会变大，或者你可能最终得到一堆不是组件的组件，最终你可能会到处编写重复的代码。

这时候你就应该试着开始真正的 React 之旅了 —— Think in React。

每当开发一个新的程序时，你需要为其做好在以后转换为 React 应用的新设计，首先试着确定设计草图中的组件，如何分离它们以使其更易于管理，以及哪些元素是重复的（或他们的行为）。尽量避免添加可能“将来有用”的代码 —— 虽然这很诱人，但可能未来永远也不会到来，你将留下一堆具有大量可配置选项的多余通用功能/组件。

此外，如果一个组件大于 2 到 3 个窗口的高度，也许值得分离（如果可能的话） —— 以后更容易阅读。

React 中的受控组件与非受控组件

在大多数应用中，需要输入和与用户进行某种形式的交互，允许他们输入内容、上传文件、选择字段等。 React 用两种不同的方式处理用户交互 —— 受控和非受控组件。

顾名思义，受控组件的值由 React 控制，能为与用户交互的元素提供值，而不受控制的元素不获取值属性。多亏了这一点，我们才能把 React 状态作为单一的事实来源，因此我们在屏幕上看到的与当前拥有的状态是一致的。开发人员需要传递一个函数，该函数用来响应用户与表单的交互，这将会改变它的状态。

 
 
 

  
  
  
class ControlledInput extends React.Component {  
  
  
  
 state = {  
  
  
  
   value: ""  
  
  
  
 };  
  
  
  
 onChange = (e) => this.setState({ value: e.target.value });  
  
  
  
 render() {  
  
  
  
   return (  
  
  
  
       
  
  
  
   );  
  
  
  
 }  
  
  
  
} 
 
 
 

在 React 的非受控组件中，我们不关心值的变化情况，如果想要知道其确切的值，只需通过 ref 访问它。

 
 
 

  
  
  
class UncontrolledInput extends React.Component {  
  
  
  
 input = React.createRef();  
  
  
  
 getValue = () => {  
  
  
  
   console.log(this.input.current.value);  
  
  
  
 };  
  
  
  
 render() {  
  
  
  
   return (  
  
  
  
       
  
  
  
   );  
  
  
  
 }  
  
  
  
} 
 
 
 

那么应该怎么选择呢？在大数情况下用受控组件是可行的，不过也有一些例外。例如使用非受控制组件的一种情况是 file 类型输入，因为它的值是只读的，不能在编码中去设置（需要用户交互）。另外我发现受控组件更容易理解和于使用。对受控组件的验证是基于重新渲染的，状态可以更改，并且可以很轻松的显示输入中存在的问题（例如格式错误或者输入为空）。

Refs

在前面我们提到过 refs，这是一个特殊功能，可以在类组件中使用，直到 16.8 中出现了 hooks。

refs 可以通过引用让开发人员访问 React 组件或DOM元素（取决于我们附加 ref 的类型）。***仅在必须的场景中使用它们，因为它们会使代码难以阅读，并打破从上到下的数据流。然而，有些情况下它们是必要的，特别是在DOM元素上（例如：用编码方式改变焦点）。附加到 React 组件元素时，你可以自由使用所引用的组件中的方法。不过还是应该避免这种做法，因为有更好的方法来处理它（例如，提升状态并将功能移动到父组件）。

refs 还可以做到：

•  使用字符串字面量（历史遗留的，应该避免），
•  使用在 ref 属性中设置的回调函数，
•  通过创建 ref 作为 React.createRef() ，并将其绑定到类属性，并通过它去访问（请注意，在 componentDidMount 生命周期中将提供引用）。

没有传递引用的一种情况是当在组件上使用高阶组件时 —— 原因是可以理解的，因为 ref 不是 prop（类似于 key）所以它没有被传递下来，并且它将引用 HOC 而不是被它包裹的组件。在这种情况下，我们可以使用React.forwardRef，它把 props 和 ref 作为参数，然后可以将其分配给 prop 并传递给我们想要访问的组件。

 
 
 

  
  
  
function withNewReference(Component) {  
  
  
  
 class Hoc extends React.Component {  
  
  
  
   render() {  
  
  
  
     const {forwardedRef, ...props} = this.props;  
  
  
  
     return ;  
  
  
  
   }  
  
  
  
 }  
  
  
  
 return React.forwardRef((props, ref) => {  
  
  
  
   return ;  
  
  
  
 });  
  
  
  
} 
 
 
 

错误边界

事情越复杂，出现问题的概率就越高。这就是为什么 React 中会有错误边界。那他们是怎么工作的呢？

如果出现问题并且没有错误边界作为其父级，则会导致整个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 
Help, something went wrong.
;  
  
  
  
    }  
  
  
  
    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 (  
  
  
  
                 
  
  
                   {...this.props}  
  
  
  
                   importantFunction={this.importantFunction}  
  
  
  
               />  
  
  
  
           );  
  
  
  
       }  
  
  
  
   };  
  
  
  
} 
 
 
 

样式

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

首先，常规 CSS/内联样式在这里能够正常应用，你只需在 className 属性中添加 CSS 中的类名，它就能正常工作。内联样式与常规 HTML 样式略有不同。样式属性也是使用驼峰命名法，因此 border-radius 会变成 borderRadius 。

React 似乎推广了一些不仅在 React 中变得普遍的解决方案，例如最近集成在 CRA 中的 CSS 模块，你可以在其中简单地导入 name.modules.css 并用其属性来调整组件的样式（某些IDE（例如WebStorm）也具有自动完成功能，能告诉你可用的名称。

在 React 中另一个流行的解决方案是 CSS-in-JS（例如，emotion 库）。再说一点，CSS 模块和 emotion（或者一般来说是CSS-in-JS）对 React 没有限制。

React 中的 Hooks

自重写以来，Hooks 很可能是 React 最受热切期待的补充。这个产品是否能不负众望？从我的角度来看，是的，因为它确实是一个很棒的功能。它们本质上是带来了新的体验，例如：

•  允许删除许多 class 组件，这些组件我们仅仅是使用而不归我们拥有，例如本地状态或 ref，所以组件的代码看上去更容易阅读。
•  可以让你用更少的代码来获得相同的效果。
•  使函数更容易理解和测试，例如：用 react-testing-library。
•  也可以携带参数，一个 hook 返回的结果可以很容易地被另一个 hook 使用（例如，useEffect 中的 setState 被 useState 使用）。
•  比类更好地缩小方式，这对于 minifiers 来说往往更成问题。
•  可能会删除 HOC 并在你的应用中渲染 props ，尽管 hook 被设计用于解决其他问题，但仍会引入新问题。
  •   能够被熟练的React开发人员定制

默认的 React hook 很少。其中三个基本的hook是 useState，useEffect 和 useContext。还有一些其它的，例如 useRef 和 useMemo，不过现在我们把重点放在基础知识上。

先看一下 useState，让我们用它来创建一个简单的计数器的。它是如何工作的？基本上整个结构非常简单：

 
 
 

  
  
  
export function Counter() {  
  
  
  
 const [counter, setCounter] = React.useState(0);  
  
  
  
 return (  
  
  
  
   
  
  
  
  
     {counter}  
  
  
  
      setCounter(counter + 1)}>+