一、State

步骤

  1. 导入useState
  1. import React, {useState} from "react"
  1. 声明State
  1. let [value, setValue] = useState(0)

数组第一个参数为使用的值，第二个参数为设置值的函数。useState的参数为默认值。

  1. 使用值
  1. <div>
  2.     <span>{value}</span>
  3. </div>
  1. 设置值、
  1. setValue(value + 1)

参数即为对值得变更操作

代码示例

  1. import React, { useState } from "react";
  3. function App() {
  4.     let [value, setValue] = useState(0);
  5.     const add1 = () => {
  6.         setValue(value + 1);
  7.     };
  8.     return (
  9.         <div>
  10.             <span>{value}</span>
  11.             <button onClick={add1}>+1</button>
  12.         </div>
  13.     );
  14. }
  15. export default App;

二、useReducer

步骤

  1. 导入useReducer
  1. import { useReducer } from "react"
  1. 创建初始值
  1. const initial = {
  2.     n: 0
  3. }
  1. 创建所有操作类型
  1. const reducer = (state, action) => {
  2.     if (action.type === "add") {
  3.         return { n: state.n + action.number }
  4.     } else if (action.type === 'multi') {
  5.         return { n: state.n - action.number }
  6.     } else {
  7.         throw new Error("未知类型")
  8.     }
  9. }
  1. 使用useReducer，获得读写操作
  1. const [state, dispatch] = useReducer(action, initial)

读

  1. <div>{state.n}</div>

写

  1. dispath(type: "add", numer: 1 )

代码示例

  1. import React from "react"
  2. import { useReducer } from "react"
  4. const initial = {
  5.     n: 0
  6. }
  8. const reducer = (state, action) => {
  9.     if (action.type === 'add') {
  10.         return { n: state.n + action.number }
  11.     } else if (action.type = "multi") {
  12.         return { n: state.n - action.number }
  13.     } else {
  14.         throw new Error("未知类型")
  15.     }
  16. }
  18. const DemoUseReducer = () => {
  19.     const [state, dispatch] = useReducer(reducer, initial)
  20.     const add = () => {
  21.         dispatch({ type: "add", number: 1 })
  22.     }
  23.     return (
  24.         <>
  25.             <div>{state.n}</div>
  26.             <button onClick={add}>+1</button>
  27.             <button onClick={() => dispatch({ type: "multi", number: 3 })}>-3</button>
  28.         </>
  29.     )
  30. }
  32. export default DemoUseReducer

三、useContext

步骤

  1. 导入createContext、useContext
  1. import React, { useState, createContext, useContext } from "react"
  1. 创建Context
  1. const Context = createContext(null)
  1. 设置作用域，传递你需要使用的数据
  1. return (
  2.     <Context.Provider value={{n, setN}}>
  3.         <Father/>
  4.         <Son/>
  5.     </Context.Provider>
  6. )
  1. 在作用域中的组件解构传递的数据

Father

  1. const {n, setN} = useContext(Context)
  1. 使用解构出来的数据

Father

  1. <button onClick={()=>setN(n=>n+1)}>+1</button>

代码示例

  1. import React, { useState, createContext, useContext } from "react"
  3. const Context = createContext(null)
  5. const DemoUseContext = () => {
  6.     const [n, setN] = useState(0)
  7.     return (
  8.         <Context.Provider value={{ n, setN }}>
  9.             <Father />
  10.             <Son />
  11.         </Context.Provider>
  12.     )
  13. }
  15. const Father = () => {
  16.     const { n, setN } = useContext(Context)
  17.     return (
  18.         <>
  19.             <div>我是爸爸{n}</div>
  20.             <button onClick={() => setN(n => n + 1)}>爸爸按钮+1</button>
  21.         </>
  22.     )
  23. }
  25. const Son = () => {
  26.     const { n, setN } = useContext(Context)
  27.     return (
  28.         <>
  29.             <div>我是儿子{n}</div>
  30.             <button onClick={() => setN(n => n - 1)}>儿子按钮-1</button>
  31.         </>
  32.     )
  33. }
  35. export default DemoUseContext

四、useEffect和useLayoutEffect

步骤

  1. 导入
  1. import { useEffect, useLayoutEffect } from "react"
  1. 每次都执行
  1. useEffect(()=>{})
  1. 第一次渲染执行
  1. useEffect(()=>{},[])
  1. 在某个值变化的时候执行
  1. useEffect(()=>{},[n])
  1. 在页面渲染前执行
  1. useLayoutEffect(()=>{})

代码示例

  1. import React, {useState, useEffect, useLayoutEffect} from "react"
  3. const DemoUseEffect = () => {
  4.   const [display, setDisplay] = useState(true)
  5.   const [n, setN] = useState(0)
  6.   useEffect(() => {
  7.     console.log("我每次都执行")
  8.   })
  9.   useEffect(() => {
  10.     console.log("我只在第一次执行")
  11.     return () => {
  12.       console.log("我只在销毁的时候执行")
  13.     }
  14.   }, [])
  15.   useEffect(() => {
  16.     console.log("我只在n变化执行")
  17.   }, [n])
  18.   useLayoutEffect(() => {
  19.     console.log("我是在页面渲染前就执行结束")
  20.   })
  21.   return (
  22.     <>
  23.       {display ? <div>{n}</div> : null}
  24.       <button onClick={() => setN(n => n + 5)}>+5</button>
  25.       <button onClick={() => {
  26.         setDisplay(display => !display)
  27.       }}>消灭n
  28.       </button>
  29.     </>
  30.   )
  31. }
  33. export default DemoUseEffect

五、memo&useMemo&useCallback

步骤

  1. 导入
  1. import React, {useMemo, useState, memo, useEffect, useCallback} from "react"
  1. memo包住不需要重新渲染的组件函数
  1. const Childer = memo((props) => {
  2.   console.log("我是孩子，我不想执行")
  3.   return (
  4.     <>
  5.       <div>我是孩子 {props.childer}</div>
  6.     </>
  7.   )
  8. })
  1. useMemo包住防止因对象地址变化而导致的误渲染
  1. const childClick = useMemo(() => {
  2.   return () => {
  3.   }
  4. }, [childer])

代码示例

  1. import React, {useMemo, useState, memo, useEffect, useCallback} from "react"
  3. const DemoUseMemoAndUseCallback = () => {
  4.   const [n, setN] = useState(0)
  5.   const [childer, setChilder] = useState(0)
  6.   useEffect(() => {
  7.     console.log("我变化了")
  8.   }, [n])
  9.   // 使用useMemo阻止因为对象地址变化而重新执行
  10.   const childClick = useMemo(() => {
  11.     return () => {
  12.     }
  13.   }, [childer])
  14.   // 等同于useMemo，比useMemo简单
  15.   const childClick2 = useCallback(() => {
  16.   })
  17.   return (
  18.     <>
  19.       <div>{n}</div>
  20.       <Childer childer={childer} childClick={childClick} childClick2={childClick2}/>
  21.       <button onClick={() => setN(n => n + 10)}>+10</button>
  22.     </>
  23.   )
  24. }
  26. // 使用memo阻止子组件state没改变，因父组件属性改变而重新渲染
  27. const Childer = memo((props) => {
  28.   console.log("我是孩子，我不想执行")
  29.   return (
  30.     <>
  31.       <div>我是孩子 {props.childer}</div>
  32.     </>
  33.   )
  34. })
  36. export default DemoUseMemoAndUseCallback

六、useRef

步骤

  1. 导入
  1. import { useRef } from "react"
  1. 声明变量
  1. const count = useRef(0)
  1. 使用/修改值
  1. count.current += 1

代码示例

  1. import React, {useEffect, useRef, useState} from "react"
  3. const DemoUseRef = () => {
  4.   const count = useRef(0)
  5.   const [n, setN] = useState(0)
  6.   useEffect(() => {
  7.     count.current += 1
  8.     console.log("第" + count.current + "执行")
  9.   })
  10.   return (
  11.     <>
  12.       <div>{n}</div>
  13.       <button onClick={() => setN(n => n + 1)}>n+1</button>
  14.     </>
  15.   )
  16. }
  18. export default DemoUseRef

七、useImperativeHandle

步骤

  1. 导入
  1. import { useImperativeHandle } from "react"
  1. 在父组件创建ref
  1. const buttonRef = useRef()
  1. 传递给子组件
  1. <button ref={buttonRef}>按钮</button>
  1. 子组件接收并对ref进行修改后返还出去
  1. useImperativeHandle(ref, ()=>{
  2.     return {
  3.         x: ()=>console.log(1)
  4.     }
  5. })

代码示例

  1. import React, {forwardRef, useRef, useEffect, useImperativeHandle} from "react"
  3. const DemoImperativeHandle = () => {
  4.   const buttonRef = useRef()
  5.   useEffect(() => {
  6.     console.log(buttonRef)
  7.   })
  8.   return (<>
  9.     <Son ref={buttonRef} onClick={() => console.log(buttonRef.current.x())}>按钮</Son>
  10.   </>)
  11. }
  13. const Son = forwardRef((props, ref) => {
  14.   const realRef = useRef()
  15.   useImperativeHandle(ref, () => {
  16.     return {
  17.       x: () => {
  18.         console.log(1)
  19.       },
  20.       ref: realRef
  21.     }
  22.   })
  23.   return (<>
  24.     <button ref={realRef} {...props}/>
  25.   </>)
  26. })
  28. export default DemoImperativeHandle

八、forwardRef

步骤

  1. 导入
  1. import { forwardRef, useRef } from "react"
  1. 创建ref
  1. const ref = useRef(null)
  1. 向组件传ref
  1. <ChildNode ref={ref}>按钮</ChildNode>
  1. 使用forwardRef接收ref
  1. const ChildNode = forwardRef((props, ref) => {
  2.   return (
  3.     <>
  4.       <button ref={ref} onClick={() => console.log(ref)}>{props.children}</button>
  5.     </>
  6.   )
  7. })

代码示例

  1. import React, {forwardRef, useRef} from "react"
  3. const DemoForwardRef = () => {
  4.   const ref = useRef(null)
  5.   return (
  6.     <>
  7.       <div>我是本身的元素</div>
  8.       <ChildNode ref={ref}>按钮</ChildNode>
  9.     </>
  10.   )
  11. }
  13. const ChildNode = forwardRef((props, ref) => {
  14.   return (
  15.     <>
  16.       <button ref={ref} onClick={() => console.log(ref)}>{props.children}</button>
  17.     </>
  18.   )
  19. })
  21. export default DemoForwardRef

拓展一、useContext&useReducer代替Redux

步骤

  1. 创建Store数据仓库
  1. cosnt store = {user: null, books: null, movies}
  1. 创建reducer行为操作列表
  1. const reducer = (state, action) => {
  2.   switch (action.type) {
  3.     case "setUser":
  4.       return {...state, user: action.user}
  5.     case "setBooks":
  6.       return {...state, books: action.books}
  7.     case "setMovies":
  8.       return {...state, movies: action.movies}
  9.     default:
  10.       throw new Error("位置类型")
  11.   }
  12. }
  1. 创建Context
  1. const Context = createContext(null)
  1. 创建读写的API
  1. const [state, dispatch] = useReducer(reducer, store)
  1. 定义作用域
  1. <Context.Provider value={{state, dispatch}}>
  2.   <User/>
  3.   <Books/>
  4.   <Movies/>
  5. </Context.Provider>
  1. 使用传递的数据
  1. const {state, dispatch} = useContext(Context)
  1. 对数据进行操作

读

  1. <div>{state.user.name}</div>

写

  1. dispatch({type: "setUser", user: 数据})

代码示例

  1. import React, {useContext, useEffect, useReducer, createContext} from "react"
  3. // 数据仓库
  4. const store = {
  5.   user: null,
  6.   books: null,
  7.   movies: null
  8. }
  10. // 行为类型
  11. const reducer = (state, action) => {
  12.   switch (action.type) {
  13.     case "setUser":
  14.       return {...state, user: action.user}
  15.     case "setBooks":
  16.       return {...state, books: action.books}
  17.     case "setMovies":
  18.       return {...state, movies: action.movies}
  19.     default:
  20.       throw new Error("位置类型")
  21.   }
  22. }
  24. // 创建Context
  25. const Context = createContext(null)
  27. const DemoContextReducer = () => {
  28.   // 创建数据读写的API
  29.   const [state, dispatch] = useReducer(reducer, store)
  30.   return (
  31.     <Context.Provider value={{state, dispatch}}>
  32.       <User/>
  33.       <Books/>
  34.       <Movies/>
  35.     </Context.Provider>
  36.   )
  37. }
  39. const User = () => {
  40.   const {state, dispatch} = useContext(Context)
  41.   useEffect(() => {
  42.     ajax("/user").then(user => {
  43.       dispatch({type: "setUser", user})
  44.       console.log(user)
  45.     })
  46.   }, [])
  47.   return (
  48.     <>
  49.       <h3>姓名</h3>
  50.       {state.user ? <div>{state.user.name}</div> : null}
  51.     </>
  52.   )
  53. }
  54. const Books = () => {
  55.   const {state, dispatch} = useContext(Context)
  56.   useEffect(() => {
  57.     ajax("/books").then(books => {
  58.       dispatch({type: "setBooks", books})
  59.     })
  60.   }, [])
  61.   return (
  62.     <>
  63.       <h3>书籍</h3>
  64.       {state.books ? state.books.map(book => (<div key={book.id}>{book.name}</div>)) : null}
  65.     </>
  66.   )
  67. }
  68. const Movies = () => {
  69.   const {state, dispatch} = useContext(Context)
  70.   useEffect(() => {
  71.     ajax("/movies").then(movies => {
  72.       dispatch({type: "setMovies", movies: movies})
  73.     })
  74.   }, [])
  75.   return (
  76.     <div>
  77.       <h3>电影</h3>
  78.       {state.movies ? state.movies.map(item => <div key={item.id}>{item.name}</div>) : null}
  79.     </div>
  80.   )
  81. }
  83. export default DemoContextReducer
  85. // 模拟请求数据
  86. function ajax(path) {
  87.   return new Promise((resolve, reject) => {
  88.     setTimeout(() => {
  89.       if (path === "/user") {
  90.         resolve({
  91.           id: 1,
  92.           name: "梁又文"
  93.         })
  94.       } else if (path === "/books") {
  95.         resolve([{
  96.           id: 1,
  97.           name: "我是一本好书"
  98.         }, {
  99.           id: 2,
  100.           name: "我是一本坏书"
  101.         }])
  102.       } else if (path === "/movies") {
  103.         resolve([{
  104.           id: 1,
  105.           name: "最时间的尽头"
  106.         }, {
  107.           id: 2,
  108.           name: "八百"
  109.         }])
  110.       }
  111.     }, 3000)
  112.   })
  113. }

拓展二、自定义hook

代码示例

useList

  1. import {useState} from "react"
  3. const useList = () => {
  4.   const [list, setList] = useState(0)
  5.   return ({
  6.     list: list,
  7.     setList: setList
  8.   })
  9. }
  11. export default useList

DemoCustomHook

  1. import React from "react"
  2. import useList from "./hooks/useList"
  4. const DemoCustomHook = () => {
  5.   const {list, setList} = useList()
  6.   return (
  7.     <>
  8.       <div>{list}</div>
  9.       <button onClick={() => setList(n => n + 10)}>+10</button>
  10.     </>
  11.   )
  12. }
  14. export default DemoCustomHook