[React框架学习笔记]两天速成 React之第二天

写在前面

我们在第一天了解到了React的class组件，function组件
组件的传值方式(子传父，父传子)

• props子传父
• props父传子(将useState的修改函数传递下去)
• createContext和useContext上下文的方式传递

---

常用的两个hook：

• useState
• useEffect(控制生命周期，感觉比vue的watch，生命周期要简洁，方便)

---

今天继续学习React，让我们抓住最后一天的时间，一起来速成React吧！

受控组件和不受控组件

• React没有v-model这样的命令，我们要拿到值需要用到useState
• 受控组件和不受控组件只存在于表单元素

受控组件

• 所谓的受控组件就是表单元素的value需要通过state(或useState)定义

  const [val, setVal] = useState('asd')
  return (
    <div>
      <input type="text" value={val} onChange={(e) => { setVal(e.target.value) }} />
      <button onClick={() => console.log(val)}>获取input的值</button>
    </div>
  )

不受控组件

我们对比看一下两者的区别！！！
不受控组件意味着表单元素的value无法通过state获取，只能使用ref(或useRef)来获取

  const [val, setVal] = useState('asd')
  const element = useRef(null)
  return (
    <div>
      <h3>受控组件:</h3>
      <input type="text" value={val} onChange={(e) => { setVal(e.target.value) }} />
      <button onClick={() => console.log(val)}>获取input的值</button>
      <hr />
      <h3>不受控组件:</h3>
      <input type="text" ref={element} />
      <button onClick={() => console.log(element.current.value)}>获取input的值</button>
    </div>
  )

memo

• 父组件更新会引起子组件挂载
• memo的作用就是缓存组件不受父组件更新的影响

import React, { useState, memo } from 'react'
const Child = memo(() => {
  console.log(123);
  return <div>子组件</div>
})
export default function App11 () {
  const [num, setNum] = useState(1)
  return (
    <div>
      <h3>数字为:{num}</h3>
      <button onClick={() => setNum(num + 1)}>累加</button>
      <hr />
      <Child />
    </div>
  )
}

使用memo后，累加不再log123

子组件有逻辑处理需要结合useCallback使用

• useCallback加的数组为空，不检测更新，约等于等死
  • 1.setNum(newValue) 使用新值强行覆盖初始值
  • 2.setNum((num)=>num+1) 不断使用新值覆盖旧值

import React, { useState, memo, useCallback } from 'react'
const Child = memo((props) => {
  console.log(123);
  return <button onClick={() => props.doSth()}>累加</button>
})
export default function App11 () {
  const [num, setNum] = useState(1)
  // const doSth = useCallback(() => setNum(num + 1), [])
  const doSth = useCallback(() => {
    setNum(num => num + 1)
  }, [])
  return (
    <div>
      <h3>数字为:{num}</h3>
      <Child doSth={doSth} />
    </div>
  )
}

useMemo

函数中返回函数:高阶函数

  const doSth = useMemo(() => {
    return () => setNum(num => num + 1)
  }, [])

状态管理React-Redux

听说和vuex差不多，不知道会不会像pinia一样方便

• 安装命令npm i redux react-redux

仓库与reducer创建

在src下新建一个store文件夹

reducer.js

// 创建初始状态
const defaultState = {
  num: 1
}
// 导出一个函数
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = defaultState) => {
  return state
}

index.js

// 引入reducer
import reducer from './reducer'
// 创建仓库
import { createStore } from 'redux'
const store = createStore(reducer)
// 导入仓库
export default store

提供器与连接器

提供器

• provider 和上下文传值很像
• 在顶级组件套一个provider

import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
) 

连接器

• connect(state映射,dispatch映射)(当前组件名称)

import { connect } from 'react-redux'
function App12 (props) {
  return (
    <div>
      <h2>数字为:{props.num}</h2>
    </div>
  )
}
const mapStateToProps = (state) => {
  return {
    num: state.num
  }
}
export default connect(mapStateToProps)(App12)

状态映射

• 将reducer中的state映射成props，让开发者可以在组件中使用props.num去调用state中的num

dispatch映射

• 将reducer中的事件映射成props，让开发者可以在组件中使用props.add（）去实现num的累加
• 注意：可能点了数字变了，但是视图没变，可能返回的时候还没用变，返回的太快了，这个时候我们使用一个newstate来返回

---

• reducer.js

export default (state = defaultState, action) => {
  let newState = JSON.parse(JSON.stringify(state))
  if (action.type === 'addNum') {
    newState.num++
  }
  return newState
}

---

• App.jsx

function App12 (props) {
  return (
    <div>
      <h2>数字为:{props.num}</h2>
      <button onClick={() => props.add()}>累加</button>
    </div>
  )
}
const mapStateToProps = (state) => {
  return {
    num: state.num
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    add () {
      const action = { type: "addNum" }
      dispatch(action)
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App12)

---

• action传值

 const action = { type: "addNum", value: 2 } // action多指定参数
 newState.num += action.value                // 使用的时候直接action.访问

换成switch写法

  // if (action.type === 'addNum') {
  //   newState.num += action.value
  // }
  switch (action.type) {
    case "addNum":
      newState.num += action.value
      break
    default: break
  }

路由

• 安装yarn add react-router-dom@6或者npm install react-router-dom
• 其实yarn还是安全点快点

路由配置

在src下新建一个route/index.js文件
主要是三个函数

• BrowserRouter
• Routes
• Route

import App from '../App13'
import Home from '../pages/Home'
import List from '../pages/List'
import Detail from '../pages/Detail'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
/**
 * App>Home+List+Detail
 * react-router-dom 中有两种模式 : BrowserRouter(History模式)  HashRouter(Hash模式)
 */
// 定义一个路由
const BaseRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<App />}>
        <Route path='/home' element={<Home />}></Route>
        <Route path='/list' element={<List />}></Route>
        <Route path='/detail' element={<Detail />}></Route>
      </Route>
    </Routes>
  </BrowserRouter>
)
export default BaseRouter

路由显示

• 1.index.js文件中App的引用变成Route的引用import Router from './route/index'
• 2.在主路由中加入Outlet组件，并使用，这样可以显示子路由import { Outlet } from 'react-router-dom' <Outlet />

使用link跳转

• import { Outlet, Link } from 'react-router-dom'

      <ul>
        <li><Link to="/home">首页</Link></li>
        <li><Link to="/list">列表页</Link></li>
        <li><Link to="/detail">详情页</Link></li>
      </ul>

useLocation

• 得到当前路由的路径
• 是react-router-dom里面封装的一个hook

  const location = useLocation()
  console.log(location.pathname);

useNavigate

• 这个是比如我想用按钮来跳转就会使用这个hook

import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom'
const naviate = useNavigate()
<button onClick={() => naviate('/detail')}>跳转详情页</button>

useParams

• 拿到路由中参数的hook

<Route path='/list/:id' element={<List />}></Route>  // route/index.jsx
import { useParams } from 'react-router-dom'         // List.jsx
const { id } = useParams()                           // List.jsx

useSearchParams

• 路由中参数用?传递

<li><Link to="/home?id=456">首页</Link></li>         // App.jsx
import { useSearchParams } from 'react-router-dom'   // Home.jsx
const [searchParams] = useSearchParams()
console.log(searchParams.getAll('id')[0]);

通过useNavigate传递参数

• 后面还可以跟一个obj

  const naviate = useNavigate()
  const goDetail = () => {
    naviate("/detail", {
      state: { username: '张三' }
    })
  }

• 获取

 let location = useLocation()
 console.log(location.state ? location.state.username : "");