React知识点记录

React

React路由导航

基于浏览器的项目：react-router-dom
脱落浏览器的项目：react-navigation

//引入模块
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Login from './pages/Login'

const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login />
  },
  {
    path: "/*",
    element: <NotFount />
  },
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

React请求与响应

export const baseUrl = 'http://8.130.79.161:3001'
//登录(post)

//POST请求通用属性
let postOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}
export const userLogin = async function (username, password) {
  let url = baseUrl + '/admin/login'
  //POST请求必需的选项对象
  let options = {
    ...postOptions,
    body: `username=${username}&password=${password}`, //请求主体  
  }
  let res = await fetch(url, options)
  let data = await res.json()
  return data
}
//获取新闻详情(get)
export const newsDetail = async function (id) {
  let url = baseUrl + 'data/news_detail.php?nid=' + id
  let res = await fetch(url)
  let data = await res.json()
  return data
}

React跳转

实现页面跳转的两种方法

• 模版跳转｛ <Link to=" " ><Link/>｝
• 编程式跳转

React语法

• 内容绑定

{表达式}

• 属性绑定

{属性名={表达式}}

• 样式绑定

{style={{color:"red"}}}

• 事件绑定

onClick={表达式}

• 条件渲染

{判定表达式 && （JSX） }
{判定表达式 ? (JSX1) : (JSX2) }

• 列表渲染

{arr.map(e,i)=>{JSX}}

React如何获取输入框的内容

• 方案一：使用受控组件

Model :let{value,setValue} = userStart("")
View : <input onChange={e=>setValue(e,target.value)} />

情景一 只允许输入大写字母
value.toUpperCase()
情景二 只允许输入整数
value.parseInt()
情景三 不允许输入空格
value.trim()
情景四 输入长度不能超过6位
value.substring(0,6)

• 方案二：使用非受控组件

在这里插入代码片

React,Hook函数

• 状态钩子 {useState}
• 副作用钩子 {useEffect} ：为组件添加
• 元素引用钩子 {useRef}

React配置路由

旧版方法（React18之前）

main.js
import React from "react";
import ReactDOM from "react-dom/client";

import Router from "./router"
ReactDOM.createRoot(document.getElementById("root")!).render(
   <Router />
);

App.js
import { Outlet } from "react-router-dom";
function App(){
  return (
    <div className="App">
      <Link to={"/home"} >Home</Link>
      <Link to={"/about"}>About</Link>
      {/* 占位符，类似于窗口。用来展示自组件，像Vue的router-view */}
      <Outlet></Outlet>
    </div>
  )
}

router/index.js
import App from '../App'
import Home from '..//views/Home'
import About from '../views/About'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
// const baseRouter = ()=>{
//   return(
//     <BrowserRouter>
//     <Routes>
//       <Route path="/" element={<App />}>
//         <Route path="/" element={<Home />}>
//         </Route>
//         <Route path="/" element={<About />}>
//         </Route>
//       </Route>
//     </Routes>
//   </BrowserRouter>
//   )
// }
//以上代码简写:
const baseRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        {/* 重定向 */}
        <Route path="/" element={<Navigate to={"/home"} />}>
        </Route>
        <Route path="/about" element={<Home />}>
        </Route>
        <Route path="/home" element={<About />}>s
      </Route>
    </Routes>
  </BrowserRouter>
)
export default baseRouter

React组件传参

• 父传子 Porps Down

//父组件
function Parent(){
	let [newList] = useState([])
	return <Child list={newList}/>
 }
//子组件
function Child(props){
	clg(props.list)
 }

• 子传父 Porps Up

//父组件
function Parent(){
	function showPage(n){
		clg(n)
	}
	return <Child f2={showPage}/>
 }
//子组件
function Child(props){
	let num =3 
	props.f2(num) // 在子组件体内调用父组件的方法 ，实参是子组件的数据
 }

React解构路径路由名称

 let { pathname } = useLocation()//解构出路由地址中的路径名称