首页 > 其他分享> 文章详细

react-阶段4-模块1

2021-09-07 14:03:52 阅读：146 来源： 互联网

标签：语法 const 用户界面 react 阶段模块 JSX user

一：基础回顾

1.react是什么？

react是一个用于构建用户界面的javascript库，它只负责应用的视图层，帮助开发人员构建快速且交互式的web应用程序。
react使用组件的方式构建用户界面。

2.jsx语法

在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。

在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。

JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。

jsx 语法很像html语法，但不是html语法。

2.1 在jsx中使用使用表达式：

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
}
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const element = <h1>Hello, {formatName(user)}!</h1>;

JSX 本身其实也是一种表达式，将它赋值给变量，当作参数传入，作为返回值都可以。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

2.2 属性

如果属性值为字符串类型，需要加引号，属性名称推荐采用驼峰式命名法。

const element = <div greeting="hello"></div>;

如果属性值为JavaScript表达式，属性值外面加大括号。

const element = <img src={user.avatarUrl} />;
// 注意大括号外面不能加引号，JSX 会将引号当中的内容识别为字符串而不是表达式

二：VirtualDOM 及 Diff 算法

标签：语法,const,用户界面,react,阶段,模块,JSX,user
来源： https://blog.csdn.net/weixin_38245947/article/details/120156365

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react-阶段4-模块1

一：基础回顾

1.react是什么？

2.jsx语法

二：VirtualDOM 及 Diff 算法