关于react hooks的一些Q&A

问题：props、setState导致的组件重新渲染，宏观上是怎么样的？

比如有如下代码：

const component = (props) => {
    const [a, setA] = useState(true);
    const [b, setB] = useState(true);
    const ref = useRef(true);
    const fn = useCallback(() => {}, [a]);
    const memo = useMemo(() => {}, [b]);
    useEffect(() => {
        setA(false);
    }, [b]);
    
    return (
        <div>
            <div>{a}</div>
            <div>{props.c}</div>
       </div>
    )
}

每一次组件的重新渲染，都会有链表（假设这个链表叫link1）依次记录useState -> useState -> useRef -> useCallback -> useMemo -> useEffect

每一个的区别，详细要看每一个的解析。这里只简述deps对函数运行与否的影响。

这里的deps会被记录link1中。第二次渲染组件开始，会对deps比对，如果deps不同，就会执行对应方法。

比如fn = useCallback这里，第一次渲染组件，把方法赋值给了fn，记录[a]的值

第二次渲染组件开始，会查看[a]的值是否更新了（示例代码中是更新了，因为useEffect），如果更新了，就会把useCallback里的第一个参数重新赋值给fn。

问题：useMemo和useEffect的区别是什么？

不同点如下：

1. useMemo是渲染过程中执行，而useEffect是在渲染之后，重新搞一个渲染队列执行
2. 因为1的原因，会导致在useMemo的第一个参数方法里，如果调用了set...State方法，会报错。但是在useEffect里不会，但是如果在useEffect里这么做了，会触发重新渲染。如果重新渲染的值在useEffect的deps里，那么就造成了循环渲染，最后也会报错。
3. 用法上，useMemo一般会直接给一个值赋值，因为第一个参数方法会有返回值。而useEffect没有返回值。

问题：在useCallback、useMemo、useEffect中，如果第一个参数的函数中涉及的变量，没有都出现在第二个参数里，会怎么样？

分为几种情况。

情况1：涉及的变量都是useState创建的变量

这种情况很显然是不行的，因为如果我们调用了set...State，而deps中没有更新后的数据，那么这三个use返回的内容会完全不符合预期
所以，不行。

情况2：涉及的变量是useRef创建的

useRef创建意味着一直不会更新这个值，除非强行用ref.current修改。
但是用ref.current更新的话，也不会触发这三个use方法。所以，这个是可以不放deps里的。

情况3：涉及的变量是直接创建的

比如直接用const a = initValue;
直接创建的变量，每次更新组件都会重新初始化变量。
原则上不建议这么创建变量。
这个的答案是：不要这么创建变量。
如果硬要这么创建，答案是，这个变量每次都会初始化，之后这个变量的改变也不会引发三个use的重新创建。