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 中会有错误界线。那他们是怎么事变的呢？

（编辑：河北网）

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