react动态渲染列表与函数式组件
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},]// 创建虚拟domconst 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，随后就是看到的页面