React中的for循環(huán)解讀
更新時間：2023年01月16日 10:24:55 作者：越來越好。
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React中的for循環(huán)
記得要綁定key!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<title>例子2</title>
</head>
<body>
<div id="root1"></div>
<div id="root2"></div>
<div id="root3"></div>
</body>
<script type="text/babel">
//繼承實例
window.onload = () => {
var arr = ["a", "b", "d", "e", "f"];
//第一種寫法 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ReactDOM.render(
<div>
{
arr.map((item, index) => {
return <div key={index}>{item}</div>
})
}
</div>,
document.getElementById("root1")
)
//第二種寫法 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
var str = arr.map((item, index) => {
return <div key={index}>{item}</div>
})
ReactDOM.render(
<div>
{str}
</div>,
document.getElementById("root2")
)
//第三種寫法 我們應(yīng)該是最熟悉這種寫法
var str=[];
for(let i=0;i<arr.length;i++){
str.push(<div key={i}>{arr[i]}</div>)
}
ReactDOM.render(
str,
document.getElementById("root3")
)
}
</script>
</html>React死循環(huán)
原因1
修改狀態(tài)函數(shù)寫在副作用函數(shù)里面，修改狀態(tài)函數(shù)會使整個函數(shù)式組件重新執(zhí)行，相當(dāng)于執(zhí)行了以下代碼
export default function App () {
? const [num, setNum] = useState(5)
? console.log(setNum)
? document.title = '標(biāo)題' + num
? useEffect(() => {
? ? // setNum(num + 5)
? ? document.title = '標(biāo)題' + num
? })
? const hClick = () => {
? ? setNum(num + 5)
? ? // useEffect(() => {
? ? // ? // setNum(num + 5)
? ? // ? document.title = '標(biāo)題' + num
? ? // })
? ? // 錯誤×
? ? // Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
? ? // 1. You might have mismatching versions of React and the renderer (such as React DOM)
? ? // 2. You might be breaking the Rules of Hooks
? ? // 3. You might have more than one copy of React in the same app
? ? // See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
? }
? return (<div>
? ? ? num:{num}
? ? ? <button type="button" onClick={() => {
? ? ? ? // eslint-disable-next-line no-unused-expressions
? ? ? ? hClick()
? ? ? }}>每次加5</button>
? ? </div>)
}錯誤代碼如下：
? useEffect(() => {
? ? // setNum(num + 5)
? ? document.title = '標(biāo)題' + num
? })總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React事件處理的機制及原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
本篇文章主要介紹了使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實例代碼，本文通過實例代碼給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
利用React高階組件實現(xiàn)一個面包屑導(dǎo)航的示例
這篇文章主要介紹了利用React高階組件實現(xiàn)一個面包屑導(dǎo)航的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
詳解React如何優(yōu)雅地根據(jù)prop更新state值
這篇文章主要為大家詳細介紹了React如何優(yōu)雅地實現(xiàn)根據(jù)prop更新state值,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認prop、設(shè)置初始state、自動綁定，文中分別給出了詳細的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要為大家介紹了React?SSG實現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
關(guān)于useEffect執(zhí)行兩次的問題及解決
這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
React?createRef循環(huán)動態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動態(tài)賦值ref問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了react-native彈窗封裝的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08