标签:const hooks 几种 return state useState 钩子 import
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玉倩呀~~~
标签:const,hooks,几种,return,state,useState,钩子,import 来源: https://www.cnblogs.com/judyhuayu/p/15194790.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。