React Hooks常用场景的利用(小结)(4)

import React, { memo, useCallback, useMemo, useState } from 'react'; // 子组件 const ChildComp = (props:any) => { console.log('ChildComp...'); return (<div>ChildComp...</div>); }; const MemoChildComp = memo(ChildComp); // 父组件 const Parent = () => { const [count, setCount] = useState(0); const [name] = useState('jack'); const [age] = useState(11); const info = useMemo(() => ({ name, age }), [name, age]); const changeName = useCallback(() => { console.log('输着名称...'); }, []); return ( <div className="App"> <div>hello world {count}</div> <div onClick={() => { setCount(count => count + 1); }}>点击增加</div> <MemoChildComp info={info} changeName={changeName}/> </div> ); }; export default Parent;

八、useRef

以下别离先容 useRef 的两个利用场景：

1、指向 dom 元素

如下所示，利用 useRef 建设的变量指向一个 input 元素，并在页面渲染后使 input 聚焦

import React, { useRef, useEffect } from 'react'; const Page1 = () => { const myRef = useRef<HTMLInputElement>(null); useEffect(() => { myRef?.current?.focus(); }); return ( <div> <span>UseRef:</span> <input ref={myRef} type="text"/> </div> ); }; export default Page1;

2、存放变量

useRef 在 react hook 中的浸染, 正如官网说的, 它像一个变量, 雷同于 this , 它就像一个盒子, 你可以存放任何对象. createRef 每次渲染城市返回一个新的引用，而 useRef 每次城市返回沟通的引用，如下例子所示：

import React, { useRef, useEffect, useState } from 'react'; const Page1 = () => { const myRef2 = useRef(0); const [count, setCount] = useState(0) useEffect(()=>{ myRef2.current = count; }); function handleClick(){ setTimeout(()=>{ console.log(count); // 3 console.log(myRef2.current); // 6 },3000) } return ( <div> <div onClick={()=> setCount(count+1)}>点击count</div> <div onClick={()=> handleClick()}>查察</div> </div> ); } export default Page1;

九、useImperativeHandle

利用场景：通过 ref 获取到的是整个 dom 节点，通过 useImperativeHandle 可以节制只袒露一部门要领和属性，而不是整个 dom 节点。

十、useLayoutEffect

其函数签名与 useEffect 沟通，但它会在所有的 DOM 改观之后同法式用 effect，这里不再举例。

useLayoutEffect 和泛泛写的 Class 组件的 componentDidMount 和 componentDidUpdate 同时执行；
useEffect 会在本次更新完成后，也就是第 1 点的要领执行完成后，再开启一次任务调治，在下次任务调治中执行 useEffect；

总结

关于这方面的文章，我们按照利用场景别离举办举例说明，但愿有辅佐到你认识领略并可以纯熟运用 React Hooks 大部门特性。

到此这篇关于React Hooks常用场景的利用(小结)的文章就先容到这了,更多相关React Hooks常用场景内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！

您大概感乐趣的文章: