一:基础回顾
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 算法
原文地址:https://blog.csdn.net/weixin_38245947/article/details/120156365
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。