From 6954cc445d9de4526bd224942a9858ecbb7e92a7 Mon Sep 17 00:00:00 2001 From: campcc <1210131782@qq.com> Date: Fri, 9 Oct 2020 09:42:21 +0800 Subject: [PATCH] fix: remove jsconfig.json, due to the tsconfig has already support code intelliSense --- docs/hooks.md | 57 ------------------------------------------------- jsconfig.json | 8 ------- jsonconfig.json | 8 ------- tsconfig.json | 11 ++-------- 4 files changed, 2 insertions(+), 82 deletions(-) delete mode 100644 docs/hooks.md delete mode 100644 jsconfig.json delete mode 100644 jsonconfig.json diff --git a/docs/hooks.md b/docs/hooks.md deleted file mode 100644 index b7fc2e7..0000000 --- a/docs/hooks.md +++ /dev/null @@ -1,57 +0,0 @@ -# Hooks - -## Class base 迁移 - -### 1. 执行初始化操作,模拟生命周期 - -- componentDidMount:useEffect(() => {}, []),第二个参数传空数组,useEffect 作为函数内的同步代码,至少会执行一次,没有依赖项时,不会触发二次执行 -- componentDidMount & componentDidUpdate:useEffect(() => {}),不传第二个参数 - -### 2. 做一些清理操作 - -useEffect 第一个参数的返回函数,React 会在每次执行新的 Effect 之前,执行该函数 - -### 3. useState 与 Class 版本的区别 - -Class 版本会做 state 合并,我们在 setState 的时候只需要增量 set,Hooks 中的修改 state 需要传入完整的修改后的 state,因为会覆盖之前的 state。 - -### 4. 减少不必要的渲染 - -Class Component 开发时,我们可以通过 shouldComponentUpdate 优化渲染,Hooks 中如何减少不必要的渲染 ? - -- React.memo - -这不是一个 Hook,你可以把它理解为 Class base 里的 PureComponent,会做 props 的浅比较 - -- useMemo - -这是一个 Hook,我们通过官方例子直观了解下。 - -```js -function Parent({ a, b }) { - // Only re-rendered if `a` changes: - const child1 = useMemo(() => , [a]); - // Only re-rendered if `b` changes: - const child2 = useMemo(() => , [b]); - return ( - <> - {child1} - {child2} - - ); -} -``` - -用法有点类似于 useEffect,第二个参数是一个依赖数组,只有依赖项发生变化时,才会触发 re-render 重新渲染。 - -### 5. 为什么不能用 condition 包裹 useHook 语句 - -与 Hooks 实现原理有关,React Hooks 并不是通过 Proxy 或者 getters 实现的,而是通过数组实现的,每次 useState 都会改变下标,如果 useState 被包裹在 condition 中,那每次执行的下标就可能对不上,导致 useState 导出的 setter 更新错数据。 - -### 6. 异步如何访问过去或未来的 state ? - -使用 useRef 缓存 state,useRef 的作用相当于让你在 Class 组件的 this 上添加属性。 - -### 7. state 初始值优化 - -初始值很复杂时,推荐使用 useState 函数形式,useState 允许传入一个函数,React 只会在首次渲染时调用这个函数。 diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index abe04df..0000000 --- a/jsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - } - } -} diff --git a/jsonconfig.json b/jsonconfig.json deleted file mode 100644 index abe04df..0000000 --- a/jsonconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - } - } -} diff --git a/tsconfig.json b/tsconfig.json index 7398379..6d09b53 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "allowJs": true, "target": "esnext", "module": "esnext", "moduleResolution": "node", @@ -15,13 +16,5 @@ }, "allowSyntheticDefaultImports": true }, - "exclude": [ - "node_modules", - "lib", - "es", - "dist", - "typings", - "**/__test__", - "test" - ] + "exclude": ["node_modules", "lib", "es", "dist", "typings", "**/__test__", "test"] }