重学react——hooks以及原理

1、hooks基本用法

react-hooks用法官网有，我们直接看一个栗子

import React, {useState} from 'react';

// 子组件
const Child = ({data, addCount}: { data: any, addCount: any }) => {
    console.log('child render'); // 标记一下，判断组件是否渲染
    return {data.count};
};

const Index = (props: any) => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('hx');
    
    let data = {count}
    
    const addCount = () => {
        setCount(count + 1);
    }
    return 

        
        
         setName(e.target.value)}/>
    
;
};

export default Index;

以上就是hook一个基本用法，Child组件只是展示data数据，input可以改变name，展示效果如下

多余渲染问题

• 有一个问题，就是当改变input的值时，控制台打印出了 "child render", 这是为什么，改变input的值只是改变了name的值，而data.count并没有变
• 这里就需要优化一下，我们需要只有需要渲染时才去渲染，如果dom中的变量值没发生改变，就不需要渲染

那到底是什么原因导致了没必要的渲染？

• 我们知道我们每次改变state的值，就会触发函数组件内部重新执行，并且如果渲染需要的变量发生了变化，就会触发渲染
• 其中下面代码，也就是data和addCount每次执行都会被重新赋值一下，即使count没有发生变化，函数也没有发生变化，但是由于函数和对象都是引用类型，重新赋值后，其实值已经发生了变化，所以child才会一直被渲染

let data = {count}  
const addCount = () => {
    setCount(count + 1);
}

我们优化一下，这里用到了react-hooks中的 memo, useMemo, useCallback

// + 引入 memo,useMemo,useCallback
import React, { useState, memo,useMemo,useCallback} from 'react';

const Child = ({data, addCount}: { data: any, addCount: any }) => {
    console.log('child render');
    return {data.count};
};

// + memo函数包裹Child组件，会判断属性有没有变化，没变化就不渲染
const MyChild = memo(Child);  

const Index = (props: any) => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('hx');
    // 重点 useMemo 表示依赖不变，就不会返回新的变量
    let data = useMemo(() => ({count}), [count]); 
    // 重点 useCallback 表示依赖不变，就不会返回新的函数
    const addCount = useCallback(() => { 
        setCount(count + 1);
    }, [count]);

    return 

        
         setName(e.target.value)}/>
    
;
};

export default Index;

• 用useMemo处理引用类型的变量，此函数会根据count前后两次做对比，查看有没有发生变化，没有变化，会将原来的值付给 data，useMemo需要和memo搭配使用
• 用useCallback也是一样道理，如果count没发生变化，会将前一次的函数赋给addCount, 从而不触发渲染

未完持续