您的位置：首页 > Web前端 > React

React入门Today.2（JSX、元素渲染）

2020-02-17 03:10 441 查看

JSX

  1. JSX是javaScripet的语法扩展，但它具有JavaScripet的所有功能

    注：使用JXS必须使用CDN的获得babel的UMD版本，因为babel内嵌JSX的支持
           因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

  2. 使用JSX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSX</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="box_JSX" ></div>
<script type="text/babel">
{/*这是一个单行注释*/}
/*这是一个多行注释
*创建一个名为name变量，const类似于java中的常量，申明了值就不允许改变。
*/
const name='Lance';
{/*在JSX中使用name*/}
const element=<h1>欢迎来到我的博客，{name}</h1>
ReactDOM.render(
element,
document.getElementById("box_JSX")
);

</script>
</body>
</html>

       运行结果

  • ReactDOM.render()
    是React最基本的方法，用于将其中标签语句转换为HTML，并插入指定的DOM节点。
  • 这个方法当中第一个参数为创建的模板，若插入多个DOM元素，外层需使用一个标签进行包裹，例如
    < div >
    ，第二个参数为模板插入的位置，若要创建的某个元素增加class属性，不能直接定义class，而要用
    className
    ，应为class是JavaScript中的保留字。

–试试调用 JavaScript 函数

formatName(user)
的结果，并将结果嵌入到
< h1 >
元素中。

function formatName(user){
return user.firstName+" "+user.lastName;
}
const user={
firstName:'Lance',
lastName:'pig'
};
const element=<h1>hello,{formatName(user)}</h1>
ReactDOM.render(
element,
document.getElementById("box_JSX")
);

代码过程:
    首先会渲染界面，进入

ReactDOM.render（）
方法中,获取模板element的值，获取过程中，调用
formaName
函数，将对象
user
传递参数过去，返回
user
对象中的属性。

运行结果

  1. JSX也是一个表达式
    编译之后，JSX表达式转为普通的JavaScript函数调用，并且对其取值后得到JavaScript对象。

  2. JSX特定属性
    可以通过使用引号将属性值指定为字符串字面量，例：

    const element=<div tabIndex="0></ div>;

    也可以使用大括号，在属性值中插入一个JavaScript表达式

    const element=< img src={user.avatarUrl}></ img>

元素渲染

  • React中的元素创建时开销及小的普通对象。
  • React DOM 负责更新DOM与React中的元素保持一致。
  • React是不可变对象，且只会更新她需要更新的部分，大多数React 应用只会调用一次 
    ReactDOM.render()
    。
  • 关于React是不可变对象，通俗理解就是数据不变页面渲染就不变，React是单页面应用，根据数据渲染的。数据变了就会更新页面。
  • 点赞
  • 收藏
  • 分享
  • 20000 文章举报
over.here 发布了5 篇原创文章 · 获赞 0 · 访问量 74 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航