2021.11 React学习总结

react的了解

React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）

React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，
   这也是它为什么比传统数据绑定更简单。

常用的树形数据结构封装

  //对格式进行封装  async function getTreeData(datas) {    aa = datas      //变量赋值    console.log("树形总数居", datas)    let tree = datas.map((item, index) => {      return {        title: getItem(item),        key: item.id,        children: getChildren(item.children, index)      }    })    setMater(tree)  }

 function getItem(item) {    return (      <div>        <Text title={item.name}>{item.name}Text>        <Space style={{ float: "right" }}>          <EditTwoTone style={style} title='编辑' onClick={()=>{showEditDiff(item)}} />          <PlusSquareTwoTone style={style} title='添加' onClick={ ()=>{ showAddMenusec(item)  }} />          <Popconfirm            title="确定删除?"            okText="确定"            cancelText="取消"            onConfirm={() => confirm(item)}            onCancel={cancel}          >          <DeleteTwoTone style={style} title='删除' />          Popconfirm>          <UpCircleTwoTone style={style} onClick={() => { upward(item) }} title='上移' />          <DownCircleTwoTone style={style} onClick={() =>{ down(item) }} title='下移' />          <ApartmentOutlined            onClick={() => {              history.push( {pathname:"/manage/sys/oramange/bureau/bumen", state: item });            }}            style={{ color: "#4498ee", fontSize: "18px" }}            title='部门'          />          <TeamOutlined            onClick={() => {              history.push({pathname:"/manage/sys/oramange/bureau/renyuan", state: item });            }}            style={{ color: "#4498ee", fontSize: "18px" }}            title='人员'          />          <FlagTwoTone            onClick={() => {              history.push({pathname:"/manage/sys/oramange/bureau/jgsq", state: item });            }}            style={{ fontSize: "18px" }}            title='授权管理'          />        Space>      div>    )  }

 function getChildren(data, pid) {    let children = data.map((item, index) => {      return {        title: getItem(item),        key: item.id,        children:getChildrener(item.children, index)      }    })    console.log("子集children2", children)    return children;  }

useEffect useState 组合

请求储存实列

const [schoollist,setSchoolList] = useState([  ]);
useEffect(()=>{axios({      
url:proxy+"/web/fcjx/bas-school/findSchoolByArea",    
  method:"POST",      
data:{schoolid:"  "}).then((result)=>{  
   if(result.data.item && result.data.item.length ){          
       setSchoolList(result.data.item)      
     }     })},[ ])