React学习笔记（一）

React学习笔记（一）

一、React是什么？

React是由Meta公司研发，是一个用于构建Web和原生交互界面的库。

执行npx create-react-app my-project快速搭建开发环境

二、JSX

1.概念

概念： JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。

2.优势

优势：既有HTML的声明式模板写法又有JS的可编程能力。

3.本质

本质：JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具（BABEL）做解析之后才能在浏览器中运行。

4.基础使用场景

1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象

5.列表渲染

key值作用：React内部使用 提升更新性能

6.条件渲染

1、三元表达式 ? :

{loading ? <span>loading</span> : <span>this is span</span>}

2、逻辑与运算符 &&

{flag && <span>this is span </span>}

三、基础事件绑定

1、语法

on + 事件名 = { 事件处理程序 }，整体上遵循驼峰命名法

2、事件参数

注意：直接在onClick属性中传递参数是行不通的，例如：onClick = { clickHandler(‘ok’) }，这样写会在组件渲染时立即调用clickHandler函数，并将其返回值赋给onClick属性，而不是在点击时调用clickHandler函数。因此需要箭头函数或bind方法来绑定参数，而不是直接直接传递参数。