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 (  
     <input value={this.state.value} onChange={this.onChange}/>  
   );  
 }  
} 

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

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

那么应该怎么选择呢？在大数情况下用受控组件是可行的，不过也有一些例外。例如使用非受控制组件的一种情况是 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 <Component ref={forwardedRef} {...props}/>;  
   }  
 }  
 return React.forwardRef((props, ref) => {  
   return <Hoc {...props} forwardedRef={ref} />;  
 });  
} 

错误边界

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

（编辑：ASP站长网）