React Hooks速成学习笔记

74 阅读 0 评论 49 点赞

我是靠谱客的博主妩媚石头，最近开发中收集的这篇文章主要介绍React Hooks速成学习笔记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.useState状态钩子

useState()用于为函数组件引入状态（state）
纯函数不能有状态，所以把状态放在钩子里面

useState()的用法如下：

const [state, setState] = useState(initialState)

//useState状态钩子
import './App.css';
import React,{useState} from 'react';
function App() {
// useState创造一个状态，赋值一个初始值，此时的初始值为0
//数字第一个是一个变量，此变量指向当前状态的值，相当于this.state
//数组第二个是一个函数，可以修改状态的值，相当于this.setState
const [count,setCount]=useState(0);
const addCount=()=>{
setCount(count+10)
}
// const addCount=()=>{
//
let newCount=count;
//
setCount(newCount+=1)
// }
return (
<div className="App">
<div>{count}</div>
<button onClick={addCount}>点击</button>
</div>
);
}
export default App;

2.useContext 共享状态钩子

//useContext 共享状态钩子
import './App.css';
import React,{useContext} from 'react';
function App() {
const AppContext=React.createContext()
//多个组件共享同一个组件可以用useContext
const Achild=()=>{
const {name}=useContext(AppContext);
return (
<div>这是组件A，name值为:{name}</div>
)
}
const Bchild=()=>{
const {name}=useContext(AppContext);
return (
<div>这是组件B，name值为:{name}</div>
)
}
return (
<AppContext.Provider value={{name:77}}>
<Achild></Achild>
<Bchild></Bchild>
</AppContext.Provider>
);
}
export default App;

3.useReducer action钩子

React 本身不提供状态管理功能，通常需要使用外部库(最常用的库是 Redux)
Redux 的核心概念是：组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态
Reducer 函数的形式是(state, action) => newState。
useReducers()钩子用来引入 Reducer 功能。

useReducer()的用法如下：

const [state, dispatch] = useReducer(reducer, initialState);
//它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。
//数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数。

//useReducer action钩子
import './App.css';
import React,{useReducer} from 'react';
function App() {
const reducer=(state,action)=>{
const actionFn={
add:function(){
return{
...state,
count:state.count+1
}
}
}
return actionFn[action.type]()
}
const [state,dispatch]=useReducer(reducer,{count:0})
const addCount=()=>{
dispatch({
type:'add'
})
}
return (
<div>
<div>{state.count}</div>
<button onClick={addCount}>点击+1</button>
</div>
);
}
export default App;

4.useEffect 钩子函数

useEffect()的用法如下：

useEffect(()
=>
{
// Async Action
}, [dependencies])

//useEffect 钩子函数
import './App.css';
import React,{useEffect,useState} from 'react';
function App() {
const [loading,setLoading]=useState(true)
//当有第二个参数数组时，回调函数会依据数组的发生变化而调用
useEffect(()=>{
setTimeout(() => {
setLoading(false)
}, 3000);
},[])
return (
loading?<div>Loading......</div>:<div>加载完毕</div>
)
}
export default App;

//useEffect 钩子函数
import './App.css';
import React,{useEffect,useState} from 'react';
function AsyncPage({name}){
const[loading,setLoading]=useState(true)
const[person,setPerson]=useState({})
useEffect(()=>{
setLoading(true)
setTimeout(() => {
setLoading(false)
setPerson({name})
}, 3000)
//effect的返回函数可作为卸载的生命周期函数 
return()=>{
console.log("组件已卸载")
}
},[name])
return (
loading?<div>loading....</div>:<div>{person.name}</div>
)
}
function App() {
const[name,setName]=useState("曼曼")
const[show,setShow]=useState(true)
const changeName=(name)=>{
setName(name)
}
return (
<div>
{show?<AsyncPage name={name} />:<div>组件已卸载</div>}
<button onClick={()=>changeName("微微")}>将曼曼改成微微</button>
<button onClick={()=>changeName("琪琪")}>将曼曼改成琪琪</button>
<button onClick={()=>setShow(false)}>卸载组件</button>
</div>
)
}
export default App;

5.自定义钩子函数

//自定义钩子函数
import './App.css';
import React,{useEffect,useState} from 'react';
//封装自定义钩子函数
//根据业务需求，将自己组装的钩子函数封装成一个函数，返回对应需要的的状态和修改状态的方法即可
function usePerson(name){
const[loading,setLoading]=useState(true)
const[person,setPerson]=useState({})
useEffect(()=>{
setLoading(true)
setTimeout(() => {
setLoading(false)
setPerson({name})
}, 3000)
return()=>{
console.log("组件已卸载")
}
},[name])
return [loading,person]
}
function AsyncPage({name}){
const [loading,person]=usePerson(name)
return (
loading?<div>loading....</div>:<div>{person.name}</div>
)
}
function App() {
const[name,setName]=useState("曼曼")
const[show,setShow]=useState(true)
const changeName=(name)=>{
setName(name)
}
return (
<div>
{show?<AsyncPage name={name} />:<div>组件已卸载</div>}
<button onClick={()=>changeName("微微")}>将曼曼改成微微</button>
<button onClick={()=>changeName("琪琪")}>将曼曼改成琪琪</button>
<button onClick={()=>setShow(false)}>卸载组件</button>
</div>
)
}
export default App;