1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useEffect如果第二个参数不写，相当于class中的componentDidMounted和componentDidUpdate

  1 2 3

  useEffect(() => { document.title = `You clicked ${count} times`; });

• 返回一个函数，相当于componentWillUnMounted

  1 2 3 4 5 6

  useEffect(() => { console.log(count) return ()=>{ console.log('离开') } })

• 第二个参数表示要根据哪些状态的改变而去重新渲染，如果为空数组，则无论什么状态改变都不会调用effect

  1 2 3 4 5 6

  useEffect(() => { console.log(count) return ()=>{ console.log('离开') } }，[])

• 数组中有哪些值，就会随着这些状态的改变而重新执行副作用

  1 2 3 4 5 6

  useEffect(() => { console.log(count) return ()=>{ console.log('离开') } },[count])//只有count变化了才会调用effect中的函数

useContext

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import React ,{useState,createContext,useContext} from 'react'
const CountContext = createContext({})//1
function Counter() {
  let {count} = useContext(CountContext)//3
  return <h2>{count}</h2>
}

function Context() {
  const [count,setCount] = useState(0)
  return(
    <div>
      <h1>{count}</h1>
      <button onClick={()=>{setCount(count+1)}}>点击	</button>
      <CountContext.Provider value={count}>//2如果初始值为对象，这里要写成对象的形式
        <Counter/>
      </CountContext.Provider>
    </div>
  )
}
export  default Context

• 父组件创建context

• 在父组件中包裹子组件

  1 2 3

  <CountContext.Provider value={count}> <Counter/> </CountContext.Provider>

• 子组件中使用useContext获取父组件中传递的数据

memo

useMemo

useCallback

https://blog.csdn.net/fedlover/article/details/103347989?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

记忆函数

useReducer

和useContxt结合可以实现redux的效果，但是不建议使用，使用useDispatch和useSlelector来使用redux

useRef

• 相当于class中的createRef()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React ,{useRef}from 'react'
function Ref() {
  const textRef= useRef(null)

  return(
    <div>
      <input type="text" ref={textRef}/>
      <button onClick={()=>{
        console.log(textRef.current.value)}}>点击</button>
    </div>
  )
}
export default Ref

useDispatch

• 用于结合redux使用

• 首先创建redux的store，action，reducer。并在外层容器包裹provider传递store

• 在需要使用dispatch发布action时

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  import React from 'react' import {useDispatch} from 'react-redux' import {createChangeColorAction} from "./redux/action"; function ChangeColor() { const dispatch = useDispatch() return ( <div> <button onClick={()=>{dispatch(createChangeColorAction('red'))}}>红色</button> <button onClick={()=>{dispatch(createChangeColorAction('blue'))}}>蓝色</button> </div> ) } export default ChangeColor

useSelector

• 需要使用store中的state时

  1 2 3 4 5 6 7 8 9 10 11 12

  import React, {createContext} from 'react' import {useSelector} from "react-redux"; export const ColorContext = createContext({}) export const Color = (props) => { const color = useSelector(state=>state.color) return ( <ColorContext.Provider value={{color}}> {props.children} </ColorContext.Provider> ) }

自定义hooks

• 动态获取浏览器窗口大小的hooks

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import React,{useState,useEffect,useCallback} from 'react'


function useWinSize() {
  const [width,setWidth] = useState(document.body.clientWidth)
  const [height,setHeight] = useState(document.body.clientWidth)

  const reSize=useCallback(()=> {
    setWidth(document.body.clientWidth)
    setHeight(document.body.clientHeight)
  },[])

  useEffect(()=>{
    window.addEventListener('resize',reSize)
    return ()=>{
      window.removeEventListener('resize',reSize)
    }
  },[])

  return ({width,height})
}

export default function UseWinSize() {
  const {width,height} = useWinSize()
  return(
    <div>
      <h1>{width}</h1>
      <h1>{height}</h1>
    </div>

  )
}

• useDebounce：修改value的更新频率

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  export const useDebounce = (value, delay) => { const [newValue, setNewValue] = useState(value) useEffect(() => { //每次在value变化以后，设置一个定时器 const timer = setTimeout(() => { setNewValue(value) }, 2000) //每次在上一个useEffect处理完以后再运行，第一个effect的timer被第二个effect清理，最后一个无人清理 return () => { clearTimeout(timer) } }, [value, delay]) return newValue }

  使用

  1 2 3 4 5 6 7 8 9

  const debounceParam= useDebounce(param,1000) //当用户输入关键词或选择select框，param变化 useEffect(() => { fetch(`http://localhost:3000/projects?${qs.stringify(cleanObject(debounceParam))}`).then(async response => { if (response.ok) { setList(await response.json()) } }) }, [debounceParam])