React Hooks คืออะไร? + มาลองหัดใช้กันดีกว่า

1
import React, { Component } from 'react'
2
class ExampleHook extends Component {
3
  constructor(props) {
4
    super(props)
5
    this.state = {
6
      count: 0
7
    }
8
  }
9

10
  componentDidMount() {
11
    // fetch some data
12
    fetchData()
13
  }
14

15
  handleClick = () => {
16
    this.setState((state) => ({
17
      count: state.count + 1
18
    }))
19
  }
20

21
  render() {
22
    const { count } = this.state
23
    return (
24
      <div>
25
        <p>You clicked {count} times</p>
26
        <button onClick={this.handleClick}>Click me</button>
27
      </div>
28
    )
29
  }
30
}

1
import React, { useState } from 'react'
2
function ExampleHook() {
3
  const [count, setCount] = useState(0)
4

5
  render() {
6
    return (
7
      <div>
8
        <p>You clicked {count} times</p>
9
        <button onClick={() => setCount(count + 1)}>
10
          Click me
11
        </button>
12
      </div>
13
    );
14
  }
15
}

1
function ExampleWithManyStates() {
2
  // Declare multiple state variables!
3
  const [age, setAge] = useState(42)
4
  const [fruit, setFruit] = useState('banana')
5
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }])
6
  // ...
7
}

1
import { useState, useEffect } from 'react'
2

3
function Example() {
4
  const [count, setCount] = useState(0)
5

6
  useEffect(() => {
7
    document.title = `You clicked ${count} times`
8
  })
9

10
  return (
11
    <div>
12
      <p>You clicked {count} times</p>
13
      <button onClick={() => setCount(count + 1)}>Click me</button>
14
    </div>
15
  )
16
}

1
"dependencies": {
2
  "react": "^16.7.0-alpha.2",
3
  "react-dom": "^16.7.0-alpha.2",
4
  "react-scripts": "2.1.1"
5
}

1
yarn install

1
import React, { useState } from 'react'
2
import logo from './logo.svg'
3
import './App.css'
4

5
const App = () => {
6
  const [count, setCount] = useState(0)
7

8
  return (
9
    <div className="App">
10
      <header className="App-header">
11
        <img src={logo} className="App-logo" alt="logo" />
12
        <p>
13
          Edit <code>src/App.js</code> and save to reload.
14
        </p>
15

16
        <p>You click {count} times</p>
17
        <button
18
          style={{
19
            padding: '8px 16px',
20
            borderRadius: 4,
21
            fontSize: '1.25rem'
22
          }}
23
          onClick={() => setCount(count + 1)}
24
        >
25
          Click me
26
        </button>
27
      </header>
28
    </div>
29
  )
30
}
31

32
export default App

1
const [cat, setCat] = useState({})
2

3
const randomCat = () => axios.get('https://aws.random.cat/meow')
4

5
useEffect(() => {
6
  randomCat().then((response) => {
7
    setCat(response.data)
8
  })
9
})
10

11
// ใส่ log เพื่อดูว่ามัน render ยังไง
12
console.log('render >>>')
13

14
return (
15
  <div className="App">
16
    <header className="App-header">
17
      <img src={logo} className="App-logo" alt="logo" />
18
      <p>
19
        Edit <code>src/App.js</code> and save to reload.
20
      </p>
21

22
      <p>You click {state.count} times</p>
23

24
      <button
25
        style={{
26
          padding: '8px 16px',
27
          borderRadius: 4,
28
          fontSize: '1.25rem'
29
        }}
30
        onClick={() => {
31
          dispatch({
32
            type: 'COUNTER_CLICK',
33
            payload: state.count + 1
34
          })
35
        }}
36
      >
37
        Click me
38
      </button>
39

40
      <p>
41
        <img src={state.cat.file} alt="Cat" width="256" />
42
      </p>
43
    </header>
44
  </div>
45
)

1
const fn = () => {
2
  randomCat().then()
3
}
4

5
useEffect(fn, [])

1
import React, { useState, useEffect } from 'react'
2
import axios from 'axios'
3
import logo from './logo.svg'
4
import './App.css'
5

6
const randomCat = () => axios.get('https://aws.random.cat/meow')
7

8
const App = () => {
9
  const [count, setCount] = useState(0)
10
  const [cat, setCat] = useState({})
11

12
  useEffect(() => {
13
    randomCat().then((response) => {
14
      setCat(response.data)
15
    })
16
  }, [])
17

18
  return (
19
    <div className="App">
20
      <header className="App-header">
21
        <img src={logo} className="App-logo" alt="logo" />
22
        <p>
23
          Edit <code>src/App.js</code> and save to reload.
24
        </p>
25

26
        <p>You click {count} times</p>
27

28
        <button
29
          style={{
30
            padding: '8px 16px',
31
            borderRadius: 4,
32
            fontSize: '1.25rem'
33
          }}
34
          onClick={() => setCount(count + 1)}
35
        >
36
          Click me
37
        </button>
38

39
        <p>
40
          <img src={cat.file} alt="Meow" width="256" />
41
        </p>
42
      </header>
43
    </div>
44
  )
45
}
46

47
export default App

1
const initialState = {
2
  isFetching: false,
3
  cat: {}
4
}
5

6
const reducer = (state, { type, payload }) => {
7
  switch (type) {
8
    case 'FETCH_CAT_PENDING':
9
      return {
10
        ...state,
11
        isFetching: true
12
      }
13
    case 'FETCH_CAT_SUCCESS':
14
      return {
15
        ...state,
16
        isFetching: false,
17
        cat: payload
18
      }
19
    default:
20
      return state
21
  }
22
}
23

24
// การใช้การ ก็คือเรียก useReducer ด้วย function reducer และ initiState เป็น argument ครับ
25

26
const [state, dispatch] = useReducer(reducer, initialState)

1
import React, { useReducer, useEffect } from 'react'
2
import axios from 'axios'
3
import logo from './logo.svg'
4
import './App.css'
5

6
const fetchCat = () => axios.get('https://aws.random.cat/meow')
7

8
const initialState = {
9
  isFetching: false,
10
  cat: {},
11
  count: 0
12
}
13

14
const reducer = (state, { type, payload }) => {
15
  switch (type) {
16
    case 'FETCH_CAT_PENDING':
17
      return {
18
        ...state,
19
        isFetching: true
20
      }
21
    case 'FETCH_CAT_SUCCESS':
22
      return {
23
        ...state,
24
        isFetching: false,
25
        cat: payload
26
      }
27
    case 'COUNTER_CLICK':
28
      return {
29
        ...state,
30
        isFetching: false,
31
        count: payload
32
      }
33
    default:
34
      return state
35
  }
36
}
37

38
const App = () => {
39
  const [state, dispatch] = useReducer(reducer, initialState)
40

41
  useEffect(() => {
42
    dispatch({
43
      type: 'FETCH_CAT_PENDING'
44
    })
45

46
    fetchCat().then((response) => {
47
      dispatch({
48
        type: 'FETCH_CAT_SUCCESS',
49
        payload: response.data
50
      })
51
    })
52
  }, [])
53

54
  if (state.isFetching) {
55
    return <p>Loading....</p>
56
  }
57

58
  return (
59
    <div className="App">
60
      <header className="App-header">
61
        <img src={logo} className="App-logo" alt="logo" />
62
        <p>
63
          Edit <code>src/App.js</code> and save to reload.
64
        </p>
65

66
        <p>You click {state.count} times</p>
67

68
        <button
69
          style={{
70
            padding: '8px 16px',
71
            borderRadius: 4,
72
            fontSize: '1.25rem'
73
          }}
74
          onClick={() => {
75
            dispatch({
76
              type: 'COUNTER_CLICK',
77
              payload: state.count + 1
78
            })
79
          }}
80
        >
81
          Click me
82
        </button>
83

84
        <p>
85
          <img src={state.cat.file} alt="Cat" width="256" />
86
        </p>
87
      </header>
88
    </div>
89
  )
90
}
91

92
export default App

1
const [{ cat, isFetching, count }, dispatch] = useReducer(reducer, initialState)

1
import React, { useReducer, useEffect } from 'react'
2
import axios from 'axios'
3
import logo from './logo.svg'
4
import './App.css'
5

6
const fetchCat = () => axios.get('https://aws.random.cat/meow')
7

8
const initialState = {
9
  isFetching: false,
10
  cat: {},
11
  count: 0
12
}
13

14
const reducer = (state, { type, payload }) => {
15
  switch (type) {
16
    case 'FETCH_CAT_PENDING':
17
      return {
18
        ...state,
19
        isFetching: true
20
      }
21
    case 'FETCH_CAT_SUCCESS':
22
      return {
23
        ...state,
24
        isFetching: false,
25
        cat: payload
26
      }
27
    case 'COUNTER_CLICK':
28
      return {
29
        ...state,
30
        isFetching: false,
31
        count: payload
32
      }
33
    default:
34
      return state
35
  }
36
}
37

38
const App = () => {
39
  const [{ cat, isFetching, count }, dispatch] = useReducer(reducer, initialState)
40

41
  useEffect(() => {
42
    dispatch({
43
      type: 'FETCH_CAT_PENDING'
44
    })
45

46
    fetchCat().then((response) => {
47
      dispatch({
48
        type: 'FETCH_CAT_SUCCESS',
49
        payload: response.data
50
      })
51
    })
52
  }, [])
53

54
  if (isFetching) {
55
    return <p>Loading....</p>
56
  }
57

58
  return (
59
    <div className="App">
60
      <header className="App-header">
61
        <img src={logo} className="App-logo" alt="logo" />
62
        <p>
63
          Edit <code>src/App.js</code> and save to reload.
64
        </p>
65

66
        <p>You click {count} times</p>
67

68
        <button
69
          style={{
70
            padding: '8px 16px',
71
            borderRadius: 4,
72
            fontSize: '1.25rem'
73
          }}
74
          onClick={() => {
75
            dispatch({
76
              type: 'COUNTER_CLICK',
77
              payload: count + 1
78
            })
79
          }}
80
        >
81
          Click me
82
        </button>
83

84
        <p>
85
          <img src={cat && cat.file} alt="Cat" width="256" />
86
        </p>
87
      </header>
88
    </div>
89
  )
90
}
91

92
export default App