简单的react函数式组件，及其备注

给新手瞅瞅，和vue 大同小异 备注了具体的方式 前端万变不离其宗，都是在写js 加油吧，少年 `

import React, {useState, useRef, useEffect} from 'react';
import PropTypes from 'prop-types';


export default function indexComponents(props) {
  const {
    show = true,
    defaultExpand = true,
    title = '',
    content = '',
    icon = 'iconwenhao',
    backgroundColor = '#e6e6e6',
    ...restProps
  } = props;//传递的是基础类型数据则不具有响应式，需要通过父子传递数据来解决通信
  const userInfo = useRef() //双向绑定
  const [visible, setVisible] = useState(false); //状态管理
  const MouseOver = () => {
    setVisible(true);
  };
  const MouseOut = () => {
    setVisible(false);
  };
  useEffect(() => { //defaultExpand 或 content 改变触发
  }, [defaultExpand,content]);
  useEffect(() => {//首次渲染的时候触发
  }, []);
  useEffect(() => {//每次更新页面的时候触发
    return () => { //组件卸载的时候执行
      isMount.current = false;
    }

  });
  return ( //return里   {} 开启一个代码块
    <div className={setVisible ? classes.box : ''}
  style={{ width: '100%', height: '100%' }}
 onMouseOver={MouseOver} onMouseOut={MouseOut} {...restProps}>
      <i className={`iconfont ${icon}`}></i>
      {show && visible ? (
        <>
          <video src="" ref={userInfo}></video>
        </>
      ) : null}
{optionList.map((option, order) => {
  const optionValue = option.split('.')[0]; // 拆分选项前面的序号作为值，如A.答案，取A
  return (
    <div key={order} className="pl5 flex ai-c" style={{ height: '30px' }}>

    </div>
  );
})}
    </div>
  );
}

indexComponents.propTypes = { //定义父组件传值的类型
  /** 默认是否展开 */
  defaultExpand: PropTypes.bool,
  /** 自定义样式 */
  style: PropTypes.object,
  /** 标题 */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  /** 尾部自定义内容 */
  customElement: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  onChange: PropTypes.func, // change回调
};

indexComponents.defaultProps = {//定义父组件传值的默认值
  defaultExpand: true,
  style: {},
  title: '标题1'

  onChange: () => {},

};

`