react-hooks 的实际应用
2019年2月，随着react16.8版本的发布，react带来了稳定版的hooks，我从2019年的10月份开始使用hook，现在使用了大半年了，记录下遇到的坑
1、useState
useState 是hook组件的状态管理，使用的方法也很简单
import React, { useState } from 'react';
const Demo = () => {
const [count, setCount] = useState()
return(
<>
<button onClick={() => {
setCount(count + 1);
}}>
{count}
</button>
</>
)
}
export default Demo;2、useEffect
import React, { useState, useEffect } from 'react';
const Demo = () => {
const [count, setCount] = useState();
useEffect(() => {
console.log('每次组件渲染的时候，我都会执行，我就是class组件的render')
})
useEffect(() => {
console.log('组件第一次渲染的时候，我才会执行，我就是class组件的componentdidmount');
}, [])
useEffect(() => {
console.log('只有count的值发生改变的时候我才会执行');
}, [count])
return(
<>
<button onClick={() => {
setCount(count + 1);
}}>
{count}
</button>
</>
)
}
export default Demo;3、useMemo
可以返回一个常量
可以返回一个方法
import React, { useState, useEffect, useMemo } from 'react';
const Demo = () => {
const [count, setCount] = useState();
useEffect(() => {
console.log('每次组件渲染的时候，我都会执行，我就是class组件的render')
})
useEffect(() => {
console.log('组件第一次渲染的时候，我才会执行，我就是class组件的componentdidmount');
}, [])
useEffect(() => {
console.log('只有count的值发生改变的时候我才会执行');
}, [count])
const countText = useMemo(() => {
return '我是count的值：' + count
}, [count])
return(
<>
<button onClick={() => {
setCount(count + 1);
}}>
{count}
</button>
{countText}
</>
)
}
export default Demo;import React, { useState, useEffect, useMemo } from 'react';
const Demo = () => {
const [count, setCount] = useState();
useEffect(() => {
console.log('每次组件渲染的时候，我都会执行，我就是class组件的render')
})
useEffect(() => {
console.log('组件第一次渲染的时候，我才会执行，我就是class组件的componentdidmount');
}, [])
useEffect(() => {
console.log('只有count的值发生改变的时候我才会执行');
}, [count])
const countText = useMemo(() => {
return '我是count的值：' + count
}, [count])
const countAdd = useMemo(() => {
return () => setCount(count + 1);
}, [count])
return(
<>
<button onClick={countAdd}>
{count}
</button>
{countText}
</>
)
}
export default Demo;4、useCallback
import React, { useState, useEffect, useMemo, useCallback } from 'react';
const Demo = () => {
const [count, setCount] = useState();
useEffect(() => {
console.log('每次组件渲染的时候，我都会执行，我就是class组件的render')
})
useEffect(() => {
console.log('组件第一次渲染的时候，我才会执行，我就是class组件的componentdidmount');
}, [])
useEffect(() => {
console.log('只有count的值发生改变的时候我才会执行');
}, [count])
const countText = useMemo(() => {
return '我是count的值：' + count
}, [count])
const countAdd = useMemo(() => {
return () => setCount(count + 1);
}, [count])
const countAdd2 = useCallback(() => {
setCount(count + 1);
}, [count])
return(
<>
<button onClick={countAdd}>
{count}
</button>
<button onClick={countAdd2}>
test
</button>
{countText}
</>
)
}
export default Demo;5、useImperativeHandle 将组件内部的方法暴露出来
1）父组件
import React, { useRef } from 'react';
import Child from './index.jsx';
const Parents = (props, ref) => {
const cRef = useRef();
return (
<>
<button onClick={() => {
console.log(cRef.current.getData());
}}>
获取子组件的状态数据
</button>
<Child
ref={cRef}
/>
</>
)
}
export default Parents; 2）子组件
import React, { useState, useEffect, useMemo, useCallback, useImperativeHandle, forwardRef } from 'react';
const Demo = (props, ref) => {
const [count, setCount] = useState();
useEffect(() => {
console.log('每次组件渲染的时候，我都会执行，我就是class组件的render')
})
useEffect(() => {
console.log('组件第一次渲染的时候，我才会执行，我就是class组件的componentdidmount');
}, [])
useEffect(() => {
console.log('只有count的值发生改变的时候我才会执行');
}, [count])
const countText = useMemo(() => {
return '我是count的值：' + count
}, [count])
const countAdd = useMemo(() => {
return () => setCount(count + 1);
}, [count])
const countAdd2 = useCallback(() => {
setCount(count + 1);
}, [count])
useImperativeHandle(ref, () => ({
getData: () => {
return { count }
},
}));
return(
<>
<button onClick={countAdd}>
{count}
</button>
<button onClick={countAdd2}>
test
</button>
{countText}
</>
)
}
export default forwardRef(Demo);本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-05-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读