react-阶段4-模块1

一：基础回顾

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 算法