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í)行，相當于執(zhí)行了以下代碼
export default function App () {
? const [num, setNum] = useState(5)
? console.log(setNum)
? document.title = '標題' + num
? useEffect(() => {
? ? // setNum(num + 5)
? ? document.title = '標題' + num
? })
? const hClick = () => {
? ? setNum(num + 5)
? ? // useEffect(() => {
? ? // ? // setNum(num + 5)
? ? // ? document.title = '標題' + 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 = '標題' + num
? })總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
高性能React開發(fā)React Server Components詳解
ReactServerComponents通過服務(wù)器端渲染、自動代碼分割等技術(shù),實現(xiàn)了高性能的React開發(fā),它解決了客戶端數(shù)據(jù)請求鏈式延遲、敏感數(shù)據(jù)暴露風險等問題,提供了更好的用戶體驗和安全性,本文介紹高性能React開發(fā)React Server Components詳解,感興趣的朋友一起看看吧2025-03-03
解決React報錯Expected an assignment or funct
這篇文章主要為大家介紹了React報錯Expected an assignment or function call and instead saw an expression解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本篇文章主要介紹了淺談react受控組件與非受控組件(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
setState是React組件中用于更新狀態(tài)的方法,是類組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細介紹了React中的setState執(zhí)行機制,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
React Native 集成 iOS 原生功能(打印機功能為例)
在 React Native 項目中集成 iOS 原生功能是一個常見需求,本文將同樣以打印機功能為例,詳細介紹如何在 React Native 項目中集成 iOS 原生功能,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了淺談react 同構(gòu)之樣式直出,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了使用React手寫一個對話框或模態(tài)框的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-04-04
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02