useCallback和forwardRef的联合使用

总结了useCallback、forwardRef中的deps，以及操作子组建时会遇到数据流不同步的问题

一、useCallback

• useCallback可以缓存函数，这样避免组建更新导致的函数重建；
• useCallback在函数更新以后会在deps中对比每一项，有值的变化，会更新函数中依赖项的最新值，重新创建函数；
• 如果没有触发deps，那么这个函数不会重新创建，并且函数内使用的state值也不会变化（尤其是累加，赋值）；
• 但是useRef变量永远是最新值，一般不需要去依赖useRef值，除非他的值变化了需要去刷新函数
• 没有deps，如果只是使用setState消息队列如：setCount((count) => count + 1)，则可以拿到最值，但是也只是在函数内部使用；set函数外部依旧不会拿到最新值
• 函数也拥有地址，会被deps捕获识别；useCallback可以缓存函数，即函数地址不会更改

import { Col, message, Row, Space } from "antd";
import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";export default function ParentRef() {const countRef = useRef(0);const [count, setCount] = useState(0);const [name, setName] = useState(0);// 每一次组建更新，都会生成新的函数，addFunc在其他hooks都deps中都会被识别成值产生变化const addFunc = () => {setCount(count + 1);countRef.current = countRef.current + 1;};// useCallback 中的 deps 变化，才会触发重新生成新的函数；// 没有触发deps更新，也可以调用，但是其中的依赖项使用之前的快照值（set队列函数会显示正常）const handleClick = useCallback(() => {setCount(count + 1); // 引发组件更新countRef.current = countRef.current + 1; // 不会引发组件更新；值的对比// deps 数值或者引用地址的变化，都会触发重新调用生成新的handle}, [countRef.current]);return (<div><p>Parent</p><button onClick={handleClick}>Focus Input</button><hr /></div>);
}

二、forwardRef

• forwardRef控制子组建，useImperativeHandle暴露子组建属性；在页面代码拆分以后，组件逻辑分布分散，使用forwardRef可以快速操作子组建完成动作，而避开了传参的麻烦；
• useImperativeHandle也有deps依赖，类似于useCallback的deps，只有deps依赖变化，才会重新创建createHandle，并更新函数内部的依赖项
• 父组件修改state（类似异步），并且调用子组建init（类似同步），这个时候是来不及更新init中的依赖的，调用时使用了旧值；所以同步调用子组建init会拿到实时值，但是很有可能你希望获取最新值，一种解决方式是在init参数传入最新值，一种解决方式是子组建监听值的变化，调用对应的函数
• 控制子组建init会避开数据流，导致在数据流变化之前就触发函数，需要注意init函数和最新的数据流的关系
• 注意子组建中 await delay(0)，然后setCount(count + 1)；点击两次发现打印001122…，
  第一次点击：打印函数体内count = 0, delay(0) => (deps变化) => 更新函数体内count = 0（此时setCount还没有值更新）=>count = 1（实际值count）；
  第二次点击：打印函数体内count = 0，delay(0)=> (deps变化) => 更新函数体内count = 1（实际值count）=>count = 1（实际值count）；
  第三次点击：才会打印count为1

import { Col, message, Row, Space } from "antd";
import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
export function ChildRefTemp(props, ref) {const inputRef = useRef(null);const [count, setCount] = useState(0);const [age, setAge] = useState(0);const handleClick = () => {inputRef.current.focus();};const countAdd = async () => {// await delay(0);// 当设置延迟，props.count先让createHandle更新，这个时候count还没有更新，还是旧值展示；// 除了第一次点击，其他时候点击两次才可以让count + 1setCount(count + 1);};// useImperativeHandle: (ref, createHandle, deps)useImperativeHandle(ref,() => {console.log("ChildRefTemp useImperativeHandle"); // 初始化也会调用一次return {init(initCount) {inputRef.current.focus();countAdd();message.success("init" + count);message.success("init props.countRef: " + props.countRef);message.success("init initCount: " + initCount);}};},// 这里的deps依赖，会导致重新调用 createHandle；如果没有依赖，获取值的时候得不到最新值// [age] 不会导致重新调用 createHandle 生成新的handle// 父组件只设置props.countRef，不去setCount，不会导致子组建接收到最新的props.countRef；// 父组件setCount，子组件接收到最新的props.count，导致子组件并没有重新渲染，只要这里的值判断改变，createHandle 中就可以重新最新的数据[props.countRef]);return (<div><input type="text" ref={inputRef} /><button onClick={handleClick}>Focus Input</button><Row style={{ marginTop: 10 }}><Col><Space><span style={{ color: "red" }}>ParentRefcount: {props.count}</span><span style={{ color: "red" }}>ParentRef countRef: {props.countRef}</span><span>count: {count}</span></Space></Col></Row></div>);
}
// forwardRef: (component, props) => ref => component(props, ref)
const ChildRef = forwardRef(ChildRefTemp);export default function ParentRef() {const childRef = useRef(null);const countRef = useRef(0);const [count, setCount] = useState(0);const [name, setName] = useState(0);// 每一次组建更新，都会生成新的函数，addFunc在其他hooks都deps中都会被识别成值产生变化const addFunc = () => {setCount(count + 1);countRef.current = countRef.current + 1;childRef.current.init();};// useCallback 中的 deps 变化，才会触发重新生成新的函数；// 没有触发deps更新，也可以调用，但是其中的依赖项使用之前的快照值（set队列函数会显示正常）const handleClick = useCallback(() => {setCount(count + 1); // 引发组件更新// setCount((count) => count + 1); // 消息队列countRef.current = countRef.current + 1; // 不会引发组件更新；值的对比childRef.current.init(countRef.current);// message.success("handleClick" + count);// deps 数值或者引用地址的变化，都会触发重新调用生成新的handle}, [countRef.current]);return (<div><p>Parent</p><button onClick={handleClick}>Focus Input</button><hr /><p>ChildRef</p>// handleClick 函数也拥有地址，会被deps捕获识别；useCallback可以缓存函数，即函数地址不会更改<ChildRef ref={childRef} count={count} countRef={countRef.current} name={name} handleClick={handleClick} /></div>);
}