showlovezz

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

export default () => {
  const [count, setCount] = useState(0)

  const userData = [
    {
      code: 200,
      message: 'Success',
      user: {

showlovezz

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

export default () => {
  const [count, setCount] = useState(0)

  const userData = [
    {
      code: 200,
      message: 'Success',
      user: {

showlovezz

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

export default () => {
  const [user, setUser] = useState(null)

  const fetchUser = async () => {
    const result = await fetch('./user.json').then(res => res.json())
    setUser(result.user)
  }
  

showlovezz

const App = () => {
  const [count, setCount] = useState(0)
  
  useEffect(() => {
    // 副作用邏輯
   document.title = `You clicked ${count} times`;
  }, [count])
  
  useEffect(() => {
    console.log(count)

showlovezz

const App = () => {
  const [user, setUser] = useState(null)

  useEffect(() => {
    // 初始化，獲取數據，僅會執行一次
    setUser(userData)
  }, [])
  
  useEffect(() => {
    // 更新數據

showlovezz

useEffect(() => {
  // 該 effect 僅在初次畫面渲染之後執行一次，相當於 componentDidMount
})

useEffect(() => {
  // 該 effect 會在初次畫面渲染之後執行一次，同時當陣列內的 count 發生改變時也會執行，相當於 componentDidUpdate
}, [])

showlovezz

useEffect(() => {
  // 副作用處理
  return () => {
    // 清理工作，類似於 componentWillUnmount
  }
})

showlovezz

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

const Example = (props) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 更新頁面標題
    document.title = `You clicked ${count} times`
  })
  return (
    <div>

showlovezz

import React, { useState } from 'react'

const Example = () => {
  // useState 採用 callBack Function，必要 return 一個值
  const [count, setCount] = useState(() => {
    return 0
  })

  return (
    <div>

showlovezz

import React, { useState } from 'react'

const Example = () => {
  // useState 採用 0 為初始值
  const [count, setCount] = useState(0)

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