一些开发经验（内附原文链接）偶然看到这篇文章，选取部分略作改进以供回顾原文的原文链接原文链接组件相关部分 1、使用

偶然看到这篇文章，选取部分略作改进以供回顾

组件相关部分

1、使用自闭合组件

<Select options={[]}></Select>
<Select options={[]} />

优势：减少dom操作次数，减少代码冗余

2、推荐使用`<>`组件而不是 DOM 元素来分组元素

在 React 中，每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中，而是使用 <> 来保持 DOM 整洁。

import Header from "./header";
import Content from "./content";
import Footer from "./footer";

const BadTest = () => {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
};

const GoodTest = () => {
  /** 若需要带key则将<>替换为<Fragment> **/
  return (
    <> 
      <Header />
      <Content />
      <Footer />
    </>
  );
};

3、props拆分

const MyComponent = props => {
  /** 若isUsed没传值则设置为初始值false **/
  const { value, onChange, isUsed = false } = props
  /** 在后面使用过程中直接使用value onChange即可，不必要props.value增加冗余代码 **/
}

4、通过判断某数组是否有值来做对组件是否展示时

const MyComponent = props => {
  const { badExamples = [], goodExamples = [] } = props
  return <div className="my-component">
    {badExamples.length && <Select options={badExamples} />}
    {!!goodExamples.length && <Select options={goodExamples} />}
    {goodExamples.length > 0 && <Select options={goodExamples} />}
    {!_.isEmpty(goodExamples) && <Select options={goodExamples} />}
  </div>
}

5、组件、定义声明、工具分开管理

6、代码维护顺序

数据维护在代码最上方，接口请求其次，hooks其次，handle方法其次最后useEffect

7、子组件若不需要从父组件获值，则与父组件作为兄弟组件同级写

const MyComponent = props => {
  return <div className="my-component">
    <OriginalParent {...props}>
      <OriginSon />
    </OriginalParent>
  </div>
}

key与ref

1、Table组件绑定的rowKey一定要具有唯一性，否则在数据变更时会乱

2、uuid工具可以随机生成一长串

React

1、一个组件的tsx、less/scss、工具等文件维护在一个文件夹下

2、一个组件的代码行数务必控制在500行内

3、限制判断条件多重嵌套，增加代码可读性

4、组件导出与引入

const MyComponent1 = () => {
  return <div className="my-component">
  </div>
}

export default MyComponent1

const MyComponent2 = () => {
  return <div className="my-component">
  </div>
}

export { MyComponent2 }

import MyComponent1 from './MyComponent1';
import { MyComponent2 } from './MyComponent2';

5、父组件想要使用子组件的值或方法可使用forwordRef

值得注意的是值传完不会变（印象是这样但不是很确定，实际应用需要验证一下，常规不会这么用）

一些开发经验（内附原文链接）