React 常用 Hook 汇总参考
source link: https://surest.cn/archives/200/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
useEffect 副作用
不带参数的情况下，每次更更新都会触发执行
useEffect(() => {})
不带参数返回值
useEffect(() => { return () => {
// 组件挂载完成时执行
}})
带的情况下，只会执行第一次渲染
useEffect(() => {}, [])
带参数返回值
useEffect(() => { return () => {
// 组件销毁时执行
}}，[count])
React.memo
一般来说，当 useState 更新时，会触发所有当前组件下所有组件的渲染，包括子组件。
当有些子组件，没有任何 props 参数 或者 没有涉及到 useState 数据修改的值，他们是不希望更新的
function Child({seconds}){
console.log('只要不是 seconds 变化，我都不会render');
return (
<div>I am update every {seconds} seconds</div>
)
};
export default React.memo(Child)
也支持传递 第二个参数 控制是否刷新
function Child({seconds, age}){
console.log('就算 seconds 变了，age 没变的情况下，我都不会render');
return (
<div>I am update every {seconds} seconds</div>
)
};
function areEqual(prevProps, nextProps) {
if(prevProps.age === nextProps.age){
return true
}else {
return false
}
}
export default React.memo(Child, areEqual)
useCallback 依赖项缓存
useCallback(回调函数，[依赖值])
会根据依赖项目的变化而自动缓存。 第一次执行的时候，会缓存当前的执行计算结果。除非依赖项发生变化，不然如下情况，无论执行多少次
handleClick1 ，都不会发生变化
const [value, setValue] = useState(0)
const [message, setMessage] = useState("第一次执行")
const handleClick1 = useCallback(()=> {
console.log(message)
setMessage("你好")
}, [value]);
当依赖项修改为 messsage ，会相应的重新缓存计算结果
handleClick1 执行得到的永远的是 message 的结果
...
const handleClick1 = useCallback(()=> {
console.log(message)
setMessage("你好")
}, [message]);
useMemo：性能优化
useMemo(回调函数，[依赖值])
有点像 React.memo
默认情况下，只要数据发生变化，就会触发更新，使用 useMemo 包裹函数
const getDoubleCount = useMemo(() => {
console.log('我只会渲染一次');
return count * 2;
}, []);
return (
<div>
<h2>value: {value}</h2>
<h2>doubleCount: {getDoubleCount()}</h2>
<button onClick={() => setValue(value + 1)}>value+1</button>
</div>
);
useRef
const user = useRef({})
user.current = {
name: ""
}
任何地方使用，user.current
他的修改 无法触发组件的修改
使用场景：适用于某项变量 不涉及到ui变化的基础数据
useReducer
useState 的替代方案
https://zhuanlan.zhihu.com/p/343298490
本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: May 28, 2022 at 10:44 am
Recommend
-
19
If you already read my previouspost we talk about how to create a simple todo with useState and useReducer . Today we’ll see how we can use useRef to refer to our elemen...
-
51
usePortal :cyclone: A React hook for using Portals Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its children into it...
-
32
I’ve started porting over a recent React project to use the new Hooks API . Porting a few state values is relatively simple with the
-
38
Early February 2019, React introducedHooks as a way to rewrite your components as simple, more manageable, and classless. useContext is one of the built-in Hooks, giving functional components easy access to...
-
22
In a prior post, "How we use Firebase instead of React with Redux," I discussed how we created a withDbData function to...
-
18
Hook是什么 Hook是React从16.8开始支持的特性，使用Hook可以在不使用class时使用state Hook支持在不需要修改组件状态的情况下复用逻辑状态，从而解决使用render prop和高阶组件产生的代码结构复杂的问题 Hook...
-
17
curl 是常用的命令行工具，用来请求 Web 服务器。平时运维过程中使用频率较高。 curl 是一种命令行工具，作用是发出网络请求，然后得到和提取数据，显示在「标准输出」（stdout）上面。 它支持多种协议，下面整理平时运...
-
5
Linux 常用 C 函数参考手册中文版 发表于 2018-06-01 15:06:57...
-
3
S-Plus 常用函数参考（示例） 谢益辉 / 2006-02-22 以前编 S-Plus 程序就会经常因为狂用函数而挨骂，其实在 S-Plus 中不多多使用内置函数真是枉费了 AT&T 贝尔实验室和 MathSoft 公司的一片苦心，也忽略了 S-Plus 语言的核心对...
-
6
《开源之迷》参考材料汇总由于预算有限，非常遗憾的是每一个章节的参考资料未能随着《开源之迷》一同出版，但是没有参考资料，适兕总是心中难安，因为自己本身是个追根溯源的人，希望所描述的事情是有出处的，这算是开源世界的一种风格，一种倡导的方式，...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK