关于hook:面试官求你别再问我hook了
一 前言先问大家几个问题，这几个问题都是我在面试中实在被问到的，属实给我整不会了.... 写hooks跟写类组件比，hooks有啥劣势？咱们如何封装一个hook？hooks原理是什么？面试尽管凉了，然而学习还得持续 二 深刻理解hooksuseState应用useState的应用很简略，一句话带过，返回一个数组，数组的值为以后state和更新state的函数；useState的参数是变量、对象或者是函数，变量或者对象会作为state的初始值，如果是函数，函数的返回值会作为初始值。 批量更新看上面这段代码 function Count(){ let [count,setCount] = useState(0)const handleAdd = function(){ setCount(count+1) setCount(count+1)}return( <div> <p>{count}</p> /*每次点击加1*/ <button onClick={handleAdd}>加一</button> </div>)}复制代码在同一个事件中并不会因为调用了两次setCount而让count减少两次，试想如果在同一个事件中每次调用setCount都失效，那么每调用一次setCount组件就会从新渲染一次，这无疑使十分影响性能的；实际上如果批改的state是同一个，最初一个setCount函数中的新state会笼罩后面的 useEffect && useLayoutEffect应用这两个hook用法统一，第一个参数是回调函数，第二个参数是数组，数组的内容是依赖项deps,依赖项扭转后执行回调函数；留神组件每次渲染会默认执行一次,如果不传第二个参数只有该组件有state扭转就会触发回调函数,如果传一个空数组，只会在初始化执行一次。另外，如果用return返回了一个函数，组件每次从新渲染的时候都会先执行该函数再调用回调函数。 区别外表上看，这两个hook的区别是执行机会不同，useEffect的回调函数会在页面渲染后执行；useLayoutEffect会在页面渲染前执行。实际上是React对这两个hook的解决不同，useEffect是异步调用，而useLayoutEffect是同步调用。那什么时候用useEffect，什么时候用useLayoutEffect呢？我的了解是视状况而定 如果回调函数会批改state导致组件从新渲染,能够useLayoutEffect，因为这时候用useEffect可能会造成页面闪动； 如果回调函数中去申请数据或者js执行工夫过长，倡议应用useEffect；因为这时候用useLayoutEffect梗塞浏览器渲染。 useMemo && useCallback这两个hook可用于性能优化，缩小组件的反复渲染；当初就来看看这两个神奇的hook怎么用。 uesMemofunction MemoDemo() { let [count, setCount] = useState(0);let [render,setRender] = useState(false)const handleAdd = () => { setCount(count + 1);};const Childone = () => { console.log("子组件一被从新渲染"); return <p>子组件一</p>;};const Childtwo = (props) => { return ( <div> <p>子组件二</p> <p>count的值为：{props.count}</p> </div> );};const handleRender = ()=>{ setRender(true)}return ( <div style={{display:"flex",justifyContent:'center',alignItems:'center',height:'100vh',flexDirection:'column'}}> { useMemo(() => { return <Childone /> }, [render]) } <Childtwo count={count} /> <button onClick={handleAdd}>减少</button> <br/> <button onClick={handleRender} >子组件一渲染</button> </div>);}复制代码Childone组件只有render扭转才会从新渲染 ...