React hooks新提案 useEvent _引用

静待秋风
吹拂眉梢
---------写下便是永恒
【React hooks新提案 useEvent】2022 年 5 月 5 日,一个新的hook提案：。
其目的是返回一个永远引用不变(-)的事件处理函数
没有时我们如何写事件函数
const [text, setText] = useState("");const onClick = () => {sendMessage(text);};return ={onClick} />;}
为了访问最新的 state ，在每次chat组件更新时，都会声明一个新的函数（引用变化）
React 比较两个组件要diff 前，会对props 进行浅比较
同时它还会破坏你的 memo 优化
const SendButton = React.memo(() => {});
优化：
function Chat() {const [text, setText] = useState("");const onClick = useCallback(() => {sendMessage(text);}, [text]);return ={onClick} />;}
当text变化时，引用还是会改变，依然会带来子组件没必要的更新。。。
function Chat() {const [text, setText] = useState("");const onClick = useEvent(() => {sendMessage(text);});return ={onClick} />;}
已经一直是引用不变的了，而且可以访问到最新的 text 。
function useEvent(handler) {const handlerRef = useRef(null);// In a real implementation, this would run before layout effectsuseLayoutEffect(() => {handlerRef.current = handler;});return useCallback((...args) => {// In a real implementation, this would throw if called during renderconst fn = handlerRef.current;return fn(...args);}, []);}
最核心的地方就是使用维持最新引用以及缓存住外层的
不可避免的需要改动 fiber tree阶段逻辑