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

List.js

import React, { useState } from 'react'; 
import PropTypes from 'prop-types'; 
const ListItem = ({ action, title, setClicked }) => { 
 return ( 
 <li> 
 <button 
 onClick={() => { 
 setClicked(title); 
 action(); 
 }} 
 className="my-button"> 
 {title} 
 </button> 
 </li> 
 ); 
}; 
ListItem.propTypes = { 
 action: PropTypes.func, 
 setClicked: PropTypes.func, 
 title: PropTypes.string 
}; 
export default ListItem; 

ListItem.js

小结

当你开始研究 React 组件时，本文对初始组件的这些整理事变提供了一些值得参考的优越实践。

虽然，我们可以针对这个最终功效执行其他许多优化操纵，但路要一步一步走，这五个优越实践是很好的出发点。

【编辑保举】

1. 措施员节Keep被曝溘然裁人300多人，60%是开拓和运营
2. 措施员们该怎样破局！
3. 干货盘货！保行动施员行使的5款器材软件
4. 漫衍式技能“上位”举办时
5. 12306的技能扒光在你眼前，100万人怎样抢1万张票

（编辑：湖南网）

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