脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React for循环

React中的for循环解读

 更新时间：2023年01月16日 10:24:55   作者：越来越好。  
这篇文章主要介绍了React中的for循环解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

React中的for循环

记得要绑定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")
        )
        //第三种写法 我们应该是最熟悉这种写法
        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死循环

原因1

修改状态函数写在副作用函数里面，修改状态函数会使整个函数式组件重新执行，相当于执行了以下代码

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
  })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React事件处理的机制及原理

    React事件处理的机制及原理

    这篇文章主要介绍了React事件处理的机制及原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 使用Electron构建React+Webpack桌面应用的方法

    使用Electron构建React+Webpack桌面应用的方法

    本篇文章主要介绍了使用Electron构建React+Webpack桌面应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React使用Echarts/Ant-design-charts的案例代码

    React使用Echarts/Ant-design-charts的案例代码

    这篇文章主要介绍了React使用Echarts/Ant-design-charts的实例代码，本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 利用React高阶组件实现一个面包屑导航的示例

    利用React高阶组件实现一个面包屑导航的示例

    这篇文章主要介绍了利用React高阶组件实现一个面包屑导航的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 详解React如何优雅地根据prop更新state值

    详解React如何优雅地根据prop更新state值

    这篇文章主要为大家详细介绍了React如何优雅地实现根据prop更新state值,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下
    2023-11-11
  • ES6下React组件的写法示例代码

    ES6下React组件的写法示例代码

    这篇文章主要给大家介绍了在ES6下React组件的写法，其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定，文中分别给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • React SSG实现Demo详解

    React SSG实现Demo详解

    这篇文章主要为大家介绍了React SSG实现Demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
    2023-07-07
  • 关于useEffect执行两次的问题及解决

    关于useEffect执行两次的问题及解决

    这篇文章主要介绍了关于useEffect执行两次的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • React createRef循环动态赋值ref问题

    React createRef循环动态赋值ref问题

    这篇文章主要介绍了React createRef循环动态赋值ref问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • react-native弹窗封装的方法

    react-native弹窗封装的方法

    这篇文章主要为大家详细介绍了react-native弹窗封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论