React基础

react项目的创建

创建项目：npm init vite

项目名称：myreact

选择react

选择javascript

进入项目目录：cd myreact

执行安装：npm i

运行项目：npm run dev

jsx语法

1， 只有一个根节点

2， {} 表达js

3， {/* 注释*/}

4， class改为className

5， style要使用js对象驼峰写法

渲染

文本渲染

1，普通字符串{变量名}

2，html字符串

<div dangerouslySetInnerHTML={{__html:richStr}}>

条件渲染

1，三元表达式

{条件?<p>true展示</p>:<p>false展示</p>}

2，&&

{条件&&<p>条件成立展示</p>}

循环渲染

1，数组会自动展开

{arr}

2，数组中可以有html节点

3，通过map映射

{arr.map((item,index)=><p key={index}>{item}</p>)}

组件类型

函数数组（推荐使用）

function App(){
   return <>
<div>内容</div>
</>
}
export default App

特点：
1.函数名首字母大写
2. 必须有return 返回节点

类组件

import React, { Component } from 'react';
class APP extends Component {
    state = {  } 
    render() { 
        return ();
    }
}
 
export default APP;

特点：
1. 类名首字母大写
2. 必须有render方法，返回一个节点
3. 需要继承Component

事件（重点）

1. 响应函数

onClick={函数}

onDoubleClick={()=>{this.say()}}

2. 事件传参

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

onClick={()=>{this.show('参数')}}

state（状态与数据）

使用

state的数据是响应式更新的（数据变化，视图自动更新）

{this.state.num}

更新

this.setState({num:val})

this.setState({num:value},()=>{})

表单双向绑定

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

组件

函数组件（功能组件，视图组件）

只有props

类组件（状态组件，容器组件）

this        props        state        refs        生命周期

组件传参

父传子：props

子传父：props+函数

兄弟：先传个父，父传给兄弟

跨层级：context

全局：redux

props特点

props可以是值也可以是函数props是只读

默认props

Counter.defaultProps={属性:默认值，属性2：默认值2}