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

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

html 复制代码

<!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.函数式组件

html 复制代码

<!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，随后就是看到的页面