react

路由

app.js进行定义

// npm i react-router-dom --save  路由需要下载 
import { BrowserRouter,Routes,Route,Outlet} from 'react-router-dom';  

// Outlet 导出路由组件的去往(用于多级路由)
export default function App() {
  return (
    <BrowserRouter>   // 路由模式
      <Routes>   //路由容器,在里面配置所有路由打开的页面
        <Route path='/' element={<Demo/>} />   //配置单个路由页面   属性: path指定路由地址  element指定路由组件
      </Routes>
    </BrowserRouter>
  )
}

路由的跳转及传参

//Link用于定义路由链接
//useNavigate 定义方法跳转路由
import { Link,useNavigate} from 'react-router-dom'; 

<p><Link to='/rout2?bool="true"' >路由跳转</Link></p>   

let Nav = useNavigate(); //点击跳转路由
<button onClick={()=>Nav('/rout2?bool="true"',{relative:true})} >路由跳转</button>


//接收参数
import {useSearchParams} from 'react-router-dom';
let [params] = useSearchParams();  //获取路由参数,固定写法
console.log(params.get('bool')); //需要get获取

index.js为文件总入口 app.js里定义路由导入index.js里

import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App/>,document.getElementById('root'))

函数式组建

函数式组建创建(rfc),状态管理及副作用及axios

export default function fn01() {
  let [value,setValue] = useState([]) //函数组建的状态管理 
  useEffect(()=>{
        axios({
            url:"https://bingjs.com:8001/Subject/GetAll",
            method:'get'
        }).then((n)=>{seValue(n.data)} )
    },[])
  return (
    <div>{value.map((it,i)=>{ return <p key={i} >{it.SubjectName}</p>})}</div>  //retun里只能有一个元素，其它元素有这个元素进行包裹
  )
}
//dom元素数组和对象可以直接渲染，不能直接渲染对象 避免报错状态管理直接定义请求的数据格式

组建通信

export default function fn02() {
  return (
    <div><Son info={{a1:"淼森润林"}} fn={v=>console.log(v)}  /></div>
  )
}
function Son(v){
    return(
        <div>
            <p>父传子:{v.info.a1}</p>  //通过属性传递
            <p>子传父: <i onClick={()=>v.fn('达芬奇')}/></p>  //通过属性传递方法进行调用
        </div>
    )
}

状态管理mobx

定义

// 安装mobx npm i mobx mobx-react-lite --save   下载的是两个包
import {makeAutoObservable} from 'mobx';
class store2{
  arr = {text1:'太阳花',text2:"小熊猫"} //定义数据
  constructor(){makeAutoObservable(this)}  // 状态更新
  xiugai=(v)=>this.arr.text1=v;  // 修改字符串
}
const Mobx = new store2;
export default Mobx;

使用

import {observer} from 'mobx-react-lite';
import Mobx from './03mobx状态管理';
function Zt2() {
  return (
    <div>
        <span>{Mobx.arr.text1}</span>   //使用数据
        <button onClick={Mobx.xiugai.bind(this,'淼森润林')}>修改状态</button>  //修改数据
    </div>
  )
}
export default observer(Zt2);  //observer实时监听变化

受控&非受控

受控绑定ref

let [aa,setAa] = useState("");
let myref = createRef();
<input ref={myref} />
<button onClick={()=>setAa(myref.current.value)} >获取数据</button>

非受控双向绑定

let [val2,setVal2] = useState('');
<p>显示:{val2}</p>
<input value={val2} onChange={(eve)=>{setVal2(eve.target.value)} }/>
//react用于获取输入框的值

JSX语法

{/* 插入变量 */}
 let name  = "张三";
 <p>name:{name}</p>
 
 {/* 列表渲染 */}
 let foods = ["西瓜","草莓","香蕉"];
 <ul>
      { foods.map( (r,i)=>{
           return <li key={i} >{r}</li>
       } ) }
 </ul>
 
 {/* 条件渲染 */}
 let bool = true;
 <h3>{ bool ?"true显示" :'flase不显示' }</h3>
 <h4>{ bool ?"德玛西亚" :null }</h4>
 
 {/* 绑定样式 */}
 let styll = {
      color:'blue',
      fontSize:"25px"
 }
 <div className='nnn'></div> {/*第一种 外引*/}
 <div style={{ background:'greenyellow',color:'red' }} >太阳花</div>  {/*第二种 行内样式*/}
 <div style={ styll } >德玛西亚</div>  {/*第三种 定义变量*/}

Ant裤