[杭州]1.5 年前端求坑位；技术画像:ts+react；业务画像:电商 SaaS 后台+小程序

妈呀。你们这都中高级了？

自己给自己定的级别吗？

1.5 年 20 届 二本 还是非科班

你这些技能最多算是个初级

v2 刚有个 2020 年工作但是 4 年经验，厂内定位 senior 的。现在又来个二本非科班 1.5 年的中高级。😂

职级越来越水了ᥬ😂᭄

只看你的这两点技术描述，定位中高级太夸张了

中高级的话，要不简单介绍一下 react api ？

- 一般在什么场景用 useState ，什么场景用 useRef
- useEffect 一般放什么逻辑，如何精确让 deps list 真实的反应业务逻辑，而不是莫名其妙加很多 state 到 deps list 。可以随便贴个日常写的比较复杂的 useEffect 吗
- 为啥需要 useEffectEvent ，是补齐了什么场景（即 react 一直缺失了什么？）

问 api 的行为非常逗。不过 react 就是这么神奇，并不是所有中高级都能写对最基础的业务逻辑。

@jklopsdfw 你说的对

个人感觉如果对 React 和 Vue 的实现原理有一定理解的话, 如果 “中高级” 是 中级或高级的话, 我觉得也没啥问题啊 😂
前端只要对框架理解够深, 工程化的东西熟悉, 日常工作其实就没什么太大问题了.
当然更细的内容就面试考察呗.

@jklopsdfw 额-0-，因为在上家就是高级，不过是小厂是比较水的我知道。去年有面过阿里，问了下定位能给到中级的。

@nbhaohao 哈哈-0- 高级肯定是木的拉。没想到帖子这么多人回呢哈哈，这里还是活跃的

@towave 哈哈哈，见笑见笑拉。

@TaoLoading 是的，但是我知道这里是论坛，直接码很长的简历上去是没人看的，只能把我的情况描述一下。毕竟没有开源项目或者说是明星项目背书。

@jklopsdfw 简单回复一下，可能不是很对哈，多指教。

1. useState 用在有状态组件，状态更新后 React 就会自上而下检索更新相关联的组件。
useRef 用于保存 React 实例 或者是存储任何数据，他改变之后是不会触发组件渲染的，在组件生命周期内其保存的数据都不会改变，要手动赋值。

2. useEffect 意味着副作用，当 deps list 中的 state 变更后会在渲染完成后执行。适合放一些在 state 变更需要自动触发的逻辑。要注意的就是，他的执行时机是在浏览器渲染完成之后，其他场景都可以。

deps list 确实就是 react 现阶段的硬伤，依赖项很容易就特别多。让 deps list 真实的反应业务逻辑，做好状态的细粒度管理。
1. 是组件按职责抽象拆分好，状态适当的聚合。
2. 得当的命名。
3. 写注释哈哈，有些 effect 中逻辑，的确就是要排除某个 state 的。
4. useEffect 内部的回调函数，在封装时与状态无关的的善用 useRef 保存，与状态有关的善用 useCallback ，这样可以将 deps list 拆分到别的函数中。

平时写的啊大部分是业务里的，不方便贴了，我贴一个倒计时组件的，相对通用点的。就是一个弹出层，打开必须等倒计时结束才能关闭。

3. useEffectEvent 我其实没听过哈哈，不太懂是个啥。。望指教
```ts

type PorpOptions = {
afterClose?: () => void
count?: number
}

type Props = PorpOptions & IModalProps<boolean>

const ClearCacheTipWindow = ({ visible, hidden, afterClose, count = 3, ...props }: Props) => {
const [countdown, setCountdown] = React.useState(count)
const intervalRef = React.useRef<NodeJS.Timer>()

useEffect(() => {
if (visible) setCountdown(count)
}, [count, visible])

useEffect(() => {
let canUpdate = true

if (countdown !== 0) {
intervalRef.current = setInterval(() => {
if (count !== 0) {
canUpdate && setCountdown(c => --c)
}
}, 1000)
}

return () => {
canUpdate = false
clearInterval(intervalRef.current)
}
}, [count, countdown])

// 倒计时文本
const remainCount = React.useMemo(() => {
return countdown > 0 ? <>{countdown}s</> : null
}, [countdown])

// 可否点击以关闭弹层
const disabled = React.useMemo(() => {
return countdown !== 0
}, [countdown])

return (
<Modal
title='保存成功'
afterClose={() => afterClose?.()}
width={480}
centered
getContainer={false}
closable={false}
maskClosable={false}
keyboard={false}
visible={visible}
onCancel={() => hidden(false)}
footer={[
<Button key='primary' disabled={disabled} onClick={() => hidden(true)} type='primary'>
已完成上述操作{remainCount}
</Button>
]}
{...props}
>
<>巴拉巴拉的内容<>
</Modal>
)
}


```

@lzgshsj 哈哈-0-见笑拉 ，应该是现在阶段在初中级，要努力去对标中高级！

那我岂不是专家了