React基础

react简介

react用于构建用户界面的 JavaScript 库

特点

• 组件化思维
• 单向数据流
• 虚拟dom
• facebook脸书公司

优点

• js书写html模板方便
• 比较接近原生，编译快

创建react项目

安装

npm i -g create-react-app
全局安装脚手架

创建

create-react-app myreact
创建myreact项目

运行

cd myreact
进入myreact
npm start
运行

目录结构

jsx语法

1. {} 写js javascript表达式
2. {/* */} 注释
3. 数组里面可以包含html
4. 有且只有一个根节点
5. 类名用className
6. 样式style对象会自动展开

说明：javascript与html混合的写法（需要编译器才能被浏览器执行）

组件

函数组件

• 负责展示，也称为视图组件
• props 父组件传递的参数
• 没有this

类组件

• 父处理数据，也称为容器组件
• state 数据
• 生命周期器
• props 父组件传递的参数
• 有this
  推荐使用 函数组件

事件与响应函数

onClick={()=>{ 响应内容}}
onClick={this.say}

函数的参数

onClick={()=>this.say(参数))}
匿名函数

onClick = {this.Hi.bind(this,参数)}
bind

state数据

this.setState({k:v})
更新数据

表单

受控表单

state与表单绑定

<input value={this.state.msg} onChange={(e) => this.setState({ msg: e.target.value })}></input>

非受控表单

通过ref

import { createRef } from "react";
this.inpRef = createRef();
<input type="text" ref={this.inpRef}></input>
<button onClick={() => alert(this.inpRef.current.value)}>获取值</button>