hooks中几种钩子的基本使用方法学习总结

2023-11-11 13:27:46

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玉倩呀~~~

hooks中几种钩子的基本使用方法学习总结

码农公寓

相关文章