react动态渲染列表与函数式组件

2024-07-10 00:14:02
开发
20

1.如何使用jsx语法动态渲染列表呢，下边我用一个例子来切实总结一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsx练习动态渲染列表</title>
</head>
<body>
     <!-- 引入react 核心库 -->
     <script type="text/javascript" src="../js/react.development.js"></script>
     <!-- 引入react-dom库 ，用于支持react操作Dom -->
     <script type="text/javascript" src="../js/react-dom.development.js"></script>
 
     <!-- 引入babel 解析jsx语法的库，用于将jsx转换为js -->
     <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 准备一个容器用于渲染接收虚拟dom -->
     <div id="test"></div>

    <script type="text/babel">
        // 一定注意区分：【js语句】和【js表达式】
        // 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
        // 下边这些都是表达式
        // （1）a
        // （2）a+b
        // （3）demo（1）
        // （4）arr.map()
        //  (5)function(){}
        // 语句（代码）
        // 下边这些都是语句（代码）控制代码走向
        // （1）if(){}
        // （2）for(){}
        // （3）while(){}
        // （4）switch(){}
      




        const myData = [
            {id:1,name:'张三',age:18},
            {id:2,name:'李四',age:19},
            {id:3,name:'王五',age:20},
            {id:4,name:'赵六',age:21},
            {id:5,name:'孙七',age:22},
        ]
        // 创建虚拟dom
        const VDOM = (
            <div>
                <h1>前端jsx框架</h1>
                <ul>
                    {
                        myData.map((item,index) =>{
                            return <li key={index}>{item.id}{item.name}{item.age}</li>
                            
                        })
                    }
                </ul>
            </div>
        )

        // 渲染虚拟dom到页面
        ReactDOM.render(VDOM,document.getElementById('test'))

    </script>
</body>
</html>

2.函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数式组件</title>
</head>
<body>
     <!-- 引入react 核心库 -->
     <script type="text/javascript" src="../js/react.development.js"></script>
     <!-- 引入react-dom库 ，用于支持react操作Dom -->
     <script type="text/javascript" src="../js/react-dom.development.js"></script>
 
     <!-- 引入babel 解析jsx语法的库，用于将jsx转换为js -->
     <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 准备一个容器用于渲染接收虚拟dom -->
     <div id="test"></div>

    <script type="text/babel">
        // 1.创建函数式组件
        function Hello_react(){
            console.log(this);//此处this是undefinded,因为babel编译后开启了严格模式
            return(
                <div>
                    <h2>你好我是函数式组件</h2>
                </div>
            )
        }
      

        ReactDOM.render(<Hello_react/>,document.getElementById('test'))


      

    </script>
</body>
</html>

通过上述例子总结

1.函数式组件，其实就是一个函数，返回值就是虚拟dom
2.函数名就是组件名，首字母必须大写
3.函数名必须和文件名一致
4.函数式组件没有this，但是可以通过props获取父组件向子组件传递的属性
5.函数式组件没有状态，但是可以通过props向子组件传递状态
6.函数式组件没有生命周期，但是可以通过props向子组件传递生命周期

ReactDOM.render(<Hello_react/>,document.getElementById('test'))之后发生了什么？
1.React解析组件标签，找到了ello_react组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后就是看到的页面

原文地址:https://blog.csdn.net/weixin_57031986/article/details/140164286 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1810709001718075392.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

react动态渲染列表与函数式组件

相关推荐

最近更新

热门阅读