React中的for循環(huán)解讀
更新時(shí)間：2023年01月16日 10:24:55 作者：越來(lái)越好。
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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">
//繼承實(shí)例
window.onload = () => {
var arr = ["a", "b", "d", "e", "f"];
//第一種寫(xiě)法 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ReactDOM.render(
<div>
{
arr.map((item, index) => {
return <div key={index}>{item}</div>
})
}
</div>,
document.getElementById("root1")
)
//第二種寫(xiě)法 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
var str = arr.map((item, index) => {
return <div key={index}>{item}</div>
})
ReactDOM.render(
<div>
{str}
</div>,
document.getElementById("root2")
)
//第三種寫(xiě)法 我們應(yīng)該是最熟悉這種寫(xiě)法
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ù)寫(xiě)在副作用函數(shù)里面，修改狀態(tài)函數(shù)會(huì)使整個(gè)函數(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
? ? // })
? ? // 錯(cuò)誤×
? ? // 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>)
}錯(cuò)誤代碼如下：
? useEffect(() => {
? ? // setNum(num + 5)
? ? document.title = '標(biāo)題' + num
? })總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React事件處理的機(jī)制及原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法
本篇文章主要介紹了使用Electron構(gòu)建React+Webpack桌面應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例
這篇文章主要介紹了利用React高階組件實(shí)現(xiàn)一個(gè)面包屑導(dǎo)航的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
詳解React如何優(yōu)雅地根據(jù)prop更新state值
這篇文章主要為大家詳細(xì)介紹了React如何優(yōu)雅地實(shí)現(xiàn)根據(jù)prop更新state值,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要給大家介紹了在ES6下React組件的寫(xiě)法，其中包括定義React組件、聲明prop類(lèi)型與默認(rèn)prop、設(shè)置初始state、自動(dòng)綁定，文中分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
這篇文章主要為大家介紹了React?SSG實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-07-07
關(guān)于useEffect執(zhí)行兩次的問(wèn)題及解決
這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React?createRef循環(huán)動(dòng)態(tài)賦值ref問(wèn)題
這篇文章主要介紹了React?createRef循環(huán)動(dòng)態(tài)賦值ref問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了react-native彈窗封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08