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

    
    
    jsx练习动态渲染列表


     
     
     
     
 
     
     
    
     
    
        // 一定注意区分：【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 = (
            
                
前端jsx框架
                

{ myData.map((item,index) =>{ return
• {item.id}{item.name}{item.age}
}) }

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

2.函数式组件

    
    
    函数式组件


     
     
     
     
 
     
     
    
     
    
        // 1.创建函数式组件
        function Hello_react(){
            console.log(this);//此处this是undefinded,因为babel编译后开启了严格模式
            return(
                
                    
你好我是函数式组件
                
            )
        }
      
        ReactDOM.render(,document.getElementById('test'))
      
    

通过上述例子总结

        1.函数式组件，其实就是一个函数，返回值就是虚拟dom

        2.函数名就是组件名，首字母必须大写

        3.函数名必须和文件名一致

        4.函数式组件没有this，但是可以通过props获取父组件向子组件传递的属性

        5.函数式组件没有状态，但是可以通过props向子组件传递状态

        6.函数式组件没有生命周期，但是可以通过props向子组件传递生命周期

        ReactDOM.render(,document.getElementById('test'))之后发生了什么？

        1.React解析组件标签，找到了ello_react组件

        2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后就是看到的页面