由Vue转React的自学文档总结（三）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

前言

由vue3转学react，之前从未接触过react，自学了一遍感觉还好，容易上手。 期间的一些笔记，后续有更深的见解持续更新。

路由：react-router-dom

先下载react-router-dom@6依赖，在导入import { BrowserRouter, Routes, Route, Link } from 'react-router-dom' , 基本使用如下。BrowserRouter:包裹整个路由，一个react应用只需使用一次，还有个路由模式：hashRouter

<BrowserRouter>
  <Link to="/">index</Link>
  <p></p>
  <Link to="about">about</Link>
  <Routes>
    <Route path="/" element={<Index />}></Route>
    <Route path="about" element={<About />}></Route>
  </Routes>
</BrowserRouter>

编程式导航：replace设置为true表示不保留历史记录

import { useNavigate } from 'react-router' 
const navigage = useNavigate()
  const goAbout = () => {
    navigage('/about', { replace: true })
  }

<button onClick={goAbout}>跳转到关于我</button>

编程式导航传参方式：searchParams / params

//searchParams 传参：和取参
navigage('/about?id=0001', { replace: true })
let params = useSearchParams()
let id = params.get('id')

// params 传参：和取参
navigage('/about/id/0001', { replace: true })
let params = useParams()
let id = params.id

二级路由：如果要设置一级路由默认渲染的二级路由，可如下例所示

//给URL地址about后面添加nextRouter二级路由
//在About组件内引入Outlet，再设置<Outlet />出口即可
<Route path="about" element={<About />}>
  {/* 二级路由 */}
  <Route path="nextRouter" element={<NextRouter />}></Route>
  {/* 默认二级路由 */}
  <Route index element={<Board />}></Route>
  {/* 404页面 */}
  <Route path="*" element={<NotFound />}></Route>
</Route>

mobx

校验规则第三方插件: prop-type

标签传递 Boolean值需要按对象形式传递，如 isTrue= {false},而非isTrue= “false”

可以传递任何数据，包括函数，jsx

给组件添加内置属性或方法

//添加属性验证
Module.protoTypes={
	title:Name.string
    isTrue:flag.bool
}

添加校验规则：需要另外安装第三方插件npm install prop-type ,导入prop-types包，在组件名.propTypes={} 添加校验规则。

可检验的规则有：

• 常见类型array、bool、fun、number、obj、string
• 基本类型：element
• 必填项：isRequired
• 特定结构对象：shape({})

import Proptypes from 'prop-types'
//父组件调用
<Son list={9}>
//子组件
Son.propTypes={
   list:PropTypes.arr
}

一些小应用

获取输入框value值的几种方法

1. 通过在state 中定义变量，在输入框绑定value={this.state.component} ，和 onChange={this.changeInputValue} 事件,通过事件修改state的中变量。

  changeInputValue = (e) => {
    this.setState({
      component: e.target.value,
    })
  }

2. 通过ref拿到。先声明myRef = React.createRef()，在input标签内绑定ref={this.myRef}，最后通过this.myRef.current.value 拿到value值。

修改数组的某项状态

删除：直接filter过滤传过来的值不等于数组的值就好，或者根据索引 splice(index, 1)item项

this.setState({ list: this.state.list.filter((item) => item.id !== id) })  

修改：一般对整个数组map遍历到需要修改的项

list: this.state.list.map((item) => {
	if (item.id === id) {
		return {
			attitude: attitude === 1 ? 0 : 1,
		}
	} else {
		return item
	}
}),

最后

持续更新中... 后续会更个redux，毕竟在实际开发中是绕不开的。