react-类类型组件-day01

今日任务

• 复习class语法
• react介绍
• 搭建react的两种方式
  • webpack
  • vite
• 项目目录介绍
• 创建我的第一个组件
• 组件的页面（jsx）
• 组件的数据
• 组件的方法
  • 传参
• 组件之间通信

class语法复习

react介绍

react是一个js库。用途：只构建用户视图（路由跳转、状态管理、发起请求都不是他做的事情），所以react算一个库，不算一个框架，他需要配套着其他库一起使用，才能开发一个前端应用。 13年facebook公司为了编写公司的ins网站，市面上没有什么好用的mvc库，然后内部开发开发react项目。然后开源

• 比较适合开发大型应用
  • 更好的代码抽取
  • 更好的代码复用
  • 类类型组件、函数组件、hook
• 更加贴近原生，崇尚自由
• 学习的注意事项

  • react书写过程中你会遇到很多原生js的知识

    • this的绑定呀
    • 闭包
    • bind
    • 函数的使用（函数作为参数传递。。。。）

  • react编写久了，你的基础只会越来越扎实。

react环境搭建

两张方式搭建环境

使用webpack的方式

使用vite的方式

vscode配置

快速生成代码片段

目录结构梳理

react类类型组件的构成

数据

在react组件中，响应式数据都必须定义在state属性上，所谓响应式数据就是能够通过setState方法去改变，数据改变之后页面更新。

render函数

在类类型组件中，有一个render方法。里面返回的就是组件的页面。

视图结构

与vue相似，react为了把逻辑与页面强关联在一起，创造了一种新的模板语法，也就是jsx（tsx）。对js语法进行了扩展，相当于一种新的模板语法。

样式

在react中使用样式比较偏向原生，直接使用import导入样式

类的方法与结构

你可以理解为是组件上的一些方法

jsx语法介绍

react认为ui渲染与逻辑本来就应该耦合在一起。比如ui上绑定事件、状态发生变化的时候通知yu更新。所以react要把ui（html）与逻辑（js）写在一个文件中，原有的js中并没有ui类型，并不支持像定义变量那样定义一个div，或者函数返回一个div，类似一下写法：

const div = <div></div>

function cDiv() {
    return <div>cDiv</div>
}

所以除了一个新的语法叫做jsx（tsx），你可以在js（ts）中的任何位置定义一个div

jsx中的占位符

请注意末班语法出来了的顺序：{} > {{}} > ${}

• 占位符出现的位置
  • 节点上
  • 节点中
• 占位符里面能跟什么？
  • 数字+字符串（react帮你转换为文本节点）
  • jsx语法（react帮你解析成节点）
  • 对象报错
  • 数组，数组里面只能放（数字、字符串）
    • react会去一个一个的循环，转换为节点，如果遇到对象报错
• 与原生html的区别

不同点	html	jsx
设置类名	class	className
绑定事件	onclick	onClick

react中的数据

数据的定义

数据的修改

react中事件绑定与传参

this问题规避

• 使用箭头函数
• 使用bind

三种传参方式

• 闭包
• 自定义属性
• bind

react组件的创建与使用

创建组件

组件通信

• 子传父
• 父传子