react公共组件开发

小样板：

<!--组件内部代码-->
import React, { Fragment, useState, useEffect } from 'react';
import { Radio } from '@/@tencent/tea-component';
import styles from '../style.less';

interface GoodsProps {
  goodsRangeType: number;
  onChange: Function;
}
const ConquerIGoods: React.FC<GoodsProps> = React.memo<GoodsProps>(function ConquerIGoods(props) {
<!--接收传入的值-->
  const { goodsRangeType, onChange} = props;
  const [nowgoodsRangeType, setgoodsRangeType] = useState<string>('1');
  useEffect(() => {
    <!--接收传入值的变动执行相关操作-->
     setgoodsRangeType(`${goodsRangeType}`);
  }, [goodsRangeType]);

  useEffect(() => {
  <!--相应本界面内对值得操作，通过外部传入得onChange方法再传到外部-->
    let obj = {
      goodsRangeType: Number(nowgoodsRangeType),
    };
    onChange({ ...obj });
  }, [nowgoodsRangeType]);
  
  return (
  <!--组件html代码-->
    <div className={styles.box}>
     <Radio.Group value={nowgoodsRangeType} onChange={value => setgoodsRangeType(value)}>
            <Radio name="1">
              <div className={styles.radioinfobox}>
                <div className={styles.title12}>全部商品参加</div>
                <div className={styles.tit11}>新增的商品自动参加</div>
              </div>
            </Radio>
            <Radio name="2">
              <div className={styles.radioinfobox}>
                <div className={styles.title12}>指定商品参加</div>
                <div className={styles.tit11}>新增商品不参加，只有选择商品参加</div>
              </div>
            </Radio>
            <Radio name="3">
              <div className={styles.radioinfobox}>
                <div className={styles.title12}>指定商品不参加</div>
                <div className={styles.tit11}>新增商品自动参加，只有选择商品不参加</div>
              </div>
            </Radio>
          </Radio.Group>
    </div>
  );
});

export default ConquerIGoods;


<!--外部组件使用-->

import React, { useState, useEffect } from 'react';
import styles from './index.less';
import ConquerGoods from './components/conquergoods';

 interface GoodsProps {
  goodsRangeType: number;
  onChange: Function;
}

 // 活动商品相关逻辑
  const [curGood, setCurGoods] = useState<any>({
    goodsRangeType: 1,
  });
  const [curGoodIds, setCurGoodIds] = useState<Array<number>>([]);
  let goodObj = {
    goodsRangeType: '1',
    onChange: (item: any) => {
    <!--此处输出组件传出的值-->
     console.log(item);
    },
  };
  const [goodsprops, setGoodsProps] = useState<GoodsProps>(goodObj);
  
  return (
          <div className={styles.body}>
             <ConquerGoods {...goodsprops} />
          </div>
  );

差不多就是这样了，感觉似乎很简单；

• 通过Ts定义好传入的props的类型，不想用TS也可以不用,在子组件内直接从porps里面获取相应的值，React.memo()帮助组件仅在它的 props 发生改变的时候进行重新渲染。；
• 父子组件通信可以使用父组件预先定义并传入的onChange事件，该操作和vue的$emit方法以及小程序的triggerEvent差不多但是感觉使用比vue和小程序更简单