react-HOOK

---

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两个状态，这意味着函数组件的每一次调用都会执行内部的所有逻辑，就带来了非常大的性能损耗