react-Hook

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.querySelector('#app')
)

App.js

import React from 'react';
import Home from './Home';
export default class extends React.Component {
  render () {
    return (
      <div>
        <Home />
      </div>
    )
  }
}

Package

Home.js (count.js)

React Import, useState {} from 'REACT'; 

const = Home () => { 
  // declare a new called "count" of the state variable 
  // initialization data set to 0, to vary as a function of count setCount 
  const [count, setCount] = useState (0) 
  const [List, setList] = useState ([. 1, 2,. 3,. 4]) 
  return ( 
    < div > 
      < Button the onClick = { () = > { 
        the let NUM = COUNT +. 1 
        setCount (NUM ) 
      }}> plus. 1 </ Button > 
      {COUNT} 
      < Button the onClick = { () = > {  
        setList ([5,6,7,8])
      }}> change List </button>
      { 
        list.map((item, index) => (
          <p key = { index }> { item } </p>
        ))
      }
    </div>
  )
}

export default Home;

Home.js (Home-useEffect.js)

import React, { useState, useEffect } from 'react';
import axios from 'axios';
// useEffect 其实是 componentDidMount + componentDidUpdate + componentWillUnmount

const Home = () => {
  const [ bannerlist, setBannerlist ] = useState([])

  useEffect(() => {
    axios.get('/api/banner').then(res => {
      setBannerlist(res.data.data)
      // console.log(bannerlist)
    })
  })

  const [ prolist, setProlist ] = useState([])

  useEffect(() => {
    axios.get('/api/pro').then(res => {
      setProlist(res.data.data)
    })
  })

  return (
    <div>
      {
      FIG rotation list
        bannerlist.map(item => (
          <p key = { item.bannerid }>
            { item.img }
          </p>
        ))
      }
      {
        prolist.map(item => (
          <p key = { item.proid }>
            { item.proname }
          </p>
        ))
      }
    </div>
  )
}

export default Home;

Home.js ( Home-useEffect control. J S)

React Import, {useState, useEffect} from 'REACT'; 
Import from Axios 'Axios'; 
// useEffect fact componentDidUpdate + + componentWillUnmount componentDidMount 

const = Home () => { 
  const [bannerlist, setBannerlist] = useState ([]) 

  useEffect (() => { 
    axios.get ( '/ API / Banner'). the then (RES => { 
      setBannerlist (res.data.data) 
      // the console.log (bannerlist) 
    }) 
  }, [bannerlist]) / / 2 times the same comparison and skip 

  const [PROLIST, setProlist] = useState ([]) 

  useEffect (() => { 
    axios.get ( '/ API / Pro'). the then (RES => { 
      setProlist (res.data .data) 
    }) 
  }, []) // perform only run once Effect 

  return ( 
    <div>
      轮播图列表
      {
        bannerlist.map(item => (
          <p key = { item.bannerid }>
            { item.img }
          </p>
        ))
      }
      {
        prolist.map(item => (
          <p key = { item.proid }>
            { item.proname }
          </p>
        ))
      }
    </div>
  )
}

export default Home;

Home.js

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

// 自定义HOOK
const useLoginState = () => {
  const [loginstate, setLoginstat] = useState('no')
  useEffect(() => {
    if (localStorage.getItem('loginstate') === 'ok') {
      setLoginstat('ok')
    } else {
      setLoginstat('no')
    }
  }, [loginstate])
  return loginstate
}

const Home = () => {
  const loginstate = useLoginState()

  return (
    <div>
      自定义HOOK
      {
        loginstate === 'ok' ? <</landed>the p-P > : < P > unregistered </ P > 
      } 
    </ div > 
  ) 
} 

Export default Home;