react hook使用简介

1，useState—状态更改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, {useState} from 'react';
function State(){
  //初始化state
  const [count, setcount] = useState(0) //初始化state
  return <>
    <div>count: {count}</div>
    <button onClick={()=>{
      setcount(count+1)//修改state
    }}>Click +1</button>
  </>
}

function App() {
  return (
    <div className="App">
      <State></State>
    </div>
  );
}

export default App;

2，useEffect—监听变化

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
33
34
35
36
37
38
39
40
import React, {useState, useEffect} from 'react';
function State(){
  const [count, setcount] = useState(0)
  const [num, setnum] = useState(10)

  //只要state有变化就执行
  useEffect(()=>{
    console.log('effect A',count)
  })

  //只在第一次创建时候执行
  useEffect(()=>{
    console.log("effect B")
  },[])

  //监听count状态变换时候执行
  useEffect(()=>{
    console.log("effect C")
  },[count]);

  return <>
    <div>count: {count}, num:{num}</div>
    <button onClick={()=>{
      setcount(count+1)
    }}>Click +1</button>
    <button onClick={()=>{
      setnum(num+1)
    }}>Change Num</button>
  </>
}

function App() {
  return (
    <div className="App">
      <State></State>
    </div>
  );
}

export default App;

3,useRef —dom操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, {useState, useRef} from 'react';
function State(){
  const [count, setcount] = useState(0)
  const inputRef = useRef();
  return <>
    <div>count: {count}</div>
    <input ref={inputRef} onChange={
      ()=>{
        setcount(inputRef.current.value)
      }
    }></input>
  </>
}

function App() {
  return (
    <div className="App">
      <State></State>
    </div>
  );
}

export default App;

4，useContext—组件间数据传递

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
import React, {useState,useContext, createContext} from 'react';

let Ctx = createContext();
function Child(){
  let count = useContext(Ctx);
  return (<>
    <div>Count: {count}</div>
  </>)
}

function App() {
  const [count, setCount] = useState(1);
  return (
    <div className="App">
      <Ctx.Provider value={count}>
        <Child></Child>
      </Ctx.Provider>
      <button onClick={()=>{
        setCount(count+1)
      }}>Count + 1</button>
    </div>
  );
}

export default App;

5，useMemo

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
33
34
35
36
import React, {useState,useMemo} from 'react';

function Child(props){
  const res = useMemo(()=>{
    console.log(props)
    return {...props}
  },[props.name]) 
  return <>
    <div>Name: {res.name} , age:{res.age}</div>
  </>
}
function Father(){
  const [name, setName] = useState("zhangsan")
  const [age, setAge] = useState(20)
  return (<>
    <div>Fahter: {name},{age}</div>
    <Child name={name} age={age}></Child>
    <button onClick={()=>{
      setName(name +"-change")
    }}>Change Name</button>
    <button onClick={()=>{
      setAge(age+1)
    }}>Age + 1</button>
  </>)
}

function App() {
  return (
    <div className="App">
      <Father>
      </Father>
    </div>
  );
}

export default App;

6，useCallback

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
import React, {useState,useCallback} from 'react';

function Father(){
  const [count, setCount] = useState(20)
  const callbackCount = useCallback(
    () => {
      console.log("useCallback")
      return count
    },
    [count] //count 发送变化才更新
  )
  return (<>
    <div>状态    count:{count}</div>
    <div>callback   count:{callbackCount()}</div>
    <button onClick={()=>{
      setCount(count + 1)
    }}>count + 1</button>
  </>)
}

function App() {
  return (
    <div className="App">
      <Father>
      </Father>
    </div>
  );
}

export default App;

7，useImperativeHandle

  • forwardRef

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import React, {forwardRef,useRef} from 'react';

    const Forward = forwardRef((props,ref)=>{
      return <>
        <div ref={ref}>hello</div>
        <div>world</div>
      </>
    })

    function App() {
      const ref = useRef()
      return (
        <div className="App">
          <Forward ref={ref}></Forward>
          <button onClick={()=>{
            console.log(ref.current)
          }}>get ref</button>
        </div>
      );
    }

    export default App;

  • useImperativeHandler

    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
    33
    34
    35
    36
    37
    38
    import React, {useState,forwardRef,useRef,useImperativeHandle} from 'react';

    const Forward = forwardRef((props,ref)=>{

      const [count, setcount] = useState(1)
      const [num, setnum] = useState(10)
      useImperativeHandle(ref,()=>({
        name:'xiaoming' ,
        func:()=>{
          console.log('ha ha', num, count)
        }
      }),[count])
      return <>
        <div >count {count} </div>
        <div>num {num}</div>
        <button onClick={()=>{
          setcount(count+1)
        }}>count+1</button>
        <button onClick={()=>{
          setnum(num+1)
        }}>num+1</button>
      </>
    })

    function App() {
      const ref = useRef()
      return (
        <div className="App">
          <Forward ref={ref}></Forward>
          <button onClick={()=>{
            console.log(ref.current)
            ref.current.func();
          }}>get ref</button>
        </div>
      );
    }

    export default App;

8，useLayoutEffect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, {useEffect, useLayoutEffect} from 'react';

function App() {
  useEffect(()=>{
    console.log('useEffect')
    return ()=>{
      console.log('useEffect return')
    }
  })

  useLayoutEffect(()=>{
    console.log('useLayoutEffect')
    return ()=>{
      console.log("useLayoutEffect return")
    }
  })
  return (
    <div className="App">
    </div>
  );
}

export default App;

9，自定义hook，必须以use开头，并且可以使用useState useEffect … 来封装

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
//自定义hook ----自加2 

import React, { useState} from 'react';

//自定义 useAdd hook
const useAdd = (val, num)=>{ 
  const [count, setCount] = useState(val)

  const add = ()=>{
    setCount(count + num)
  }

  return {count, add}
}

function App() {
  const {count, add} = useAdd(10,2)
  return (
    <div className="App">
      <div>count: {count}</div>
      <button onClick={()=>{
        add()
      }}> ADD +2</button>
    </div>
  );
}

export default App;

10，useReducer

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React, {useReducer} from 'react';

function Demo(){
  const reducer = (state,action)=>{
    switch(action.type){
      case 'name': 
        return {
          ...state,
          name:action.name,
        }
      case 'age':
        return {
          ...state,
          age:action.age,
        }
      default: return state
    }
  }
  const [state, dispatch] = useReducer(reducer,{name:'zhangsan',age:18})
  
  return <div>
    <div>name:{state.name}, age:{state.age}</div>
    <div>
      <button onClick={()=>{
        dispatch({
          type:'name',
          name: state.name + "-+-"
        })
      }}>setName</button>
      <button onClick={()=>{
        dispatch({
          type:'age',
          age: state.age + 1
        })
      }}>setAge</button>
    </div>
  </div>
}


function App() {
  return (
    <div className="App">
      <Demo></Demo>
    </div>
  );
}

export default App;

11, useReducer + useContext 实现类redux功能

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, {useReducer, createContext, useContext} from 'react';

const Ctx = createContext()

function Demo(props){
  const reducer = (state,action)=>{
    switch(action.type){
      case 'name': 
        return {
          ...state,
          name:action.name,
        }
      case 'age':
        return {
          ...state,
          age:action.age,
        }
      default: return state
    }
  }
  const [state, dispatch] = useReducer(reducer,{name:'zhangsan',age:18})
  
  return <Ctx.Provider value={{state,dispatch}}>
    {props.children}
  </Ctx.Provider>
}

function Name(){
  const {state,dispatch} = useContext(Ctx)
  return  <>
    <div>name:{state.name}, age:{state.age}</div>
    <div>
      <button onClick={()=>{
        dispatch({
          type:'name',
          name: state.name + "-+-"
        })
      }}>setName</button>
    </div>
  </>
}

function Age(){
  const {state,dispatch} = useContext(Ctx)
  return <>
    <div>name:{state.name}, age:{state.age}</div>
    <div>
      <button onClick={()=>{
        dispatch({
          type:'age',
          age: state.age + 1
        })
      }}>setAge</button>
    </div>
  </>
}


function App() {

  return (
    <div className="App">
      <Demo>
        <Name></Name>
        <Age></Age>
      </Demo>
    </div>
  );
}

export default App;