重构伟大的React组件：编写高效且可读组件的5个优越实践

 题目

React.js 已成为 Web 组件中很受接待的视图库。一起进化下来，它成长出了浩瀚特征，现在已成为建设优越的 Web 应用措施的一套完备器材。

它的社区经验了发作式增添，尤其在已往的 2-3 年中，收集上呈现了成千上万有关这项技能的教程。

因此，每位初学者在开始进修 React 时都应该做一件工作，那就是阅读其文档或教程进而建设他们的第一个组件，就像我在 Codeworks 上开始我的进修旅途一样:

https://codeworks.me/?utm_source=medium&utm_medium=organic&utm_campaign=marco_ghiani_hackernoon_how_to_write_clean_react_components

但我的题目是：你能必定你的 React 组件遵循了优越实践吗?简朴来说，它们是不是正常事变呢?

脏组件长什么样

为了更好地声名我的概念，让我们来看看下面的 React 组件：

import React from 'react'; 
import './Listcomponent.css'; 
class Listcomponent extends React.Component { 
 constructor(props) { 
 super(props); 
 this.state = { 
 lastClickedButton: '' 
 }; 
 } 
 render() { 
 return ( 
 <div> 
 <hl>The last clicked button is {this.state.lastClickedButton}</hl> 
 <ul> 
 <li> 
 <button 
 onClick={() => { 
 this.setState({ lastClickedButton: 'Create' }); 
 this.props.createSomething(); 
 }} 
 className="my-button"> 
 Create 
 </button> 
 </li> 
 <li> 
 <button 
 onClick={() => { 
 this.setState({ lastClickedButton: 'Read' }); 
 this.props.readSomething(); 
 }} 
 className="my-button"> 
 Read 
 </button> 
 </li> 
 <li> 
 <button 
 onClick={() => { 
 this.setState({ lastClickedButton: 'Update' }); 
 this.props.updateSomething(); 
 }} 
 className="my-button"> 
 Update 
 </button> 
 </li> 
 <li> 
 <button 
 onClick= {() => { 
 this.setState({ lastClickedButton: 'Destroy' }); 
 this.props.destroySomething(); 
 }} 
 className="my-button"> 
 Destroy 
 </button> 
 </li> 
 </ul> 
 </div> 
 ); 
 } 
} 

一个肮脏的 React 组件

这是一个完全正常事变的 React 组件，可以在整个应用措施中多次行使。它渲染了一个按钮列表，这些按钮会触发某个变乱，组件还会表现最近被点击的是哪个按钮。总之很简朴。

你也许会想：“好吧……假如能用，那就没什么题目!”

但假若有人汇报你，此刻这个用 62 行代码写成的组件着适用少得多的代码也能做出来呢?以是我们开始做打扫吧!

1. 优先行使 React Hooks 实现函数组件

跟着 React 16.8 引入 Hooks，我们就可以在类声明中行使函数组件来组成有状态组件(假如我们必要处理赏罚任何逻辑)了。

在本文中，我们不会深入接头类与函数组件或 React Hooks。但在 React 社区中众所周知的是，最好优先建设函数组件，尤其是此刻我们有了 Hooks 这么好用的器材。

Hooks 应承你复用状态逻辑，而无需变动组件条理布局。

接下来让我们看一下第一次重构后组件的样子：

import React, { useState } from 'react'; 
import './ListComponent.css'; 
const ListComponent = props => { 
 const [lastClickedButton, setLastClickedButton] = useState(''); 
 return ( 
 <div> 
 <hl>The last clicked button is {lastClickedButton}</hl> 
 <ul> 
 <li> 
 <button 
 onClick={() => { 
 setLastClickedButton('Create'); 
 props.createSomething(); 
 }} 
 className="my-button"> 
 Create 
 </button> 
 </li> 
 <li> 
 <button 
 onClick={() => { 
 setLastClickedButton('Read'); 
 props.ReadSomething(); 
 }} 
 className="my-button"> 
 Read 
 </button> 
 </li> 
 <li> 
 <button 
 onClick={() => { 
 setLastClickedButton('Update'); 
 props.updateSomething(); 
 }} 
 className="my-button"> 
 Update 
 </button> 
 </li> 
 <li> 
 <button 
 onclick={() => { 
 setLastClickedButton('Destroy'); 
 props.DestroySomething(); 
 }} 
 className="my-button"> 
 Destroy 
 </button> 
 </li> 
 </ul> 
 </div> 
 ); 
}; 

用 React Hooks 重组成函数组件很好，我们的组件已经短一些了，我们还删除了 类 语法，但如故必要做很多优化事变。

2. 操作好它!

（编辑：湖南网）

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