title: react HOOK
date: 2021-08-09 11:17:42
tags: react
description: react16.8 hook学习
1. useState
function xxx(props) {
const [isOnline,setIsOnline] = useState(null);
}
2.useEffect
function xxx(props) {
const [isOnline,setIsOnline] = useState(null);
// useEffect可以在组件渲染后实现不同的副作用
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id,handleStatusChange);
// 清除effect
// React会在组件卸载的时候执行清除操作
// 并不是必须为 effect 中返回的函数命名。这里我们将其命名为 cleanup 是为了表明此函数的目的,但其实也可以返回一个箭头函数或者给起一个别的名字。
return function cleanup() {
chatAPI.unsubscribeFromFriendStatus(props.friend.id,handleStatusChange);
}
// 仅在count更改时更新
// 若只想执行一次,可以传递一个空数组[]
},[count]);
if (isOnline === null) {
return 'loading...';
}
return isOnline ? 'Online' : 'Offline';
}
3.自定义HOOK
只是一种遵循HOOK设计的约定,而不是React的特性
- 必须以’use’开头
4. useContext
useContext 可以帮助我们跨越组件层级直接传递变量,实现共享
import React, { useState, createContext } from 'react';
// 使用createContext函数创建context
const CountContext = createContext()
function Example() {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={()=>{setCount(count+1)}}>Click me</button>
// 传递count
<CountContext.Provider value={count}>
</CountContext.Provider>
</div>
)
}
import React, { useState, useContext } from 'react';
function Counter() {
// useContext接收上下文变量
const count = useContext(CountContext)
return (<h2>{count}</h2>)
}
// 使用组件
<CountContext.Provider value={count}>
<Counter/>
</CountContext.Provider>
5. useReducer
通过action的传递,更新复杂逻辑的状态,主要是可以实现类似
Redux
中的Reducer
部分,实现业务逻辑的可行性
// reducer函数
function countReducer(state, action) {
// 接收两个参数——状态、控制业务逻辑的判断参数
switch(action.type) {
case 'add':
return state + 1;
case 'sub':
return state - 1;
default:
return state;
}
}
import React, { useReducer } from 'react';
function ReducerDemo() {
const [ count, dispatch ] = useReducer((state,action)=>{
switch(action){
case 'add':
return state+1
case 'sub':
return state-1
default:
return state
}
},0)
return (
<div>
<h2>现在的分数为{count}</h2>
<button onClick={()=>{dispatch('add')}}>Increment</button>
<button onClick={()=>{dispatch('sub')}}>Decrement</button>
</div>
)
}
6. useRef
- 用useRef来获取React JSX中的DOM元素
- 用useRef来保存变量
6 . useMemo
useMemo
主要用来解决使用React hooks产生的无用渲染的性能问题
使用function的形式来声明组件,失去了shouldCompnentUpdate
(在组件更新之前)这个生命周期,也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中,也不再区分mount
和update
两个状态,这意味着函数组件的每一次调用都会执行内部的所有逻辑,就带来了非常大的性能损耗