在工作中无论是类组件还是 hook 组件都遇到过类似的问题,一些变量在组件文件中但在组件之外，这些变量的作用域是什么样的?

如下：

hook 组件的 isSave 变量

let isSave = false
export default function SampleProTable(props:IProps){
  const {tableUUID} = props
  const [columnsStateMap,setColumnsStateMap]= useState({})
  const {prefixCls,rowKey,columnEmptyText,pagination,headerTitle,toolBarRender,size,loading=false} =props

  if(!tableUUID){
    console.error('tableUUID is required!!!')
  }
  useEffect(()=>{
    async function initData(tableUUID:string){
      const [err,config]  = await asyncErrorCatch(getTableColumnConfig(tableUUID))
      if(err){
        return
      }
      const {data} = config
      const {data:dataContent} = data
      const {fields} =dataContent
      const columnsStateMap = fields2ColumnsStateMap(fields)||{}
      if(columnsStateMap){
        isSave = false
        setColumnsStateMap(columnsStateMap)
      }
    }

    if(tableUUID){
      initData(tableUUID)
    }
    return ()=>{
      isSave = false
    }

  },[tableUUID])

  const debounceColumnsStateMap = useDebounce(columnsStateMap, 1000);

  useEffect(() => {
    if(!isSave) return
    saveTableColumnConfig(tableUUID,columnsStateMap2Fields(columnsStateMap))
  }, [debounceColumnsStateMap]);

  function onColumnsStateChange(columnsStateMap: IColumnsStateMap){
    isSave = true
    setColumnsStateMap(columnsStateMap)
  }

  return (
      <div className={`SampleProTable_container ${props.className}`}>
        <ProTable
          ...
        />
      </div>
  );
}

类组件的

const formFieldLayout = {
  labelCol: {
    xs: { span: 3 },
    sm: { span: 3 }
  },
  wrapperCol: {
    xs: { span: 16 },
    sm: { span: 16 }
  }
}

const formTableLayout = {
  labelCol: {
    xs: { span: 0 },
    sm: { span: 0 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 24 }
  }
}

let isEditPaper = false

const QuestionTypeName = ['单选', '多选', '判断', '填空', '简答']

/**
 * @desc 新建试卷
 */
class PaperEdit extends React.Component {
}