REACT学习--钩子剩余部门

useLayouEffect同步实行状态更新

useEffect()是在渲染被绘制到屏幕之后实行的，是异步的，useLayouEffect()是在渲染之后但是在屏幕更新之前，是同步的
大部门环境下我们采取useEffect()，性能更好，但是useEffect内里的操纵须要处置惩罚DOM，而且会改变页面的样式，就须要用useLayoutEffect，否则大概会出现闪屏题目

2. import { useEffect, useLayoutEffect, useReducer, useState } from "react";
4. function App(){
5.     const [msg,setMsg] = useState('hello App')
7.     useLayoutEffect(()=>{
8.         for(let i =0;i<100000;i++){
9.             setMsg('App hello')
10.         }
11.     })
12.     return (
13.         <div>
14.             {msg}
15.         </div>
16.     )
17. }
19. export default App

复制代码

 uselnsertionEffectDOM更新前触发

useInsertionEffect应用场景非常少，由于获取不到DOM元素，以是只在CSS-in-JS 库中才会利用
这是实行的序次：

2. import { useEffect,useLayoutEffect,useInsertionEffect } from "react"
4. function App(){
5.     //触发时机：3 2 1
6.     useEffect(()=>{
7.         console.log(1)
8.     })
9.     useLayoutEffect(()=>{
10.         console.log(2)
11.     })
12.     useInsertionEffect(()=>{
13.         console.log(3)
14.     })
16.     return (
17.         <div>
18.             hello App
19.         </div>
20.     )
21. }
22. export default App

复制代码

突然出bug了问一下deepseek

 这大唐笔

不祥的预感
起首 验证依赖安装状态

2. # 进入项目目录
3. cd /root/NewLife/vite-project
5. # 检查是否已安装 tailwindcss
6. ls node_modules | grep tailwindcss
8. # 如果没有输出结果，执行完整安装
9. npm uninstall tailwindcss postcss autoprefixer
10. npm install -D tailwindcss postcss autoprefixer@latest

复制代码

再逼迫重修设置文件

2. # 删除现有配置文件
3. rm -f tailwind.config.js postcss.config.js
5. # 重新初始化配置
6. npx tailwindcss init -p --full

复制代码

 我错了对不起

2. import { useEffect,useLayoutEffect,useInsertionEffect, useRef } from "react"
4. function App(){
5.     //触发时机：3 2 1
6.    const ref = useRef(null)
8.    useInsertionEffect(()=>{
9.     const style = document.createElement('style')
10.     style.innerHTML = `
11.     .box{
12.         background:red;
13.         width:100px;
14.         height:100px
15.     }
16.     `
17.     document.head.appendChild(style)
18.    })
19.     return (
20.         <div>
21.             hello App
22.             <div className="box" ref = {ref}>aaaa</div>
23.         </div>
24.     )
25. }
26. export default App

复制代码

Reducer同一的状态管理聚集

对于拥有很多状态更新逻辑的组件来说，过于分散的变乱大概会令人不知所措，对于这种环境，可以将组件全部状态更新逻辑整合到一个外部函数中，这个函数叫做reducer
Reducer是处置惩罚状态的另一种方式

2. import { useState } from 'react'
4. function App() {
5.   const [list, setList] = useState([
6.     { id: 1, text: 'aaa' },
7.     { id: 2, text: 'bbb' },
8.     { id: 3, text: 'ccc' },
9.   ])
10.   const handleAdd = () => {
11.     setList([...list, { id: 4, text: 'ddd' }])
12.   }
13.   const handleEdit = (id) => {
14.     setList(
15.       list.map((item) => {
16.         if (item.id === id) {
17.           return { ...item, text: 'new' + item.text }
18.         } else {
19.           return item
20.         }
21.       })
22.     )
23.   }
24.   const handleRemove = (id) => {
25.     setList(
26.       list.filter((item) => {
27.         if (item.id === id) {
28.           return false
29.         } else {
30.           return true
31.         }
32.       })
33.     )
34.   }
35.   return (
36.     <div>
37.       hello App
38.       <input type="text" />
39.       <button onClick={() => handleAdd()}>添加</button>
40.       <ul>
41.         {list.map((item) => {
42.             return(
43.           <li key={item.id}>
44.             {item.text}
45.             <button onClick={() => handleEdit(item.id)}>编辑</button>
46.             <button onClick={() => handleRemove(item.id)}>删除</button>
47.           </li>
48.             )
49.         })}
50.       </ul>
51.     </div>
52.   )
53. }
55. export default App

复制代码

这东西管理起来很贫困，以是最好会集管理

2. import { useReducer } from 'react'
4. //由着reducer函数完成外部逻辑的统一处理
5. function listReducer(state, action) {
6.   switch (action.type) {
7.     case 'add':
8.       return [...state, { id: 4, text: 'dddd' }]
9.     case 'edit':
10.       return state.map((item) => {
11.         if (item.id === action.id) {
12.           return { ...item, text: 'new' + item.text }
13.         } else {
14.           return item
15.         }
16.       })
17.     case 'remote':
18.       return state.filter((item) => {
19.         if (item.id === action.id) {
20.           return false
21.         } else {
22.           return true
23.         }})
25.   }
26. }
28. function App() {
29.   const [list, dispatch] = useReducer(listReducer, [
30.     { id: 1, text: 'aaa' },
31.     { id: 2, text: 'bbb' },
32.     { id: 3, text: 'ccc' },
33.   ])
35.   return (
36.     <div>
37.       hello App
38.       <input type="text" />
39.       <button onClick={() => dispatch({ type: 'add' })}>添加</button>
40.       <ul>
41.         {list.map((item) => {
42.           return (
43.             <li key={item.id}>
44.               {item.text}
45.               <button onClick={() => dispatch({ type: 'edit', id: item.id })}>
46.                 编辑
47.               </button>
48.               <button onClick={() => dispatch({ type: 'remote', id: item.id })}>
49.                 删除
50.               </button>
51.             </li>
52.           )
53.         })}
54.       </ul>
55.     </div>
56.   )
57. }
59. export default App

复制代码

reducer还提供了一个immer版本
现在来改造一下
useImmerReducer 是团结了 Immer 库和 React useReducer 的加强型 Hook，专为简化不可变状态更新而筹划。

2. import { useImmerReducer } from 'use-immer'
4. //由着reducer函数完成外部逻辑的统一处理
5. function listReducer(draft, action) {
6.   switch (action.type) {
7.     case 'add':
8.         draft.push({ id: 4, text: 'ddd' })
9.         break
10.     case 'edit':
11.       const value = draft.find((item)=>item.id === action.id)
12.       value.text = 'new' + value.text
13.       break
14.     case 'remote':
15.         const index = draft.findIndex((item)=>item.id === action.id)
16.         draft.splice(index,1)
17.         break
18.   }
19. }
21. function App() {
22.   const [list, dispatch] = useImmerReducer(listReducer, [
23.     { id: 1, text: 'aaa' },
24.     { id: 2, text: 'bbb' },
25.     { id: 3, text: 'ccc' },
26.   ])
28.   return (
29.     <div>
30.       hello App
31.       <input type="text" />
32.       <button onClick={() => dispatch({ type: 'add' })}>添加</button>
33.       <ul>
34.         {list.map((item) => {
35.           return (
36.             <li key={item.id}>
37.               {item.text}
38.               <button onClick={() => dispatch({ type: 'edit', id: item.id })}>
39.                 编辑
40.               </button>
41.               <button onClick={() => dispatch({ type: 'remote', id: item.id })}>
42.                 删除
43.               </button>
44.             </li>
45.           )
46.         })}
47.       </ul>
48.     </div>
49.   )
50. }
52. export default App

复制代码

Context向组件深层通报数据

通常来说会通过props将信息从父组件通报到子组件，但是如果必须通过很多中心组件向下通报props，大概在应用中的很多组件须要雷同的信息，通报props会变得非常的冗长和未便

3. function App(){
4.     return (
5.         <div>
6.             hello App
7.             <Head count={123}/>
8.         </div>
9.     )
10. }
12. function Head({count}){
13.     return(
14.         <div>
15.             hello Head
16.             <Title count={count}/>
17.         </div>
18.     )
19. }
20. function Title({count}){
21.     return (
22.         <div>
23.             hello Title,{count}
24.         </div>
25.     )
26. }
27. export default App

复制代码

Context允许父组件向其下层无论多深的任何组件提供信息，而无需通过props显式通报

2. import { createContext,useContext } from "react"
4. const Context = createContext()
5. function App(){
6.     return (
7.         <div>
8.             hello App
9.             <Context.Provider value={123}>
10.                 <Head/>
11.             </Context.Provider>
12.         </div>
13.     )
14. }
16. function Head({count}){
17.     return(
18.         <div>
19.             hello Head
20.             <Title count={count}/>
21.         </div>
22.     )
23. }
24. function Title({count}){
25.     const value = useContext(Context)
26.     return (
27.         <div>
28.             hello Title,{value}
29.         </div>
30.     )
31. }
32. export default App

复制代码

如许之后就是可以更方便的通报，如果要通报多个值就用数组大概对象
还可以添加默认值

2. import { createContext,useContext, useState } from "react"
4. const Context = createContext(0)
5. function App(){
6.     const [count,setCount] = useState(123)
7.     const handleClick=()=>{
8.         setCount(count+1)
9.     }
10.     return (
11.         <div>
12.             hello App
13.             <button onClick={handleClick}>点击</button>
14.             <Context.Provider value={count}>
15.                 <Head/>
16.             </Context.Provider>
17.         </div>
18.     )
19. }
21. function Head({count}){
22.     return(
23.         <div>
24.             hello Head
25.             <Title count={count}/>
26.         </div>
27.     )
28. }
29. function Title({count}){
30.     const value = useContext(Context)
31.     return (
32.         <div>
33.             hello Title,{value}
34.         </div>
35.     )
36. }
37. export default App

复制代码

Reducer共同Context实现共享状态管理

Reducer可以整合组件的状态更新逻辑，Context可以将信息深入通报给其他组件，可以组合利用他们共同管理一个复杂页面的状态（兄弟状态共享）
存在更复杂的状态管理，可以采取三套方案，Redux，Mobx，Zustand等
ListContent,jsx:

3. function ListContent(){
4.     return(
5.         <ul>
6.         {
7.             list.map((item)=> {
8.              return(
9.              <li key={item.id}>{item.text}
10.              <button onClick={()=>listDispatch({type:'edit',id:item.id})}>编辑</button>
11.              <button onClick={()=>listDispatch({type:'remove',id:item.id})}>删除</button>
12.              </li>
13.             )
14.         })}
15.     </ul>
16.     )
17. }
18. export default ListContent

复制代码

ListHead.jsx:

2. import { useContext } from 'react'
3. import {ListDispatchContext} from './ListProvider.jsx'
5. function ListHead(){
6.     const listDispatch = useContext(ListDispatchContext)
7.     return(
8.         <>
9.             <input type="text" /><button onClick={()=>listDispatch({type:'add'})}>添加</button>
10.         </>
11.     )
12. }
13. export default ListHead

复制代码

ListProvider.jsx:

3. import {useReducer,createContext} from 'react'
5. const ListContext = createContext()
6. const ListDispatchContext = createContext()
8. function listReducer(draft, action) {
9.     switch (action.type) {
10.       case 'add':
11.           draft.push({ id: 4, text: 'ddd' })
12.           break
13.       case 'edit':
14.         const value = draft.find((item)=>item.id === action.id)
15.         value.text = 'new' + value.text
16.         break
17.       case 'remote':
18.           const index = draft.findIndex((item)=>item.id === action.id)
19.           draft.splice(index,1)
20.           break
21.     }
22.   }
24. function ListProvider({children}){
25.     const [list,listDispatch] = useReducer(listReducer,[
26.         {id:1,text:'aaa'},
27.         {id:2,text:'bbb'},
28.         {id:3,text:'ccc'},
29.     ])
30.     return(
31.         <ListContext.Provider value={list}>
32.             <ListDispatchContext.Provider value={listDispatch}>
33.                 {children}
34.             </ListDispatchContext.Provider>
35.         </ListContext.Provider>
36.     )
37. }
39. export default ListProvider

复制代码

Reducer共同Context实现共享状态管理.jsx:

2. import ListContent from './ListContent'
3. import ListHead from './ListHead'
4. import ListProvider from './ListProvider'
6. function App() {
7.   return (
8.     <div>
9.       hello App
10.       <ListProvider>
11.         <ListHead />
12.         <ListContent />
13.       </ListProvider>
14.     </div>
15.   )
16. }
17. export default App

复制代码

reducer管理.jsx:

2. import { useImmerReducer } from 'use-immer'
4. //由着reducer函数完成外部逻辑的统一处理
5. function listReducer(draft, action) {
6.   switch (action.type) {
7.     case 'add':
8.         draft.push({ id: 4, text: 'ddd' })
9.         break
10.     case 'edit':
11.       const value = draft.find((item)=>item.id === action.id)
12.       value.text = 'new' + value.text
13.       break
14.     case 'remote':
15.         const index = draft.findIndex((item)=>item.id === action.id)
16.         draft.splice(index,1)
17.         break
18.   }
19. }
21. function App() {
22.   const [list, dispatch] = useImmerReducer(listReducer, [
23.     { id: 1, text: 'aaa' },
24.     { id: 2, text: 'bbb' },
25.     { id: 3, text: 'ccc' },
26.   ])
28.   return (
29.     <div>
30.       hello App
31.       <input type="text" />
32.       <button onClick={() => dispatch({ type: 'add' })}>添加</button>
33.       <ul>
34.         {list.map((item) => {
35.           return (
36.             <li key={item.id}>
37.               {item.text}
38.               <button onClick={() => dispatch({ type: 'edit', id: item.id })}>
39.                 编辑
40.               </button>
41.               <button onClick={() => dispatch({ type: 'remote', id: item.id })}>
42.                 删除
43.               </button>
44.             </li>
45.           )
46.         })}
47.       </ul>
48.     </div>
49.   )
50. }
52. export default App

复制代码

memo在props稳定环境下跳过重新渲染

2. import { useState } from "react"
4. function Head(){
5.     return(
6.         <div>
7.             hello Head,{Math.random()}
8.         </div>
9.     )
10. }
12. function App(){
13.     const [count,setCount] = useState(0)
14.     const handleClick = ()=>{
15.         setCount(count+1)
16.     }
17.     return(
18.         <div>
19.             hello App
20.             <button onClick={handleClick}>点击</button>
21.             <Head />
22.         </div>
23.     )
24. }
26. export default App

复制代码

子组件会重新渲染吗？
会的
memo是在props没改变的时间跳过渲染，就可以办理count都没变但是Head还在变的题目

2. import { useState,memo } from "react"
4. const Head = memo(function Head(){
5.     return(
6.         <div>
7.             hello Head,{Math.random()}
8.         </div>
9.     )
10. })
12. function App(){
13.     const [count,setCount] = useState(0)
14.     const handleClick = ()=>{
15.         setCount(count+1)
16.     }
17.     return(
18.         <div>
19.             hello App
20.             <button onClick={handleClick}>点击</button>
21.             <Head />
22.         </div>
23.     )
24. }
26. export default App

复制代码

useMemo对盘算效果举行缓存

2. import { useState } from "react";
3. import { memo } from "react";
5. const Head = memo(function Head(){
6.     return(
7.         <div>hello Head,{Math.random()}</div>
8.     )
9. })
11. function App(){
12.     const [count,setCount] = useState(0)
13.     const [msg,setMsg]=useState('hello react')
14.     const list = [msg.toLowerCase(),msg.toUpperCase()]
15.     const handleClick =()=>{
16.         setCount(count + 1)
17.     }
18.     return (
19.         <div>
20.             hello App
21.             <button onClick={handleClick}>点击</button>
22.             <Head list={list}/>
23.         </div>
24.     )
25. }
27. export default App

复制代码

这个照旧会发生改变的，由于地点差异，就算是一样的数组也改变了，他以为是差异的
我们如果想要不让它变
就可以用useMEmo

2. import { useMemo, useState } from "react";
3. import { memo } from "react";
5. const Head = memo(function Head(){
6.     return(
7.         <div>hello Head,{Math.random()}</div>
8.     )
9. })
11. function App(){
12.     const [count,setCount] = useState(0)
13.     const [msg,setMsg]=useState('hello react')
14.     const list = useMemo(()=>[msg.toLowerCase(),msg.toUpperCase()],[msg])
15.     const handleClick =()=>{
16.         setCount(count + 1)
17.     }
18.     return (
19.         <div>
20.             hello App
21.             <button onClick={handleClick}>点击</button>
22.             <Head list={list}/>
23.         </div>
24.     )
25. }
27. export default App

复制代码

useCallback对函数举行缓存

useMemo的一种特例写法

2. import { useMemo, useState } from "react";
3. import { memo } from "react";
5. const Head = memo(function Head(){
6.     return(
7.         <div>hello Head,{Math.random()}</div>
8.     )
9. })
11. function App(){
12.     const [count,setCount] = useState(0)
13.     const [msg,setMsg]=useState('hello react')
14.     // const fn=()=>{
15.     //     console.log(count+1)
16.     // }
17.     const fn = useMemo(()=>()=>{},[msg])
18.     const handleClick =()=>{
19.         setCount(count + 1)
20.     }
21.     return (
22.         <div>
23.             hello App
24.             <button onClick={handleClick}>点击</button>
25.             <Head fn={fn}/>
26.         </div>
27.     )
28. }
30. export default App

复制代码

如许利用回调函数也不会变，也可以引入useCallback

2. import { useMemo, useState,useCallback } from "react";
3. import { memo } from "react";
5. const Head = memo(function Head(){
6.     return(
7.         <div>hello Head,{Math.random()}</div>
8.     )
9. })
11. function App(){
12.     const [count,setCount] = useState(0)
13.     const [msg,setMsg]=useState('hello react')
14.     // const fn=()=>{
15.     //     console.log(count+1)
16.     // }
17.     const fn = useCallback(()=>{console.log(msg)},[msg])
18.     const handleClick =()=>{
19.         setCount(count + 1)
20.     }
21.     return (
22.         <div>
23.             hello App
24.             <button onClick={handleClick}>点击</button>
25.             <Head fn={fn}/>
26.         </div>
27.     )
28. }
30. export default App

复制代码

就写到这吧嘻嘻嘻嘻西邮元哲来了