最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > 工具与技巧> React、JSX以及Render函数基本使用教程

React、JSX以及Render函数基本使用教程

文章作者:网友投稿 发布时间:2019-06-13 13:34:48 来源:网络

React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。JS

    React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。JSX 是 React 语法糖。小编建议大家在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。下面就由小编来向大家介绍吧!


      1、React CDN链接安装:

Rcdn.png

      上述版本  仅用于开发环境,不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用:

Rcdn1.png

      2、React 简单实例:

reactHW.png

       

        3、JSX 简介:

        JSX 既不是字符串也不是 HTML,它是一个 JavaScript 的语法扩展,JSX 还可以生成 React “元素”。


        4、在 JSX 中嵌入表达式:

JSX.png

        5、在 JSX 语法中,你可以在大括号内放置任何有效的 JavaScript  表达式

     例如 2+2user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

     在下面的示例中,我们将调用 JavaScript 函数 formatName(user) 的结果,并将结果嵌入到 

 元素中。

JSXuser.png

        6、JSX 自身也是一个表达式

     在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。

     你可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX:

JSXbds.png

        7、元素渲染

     想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render():

Rxr.png

Rxr1.png

        8、更新已渲染的元素:

     React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。因此,更新 UI 唯一的方              式是创建一个全新的元素,并将其传入 ReactDOM.render():

xr.png

     谢谢大家的支持,希望能够帮助大家一起学习,后期再见!

上一篇: Vue和Vue Router介绍及基本使用

下一篇: Node.js 学习笔记

共有0条评论网友评论