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