编程除了做网站还能干什么,网站建设简运维 简历,网站布局设计排版,企业网站seo关键词优化排名思路React JSX语法
什么是React JSX JSX#xff08;javascript xml#xff09; 就是JavaScript和XML结合的一种格式#xff0c;是JavaScript的语法扩展#xff0c;只要把HTML代码写在JS中#xff0c;就为JSX。用于动态构建用户界面的Javascript库#xff0c;发送请求获取数据…React JSX语法
什么是React JSX JSXjavascript xml 就是JavaScript和XML结合的一种格式是JavaScript的语法扩展只要把HTML代码写在JS中就为JSX。用于动态构建用户界面的Javascript库发送请求获取数据处理数据过滤整理格式操作DOM呈现页面React是一个将数据渲染为HTML视图的开源JavaScript库。 JS和JSX的区别 原生JavaScript操作DOM繁琐效率低使用Javascript直接操作Dom浏览器会进行大量的重绘重排原生JavaScript没有组件化的编码方案代码复用率比较低。 JS是直接写在下·XML的语法每个XML标签都会被JSX工具转换成纯JS代码使用JSX可以使组件的结构和组件之间的关系看上去更加的清晰JS是原生写法需要通过script标签引入。 React使用JSX的有点
JSX执行更快因为它在编译为JavaScript代码后进行优化。它是类型安全的在编译过程中就能发现错误。声明式语法更加直观与HTML结构相同降低了学习成本提升开发效率。JSX语法中一定要有一个定义元素包裹否则编译报错程序不能运行。
React JSX 中使用JS表达式 再JSX中通过大括号语法{}识别javaScript中的表达式比如常见的变量函数调用方法调用等等 使用引号传递字符串。使用JavaScript变量。函数调用和方法调用。使用JavaScript对象。 React JSX 中实现列表渲染
语法再JSX中可以使用原生的JS中的map方法遍历渲染列表。
const List [{id:01,name:vue2},{id:02,name:React},{id:03,name:eachers},{id:04,name:vue3},
]
function Home(){return(div{/* map循环那个结构return那个结构*/}{/* 注意循环列表时加上一个独一无二的值key */}ul{List.map(itemli key{item.id}{item.name}/li)}/ul/div)
}
export default Homekey的作用react框架内部提升Dom操作的性能。 React JSX 中实现条件渲染
一条使用逻辑与多条使用三元运算符
const isLogin true
function Home(){return(div{/* 逻辑与 */}{isLogin spanthis is span/span}{/* 三元运算符 */}{isLogin ? spanjack/span:spanloading.../span}/div)
}
export default HomeReact JSX 复杂情况条件渲染
解决方案自定义函数和自定义语句
const articalType 1 //0 1 2
// 定义核心函数根据文章类型返回不同的JSX模板
function getArticleTem(){if(articalType 0){return div我是无图文章/div}else if(articalType1){return div我是单图模式/div}else{return div我是三图模式/div}
}
function Home(){return(div{/* 通过调用函数渲染不同的模板 */}{getArticleTem()}/div)
}
export default HomeReact JSX事件绑定 语法 on 事件名称 {事件处理程序} 1.点击触发并且拿到参数e
function Home(){const handleClik (e){console.log(button被点击了,e)}return(divbutton onClick{handleClik}click me/button/div)
}
export default Home传递自定义参数 事件绑定的位置该找成箭头函数的写法 在执行click实际处理业务函数的时候传递实参。
function Home(){//传递自定义参数const handleClik (name){console.log(button被点击了,name)}return(divbutton onClick{()handleClik(jack)}click me/button/div)
}
export default Home同时传递事件对象和自定义参数在事件绑定的位置传递实参e和自定义参数handleClick中生命形参注意顺序对应。
function Home(){//既要传递自定义参数而且还要传递事件对象econst handleClik (name,e){console.log(button被点击了,name,e)}return(divbutton onClick{(e)handleClik(jack,e)}click me/button/div)
}
export default HomeReact中的组件 概念 一个组件就是用户界面的一部分它可以有自己的逻辑和外观组件之间可以互相嵌套可以以复用多次。组件化开发可以让开发者像搭积木一样搭建一个庞大的项目。 React中一个组件就是首字母大写的函数内部存放了组建的逻辑和视图UI渲染组件只需要把组件当成标签书写即可。 一个简单组件例子
function Home(){return(div{/* 自闭和 */}Button /{/* 成对标签 */}Button/Button/div)
}
function Button(){// 组件内部逻辑return buttonclick me/button
}
export default Home也可以将组件写成箭头函数形式。 完结~
