接着说一个超实用但容易被忽略功Neng —— UseRef .好多人第一反应 Use Ref就是用来获取 DOM元素对吧?没错没错 !比如说想让输入框自动获取焦点 : const input Ref=Use Ref
但 Use Ref远不止这点本事 !它还Neng帮我们 存储跨渲染周期的数据 并且不会触发组件重 render .举个栗子 :假设我们想记录计数器每次变化前的值 ,总不Neng每次set Count之前dou声明个变量存一下吧 ?这时候 Use Ref就Neng派上用场 : const prev Count=Use Ref
不过 Use Ref也有小脾气哦 :它里面存的数据变了 并不会导致组件重新 render!这点一定要记牢 !要是傻傻以为改current就Neng刷新页面那可就要哭唧唧改bug啦 ~比如说 const =Use State ;const ref Time=Use Ref );点击按钮改ref Time.current=Date.now ——页面上显示时间根本不会变 !除非配合 Use Effect监听ref Time.current变化才行 ~
接下来咱们聊聊 "全家桶平替"选手 Use Context .有没有经历过这种绝望时刻 :父组件要传个用户信息给孙子孙女曾孙四代同堂嵌套组件 ?一层一层穿props像传接力棒一样累死人不说还容易传错漏传 ?这时候 Use Context就是你的救星 !
用法也hen straightforward :先创建个 Context 对象 : const App Context=React.create Context ;然后在顶层组件用 App Context.Provider包裹后代所有需要共享数据 components并传递value={当前共享 state} .后代不管隔多少层只要调用 const ctx=Use Context;就Neng直接拿到共享的数据甚至修改Neng力 !
举个实际例子 :爷爷组件用Provider包着爸爸儿子孙子三个层级.爷爷有个count state=0.孙子想点按钮让count+1怎么办?不用爸爸转手传给儿子儿子再传给孙子!直接爷爷把放进Provider value里.孙子调用ctx=Use Context;ctx.set Count—完事大吉!是不是瞬间觉得世界清静多啦?
className
性Neng优化三剑客之UseMemo与UseCallback
写 React久了你肯定会遇到"性Neng焦虑":明明只是改A状态为什么B无关紧要 component跟着一起重 render ?明明计算一次就Neng得到结果为什么每次renderdou要重新算一遍?别慌! UseMemo 和 UseCallback 这对兄弟专门治各种"没必要重 render "病!
'home'
'movie'
'about'
