hooks中幾種鈎子的基本使用方法學習總結

React hooks中經常使用的幾種鈎子有以下幾種

1、useState()  // 狀態鈎子
2、useContext() // 共享狀態鈎子
3、useReducer() // action鈎子

4、useEffect() // 副作用鈎子

下面分別講下他們的使用方法

1、useState()  // 狀態鈎子

useState可以接收兩個參數，一個參數是狀態值，另一個是改變狀態值的函數。
具體聲明方法如下：

import React, { useState } from 'react';
import { Button } from 'antd'

const demo1 = () => {
    const [text, setText] = useState('初始文案')
    const onChangeTxt = () => {
      setText('更改的文案')
     }
    return(
    <div>
      <Button onClick={onChangeTxt}>點擊</Button>
      <p>{text}</p>
    </div>
)
}

點擊按鈕就可以更改text的值了。

注意：聲明useState時，是一個數組，不是對象哦~

2、useContext() // 共享狀態鈎子
這個鈎子的使用情況是組件之間通信時可以使用。

 

首先看下父組件的代碼

 

import React, { useState, useReducer } from 'react';
import { Layout, Button } from 'antd';

import './App.css';
import Demo2 from './home/index';
import Demo1 from './demo/index';
import { Provider } from './context';

const { Header, Footer, Sider, Content } = Layout;

// 組件之間共享狀態使用 useContext()

function App() {
  const [ value ] = useState('玉倩小可愛')
  return (
      <Layout className="App">
        <Sider style={{ color: '#fff' }}>Sider</Sider>
        <Layout>
          <Header style={{ color: '#fff' }}>Header</Header>
          <Content>
            <Provider value={{ name: value }}>
                <Demo1 />
                <Demo2 />
            </Provider>
          </Content>
        </Layout>
      </Layout>
  );
}

export default App;

然后看下context.js文件的代碼，這里就是聲明useContext()的地方

聲明之后再父組件中將需要共享數據的組件用Provider包裹，然后用參數value進行傳值，這里value是一個對象，傳值可自定義。

import React from "react";

const AppContext = React.createContext();

export const { Provider, Consumer } = AppContext;

 

然后我們來看demo2是如何接收父組件傳來的值的。Consumer的使用方法如下：將需要接受值的地方用Consumer包裹住。

 

import React, { useState } from 'react';
import { Button } from 'antd'
import { Consumer}  from '../context';

const demo2 = () => {
    return(
    <div>
      <Consumer>
       {
         value => {
            return(
                <div>{value.name}</div>
             )
         }
        }
      </Consumer>
    </div>
)
}


export default demo2;

 

3、useReducer()的使用

首先創建一個reducer.js文件，寫成公共組件可以方便調用。

export const myReducer = (state, action) => {
    switch(action.type){
       case 'test': 
       return {
           ...state,
           count: state.count+1,
       }
       default: 
       return state;
    }
}

然后來看使用方式:   首先聲明useReducer，它包括了兩個參數，state和dispatch， state就是狀態值，dispatch相當於action，通過改變action來獲取state的值。

import React, { useState, useReducer } from 'react';
import { Button } from 'antd';

import { myReducer }  from './reducer';


function App() {
  const [ state, dispatch ] = useReducer(myReducer, { count: 0 })
  return (
     <div>
      <Button type="primary" onClick={() => dispatch({ type: 'test' })}> 
        {state.count}
      </Button>
    </div>
  );
}

export default App;

 

4、useEffect() // 副作用鈎子　

這個鈎子主要用來進行一步操作的，之前我們用react中的componentDidmount來進行的操作，在這里就可以使用這個鈎子來進行一步操作。
具體用法如下：useEffect()鈎子有兩個參數，一個是函數，另一個是一個數組，這里需要注意第二個參數必須是數組，且這個參數發生變化時就會觸發useEffect

import React, { useState, useContext, useEffect } from 'react';
import { Button } from 'antd';

const MyEffect = () => {
   const [ count, setText ] = useState(0);
   const [ flag, setFlag ] = useState(false);
   useEffect(() => {
    setText(count+1)
   }, [flag])

   const onChangeFlag = () => {
    setFlag(!flag)
   }
    return(
        <div>
            {count}
            <Button onClick={onChangeFlag}> 點擊 </Button>
        </div>
    )
}
export default MyEffect;

基本用法就是這樣，具體的實踐我還沒在項目中使用過，有機會用一下。附上學習鏈接:   https://www.cnblogs.com/GeniusZ/p/12452133.html

PS: 生活不在別處，而在於你付出了多少就會收獲多少。改變和塑造自己的過程很辛苦，但是也值得，今天也是努力生活的Judy玉倩呀~~~