自定义react class 代码规范

Posted 2022-07-11 胖鹅68

文章目录

• 一、规范约束
• 二、 vscode React 插件

一、规范约束

1. 如果没有必要写 constructor 就不要 constructor 构造函数
2. 属性直接定义在class 下，不必放到 constructor中（定义 state 作为状态管理）
3. 使用箭头函数定义方法 （省去了bind函数切换上下文）
4. props默认值和校验使用 static propTypes 和 static defaultProps定义

//创建组件
class Person extends React.Component
  
  /* 
    React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
   */
	myRef = React.createRef()
  
  /*
  constructor(props)
    //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
    // console.log(props);
    super(props)
    console.log('constructor',this.props);
  
  */
  
  //展示左侧输入框的数据
  showData = ()=>
    alert(this.myRef.current.value);
  

  //对标签属性进行类型、必要性的限制
  static propTypes = 
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
  

  //指定默认标签属性值
  static defaultProps = 
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
  
  
  render()
    // console.log(this);
    const name,age,sex = this.props
    //props是只读的
    //this.props.name = 'jack' //此行代码会报错，因为props是只读的
    return (
    <>
      <input ref=this.myRef type="text" placeholder="点击按钮提示数据"/>&nbsp;
      <button onClick=this.showData>点我提示左侧的数据</button>&nbsp;
      <ul>
        <li>姓名：name</li>
        <li>性别：sex</li>
        <li>年龄：age+1</li>
      </ul>
    </>
    )
  

二、 vscode React 插件

1. 安装插件
   
2. 插件的“代码块”（快速生成代码）

class 定义 组件

function 定义 组件