網站首頁 編程語言 正文
過多的聲明state
在我們React的日常開發中一些常用的寫法，看似運行的很好，實際可能并不優雅。學習React并不是如何如何使用它，而是如何寫出優雅，干凈的代碼。下面舉一些例子，總結了一些React開發中不好的寫法及相應更好的寫法。(僅代表個人觀點)
問題
一個組件中聲明了過多的state，過多的setState方法。例如下面的這樣：
import { useState } from "react";
export default function MoreState() {
const [username, setUsername] = useState("");
const [age, setAge] = useState("");
const [gender, setGender] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [address, setAddress] = useState("");
const [city, setCity] = useState("");
const onSubmit = () => {
// ...
};
return (
<form onSubmit={onSubmit}>
<input
type="text"
name="username"
placeholder="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<br />
<input
type="text"
name="age"
placeholder="age"
value={age}
onChange={(e) => setAge(e.target.value)}
/>
<br />
<input
type="text"
name="gender"
placeholder="gender"
value={gender}
onChange={(e) => setGender(e.target.value)}
/>
<br />
<input
type="text"
name="email"
placeholder="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<br />
<input
type="text"
name="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<br />
<input
type="text"
name="address"
placeholder="address"
value={address}
onChange={(e) => setAddress(e.target.value)}
/>
<br />
<input
type="text"
name="city"
placeholder="city"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
<br />
<button type="submit">提交</button>
</form>
);
}
實際上這樣并不好維護，接手項目的人都瘋了??。還有這樣的：
解決方法
把能合并的state，合并成一個對象表示。當然也可以使用useReducer。當屬性中出現嵌套結構時，例如屬性中有對象和數組時，使用useReducer更好一些。
import { useState } from "react";
export default function MoreState() {
const [userInfo, setUserInfo] = useState({
username: "",
age: "",
gender: "",
email: "",
password: "",
address: "",
city: ""
});
const onChange = (e) => {
setUserInfo((pre) => ({ ...pre, [e.target.name]: e.target.value }));
};
const onSubmit = (e) => {
e.preventDefault();
console.log(111, userInfo);
};
return (
<form onSubmit={onSubmit}>
<input
type="text"
name="username"
placeholder="username"
onChange={onChange}
/>
<br />
<input type="text" name="age" placeholder="age" onChange={onChange} />
<br />
<input
type="text"
name="gender"
placeholder="gender"
onChange={onChange}
/>
<br />
<input type="text" name="email" placeholder="email" onChange={onChange} />
<br />
<input
type="text"
name="password"
placeholder="password"
onChange={onChange}
/>
<br />
<input
type="text"
name="address"
placeholder="address"
onChange={onChange}
/>
<br />
<input type="text" name="city" placeholder="city" onChange={onChange} />
<br />
<button type="submit">提交</button>
</form>
);
}
不必要的state
問題
我們在開發React表單時，通常會使用state來記錄表單的值，例如：
import { useState } from "react";
export default function NoState() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const onSubmit = (e) => {
e.preventDefault();
console.log("需要提交的數據", username, password);
};
console.log("組件重新渲染了");
return (
<form onSubmit={onSubmit}>
<label htmlFor="name">名字</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<br />
<label htmlFor="name">密碼</label>
<input
type="text"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<br />
<button type="submit">提交</button>
</form>
);
}
上面的代碼看似并沒有什么問題，但是我們只是在提交的時候用到了state，并沒有在其他地方使用過這些state。這個例子中我們并不關心這些state值的變化，我們只關心我們提交的數據是否正確。而且我們每次輸入的時候組件都是重新渲染。這并不友好，這個時候我們需要非受控組件。
解決方法
當表單元素不多時，使用ref來處理，并且每次輸入都不會引起組件的重新渲染，因為這個時候我們只關心提交的數據，沒有在其他地方使用過這些state。
import { useRef } from "react";
export default function NoState() {
const usernameRef = useRef();
const posswordRef = useRef();
const onSubmit = (e) => {
e.preventDefault();
console.log(
"需要提交的數據",
usernameRef.current.value,
posswordRef.current.value
);
};
console.log("組件重新渲染了");
return (
<form onSubmit={onSubmit}>
<label htmlFor="name">名字</label>
<input type="text" ref={usernameRef} />
<br />
<label htmlFor="name">密碼</label>
<input type="text" ref={posswordRef} />
<br />
<button type="submit">提交</button>
</form>
);
}
過多的useEffect
問題
有時當頁面第一次掛載時，我們需要進行網絡請求，我們經常會這樣寫：
import { useEffect, useState } from "react";
export default function MoreUseEffect() {
const [data, setData] = useState();
useEffect(() => {
fetch("/ss/ss").then((res) => {
setData(res.data);
});
}, []);
useEffect(() => {
// 進行其他邏輯處理...
console.log(data);
}, [data]);
return <>頁面第一次加載時請求</>;
}
引入了過多的useEfffect，實際上我們只是需要使用請求到的數據來進行其他邏輯的處理，并不需要數據變化時做一些事情。
解決方法
把數據的處理邏輯放入第一個useEffect中直接處理。
import { useEffect } from "react";
export default function MoreUseEffect() {
useEffect(() => {
fetch("/ss/ss").then((res) => {
// setData(res.data);
// 在這里直接進行數據處理...
console.log('')
});
}, []);
return <>頁面第一次加載時請求</>;
}
請求競爭問題
問題
下面是對fetch請求進行了封裝，這種寫法有一個問題：當同時有多個請求時，由于請求返回的時間不一樣，會出現競爭關系，不會按照請求的順序返回結果，這樣就造成返回的結果不知道是哪次的。
import { useEffect, useState } from "react";
export default function useFetch(url) {
const [loading, setLoading] = useState(true);
const [data, setData] = useState();
const [error, setError] = useState();
useEffect(() => {
setLoading(true);
fetch(url)
.then((res) => {
setData(res.data);
})
.catch((e) => {
setError(e);
})
.finally(() => setLoading(false));
}, [url]);
return {
loading,
data,
error
};
}
解決方法
需要在請求URL變化之后取消前一次的請求。
import { useEffect, useState } from "react";
export default function useFetch(url) {
const [loading, setLoading] = useState(true);
const [data, setData] = useState();
const [error, setError] = useState();
useEffect(() => {
const controller = new AbortController();
setLoading(true);
fetch(url, { signal: controller.signal })
.then((res) => {
setData(res.data);
})
.catch((e) => {
setError(e);
})
.finally(() => setLoading(false));
return () => {
controller.abort();
};
}, [url]);
return {
loading,
data,
error
};
}
使用三元表達式代替&&
使用 && 常見的錯誤
1.當狀態值不是Boolean，而是數字0時，數字0會在UI中顯示。
import { useState } from "react";
export default function MoreUseEffect() {
const [arr] = useState([])
return <>
{
arr.length && <div>11111</div>
}
</>;
}
解決方法
- 轉成Boolean
- 使用三元表達式代替 && (推薦)
傳遞特殊屬性ref
問題
ref屬性是React的特殊屬性，不能直接傳遞使用。
import {useRef} from 'react'
function InputCom({ref}) {
return (
<input type='text' ref={ref} />
)
}
function App() {
const inpRef = useRef(null)
const focus = () => {
inpRef.current?.focus()
}
return (
<>
<InputCom ref={inpRef} />
</>
)
}
如果想傳遞ref需要借助forwardRef函數。
解決方法
借助forwardRef轉發ref屬性
import { forwardRef, useRef } from "react";
// function InputCom({ ref }) {
// return <input type="text" ref={ref} />;
// }
const InputCom = forwardRef((props, ref) => {
return <input type="text" ref={ref} />;
});
export default function ProRef() {
const inpRef = useRef(null);
const focus = () => {
inpRef.current?.focus();
};
return (
<>
<InputCom ref={inpRef} />
<br />
<button onClick={focus}>focus</button>
</>
);
}原文鏈接：https://juejin.cn/post/7186080338689392696
相關推薦
- 2022-09-22 python 參數內存地址相關
- 2022-05-27 C++回溯算法深度優先搜索舉例分析_C 語言
- 2022-04-18 ASP.Net?Core?MVC基礎系列之獲取配置信息_基礎應用
- 2022-11-13 Python反射機制案例超詳細講解_python
- 2023-03-18 RedisTemplate訪問Redis的更好方法_Redis
- 2021-11-28 jQuery實現全部購物車功能實例_jquery
- 2023-12-10 Failed to process, please exclude the tableName or
- 2022-06-30 C語言超詳細講解結構體與聯合體的使用_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速