超级详细的react笔记(五)入门总结篇

概述

• 使用了create-react-app脚手架
• node
• npm
  

1 基本使用

• 使用脚手架创建一个项目

1.1 创建

• 执行命令 安装

npm i -g create-react-app

• 执行命令 创建 后面跟项目名称
  • 在次过程中安装了react react-dom

create-react-app lay

1.2 配置(可选)

• 在项目还未开发前,执行npm eject 可看详细配置

yarn eject

1.3 运行

• 执行命令运行项目

npm start

2 语法

• 脚手架支持jsx
  • javaScriptXml 支持在javaScript里面写html代码,比html语言更严谨

2.0 项目结构

2.1 数据使用

• 创建
• 渲染
• {} 直接渲染

2.1.1 创建式

• index.js
• React.createElement('div',null,'hello world')
  • 第一个参数:标签
  • 第二个参数:属性(对象)
  • 第三个参数:内容
  • 第n个参数: 内容
• ReactDOM.render()
  • 第一个参数:要渲染的dom结构
  • 第二个参数:要挂载的元素节点

import React from 'react';
import ReactDOM from 'react-dom';
const myDiv = React.createElement('div',null,'hello world')
ReactDOM.render(
    myDiv,
  document.getElementById('root')
);

2.1.2 嵌入式

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    <div>
        hello world
    </div>,
    document.getElementById('root')
);

2.1.3 定义式

• index.js
• 脚手架配置了jsx,支持此语法

import React from 'react';
import ReactDOM from 'react-dom';
const myDiv=<div>
    hello world
     </div>
ReactDOM.render(myDiv,
    document.getElementById('root')
);

2.2 属性绑定

2.2.1 绑定属性

• {} 绑定属性

import React from 'react';
import ReactDOM from 'react-dom';
const myID='my'
const myDiv=<div id={myID}>hello world </div>
ReactDOM.render(myDiv,
    document.getElementById('root')
);

2.3 渲染

• 条件渲染
• 数据渲染
• 列表渲染

2.3.1 条件渲染

import React from 'react';
import ReactDOM from 'react-dom';
const flag=false
ReactDOM.render(
    <div>
        张张帅不帅?
        <h1>{flag?'不帅':'帅'}</h1>
    </div>,
  document.getElementById('root')
);

2.3.2 数据渲染

• 直接{} 渲染数据

import React from 'react';
import ReactDOM from 'react-dom';
const msg="我是提示信息"
const myDiv=<div>{msg} </div>
ReactDOM.render(myDiv,
    document.getElementById('root')
);

2.3.3 列表渲染

• 使用map
  • 返回的是一个新数组,并且每一项可以更改

import React from 'react';
import ReactDOM from 'react-dom';
const list=[
    {
        id:1,
        name:'lay'
    },
    {
        id:2,
        name: 'laker'
    }
]
ReactDOM.render(
    <div>
       <div>{list.map(el=><h1 key={el.id}>{el.id}======{el.name}</h1>)}</div>
    </div>,
    document.getElementById('root')
);

2.4 样式绑定

• style{} 为花括号
• className'' 为引号
• classnames+className{} 为花括号

2.4.1 style

• {{}} 第一个花括号代表绑定属性,第二个代表值为一个对象

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    <div>
        <h1 style={{color:'red'}}>hello world</h1>
    </div>,
  document.getElementById('root')
);

2.4.2 className

• 在样式文件里面编写代码
• 在index.js中引入
• className='myClass'

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
ReactDOM.render(
    <div>
        <h1 className='myClass'>hello world</h1>
    </div>,
    document.getElementById('root')
);

2.4.3 classnames依赖

• 下载依赖cnpm i classnams -S
  • -S 是指开发和生产模式都需要用到依赖
  • -D 是指开发中使用到的依赖
• 使用ClassNames 是一个函数,参数是一个对象

import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames'
import './index.css'
ReactDOM.render(
    <div>
        <h1 className={ClassNames({myClass:true})}>hello world</h1>
    </div>,
    document.getElementById('root')
);

2.5 组件使用

• 分类:有状态组件 和无状态组件
• 有状态组件分类:可控组件和不可控组件
  

2.5.0 项目结构

2.5.1 有状态组件

• status/index.js

import React,{Component} from 'react'
export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={}// 存放数据
    }
    render() {
        return(
           <div>
               我是有状态组件
           </div>
        )
    }
}

2.5.2 无状态组件

• unstatus/index.js

import React,{Component} from 'react'
export default function Unstatus(){
    return(
        <div>我是无状态组件</div>
    )
}

• components/index.js

import Unstatus from "./unstatus";
import Status from './status'
export {
    Unstatus,
    Status
}

• api.js 按需引入

import React,{Component} from 'react'
import {Unstatus,Status} from './components'
export default class Api extends Component{
    constructor() {
        super();
    }
    render() {
        return(
           <div>
               <Unstatus/>
               <Status/>
           </div>
        )
    }
}

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Api from "./api";
ReactDOM.render(
    <div>
       <Api/>
    </div>,
    document.getElementById('root')
);

2.5.3 可控组件和不可控组件

• 区别:有无state

1 可控组件

• 一般用于数据的双向绑定

import React,{Component} from 'react'

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={}// 存放数据
    }
    render() {
        return(
           <div>
               我是可控组件
           </div>
        )
    }
}

2 不可控组件

• 一般用于获取数据
• 数据一般来源于父组件 并且不能修改

import React,{Component} from 'react'

export default class Index extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>
                我是不可控组件
            </div>
        )
    }
}

2.6 事件绑定

• 普通函数内部bind 使用
• 普通函数外部bind使用
• 箭头函数内部
• 箭头函数外部

2.6.1 内部bind

import React,{Component} from 'react'

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={}// 存放数据
    }
    render() {
        return(
           <div>
               <button onClick={this.click.bind(this)}>点击</button>
           </div>
        )
    }
    // 同级定义方法
    click(){
        console.log('已经点击')
    }
}

2.6.2 外部bind

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={}// 存放数据
        this.click=this.click.bind(this)
    }
    render() {
        return(
           <div>
               <button onClick={this.click}>点击</button>
           </div>
        )
    }
    // 同级定义方法
    click(){
        console.log('已经点击')
    }
}

2.6.3 箭头函数内部

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={}// 存放数据
    }
    render() {
        return(
            <div>
                <button onClick={()=>this.click()}>点击</button>
            </div>
        )
    }
    // 同级定义方法
    click(){
        console.log('已经点击')
    }
}

2.6.4 箭头函数外部

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={}// 存放数据
    }
    render() {
        return(
            <div>
                <button onClick={this.click}>点击</button>
            </div>
        )
    }
    // 同级定义方法
    click=()=>{
        console.log('已经点击')
    }
}

2.7 组件引入方式

• ES6的普通引入
• ES6的优雅引入

2.7.1 普通引入

import Unstatus from "./unstatus";
import Status from './status'
export {
    Unstatus,
    Status
}

2.7.2 优雅引入

export {default as Unstatus} from './unstatus'
export {default as Status} from './status'

2.8 state操作

2.8.1 修改state数据

• 使用this.setState({},callback) 可接受两个参数

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={
            msg:'我是修改信息'
        }// 存放数据
    }
    render() {
        return(
            <div>
                <h1>{this.state.msg}</h1>
                <button onClick={this.click}>点击</button>
            </div>
        )
    }
    // 同级定义方法
    click=()=>{
        this.setState({
            msg:'我是被修改的信息'
        },()=>{
            console.log(this.state.msg)
        })
    }
}

2.8.2 修改

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={
            count:0
        }// 存放数据
    }
    render() {
        return(
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.click}>点击</button>
            </div>
        )
    }
    // 同级定义方法
    click=()=>{
        this.setState((state)=>{
           return{
              count:state.count+=1
           }
        })
    }
}

2.9 数据的双向绑定

2.9.1 可控组件的绑定(1)

• onChange={}

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={
            msg:"修改信息"
        }// 存放数据
    }
    render() {
        return(
           <div>
               <input onChange={this.change} value={this.state.msg}/>
           </div>
        )
    }
    // 同级定义方法
    change=(e)=>{
        //1 通过默认事件获取数据
        this.setState({
            msg:e.target.value
        },()=>{
            console.log(this.state.msg)
        })
    }
}

2.9.1 可控组件的绑定(2)

export default class Index extends Component{
    constructor() {
        super();// 必须存在,并且第一个位置
        this.state={
            msg:"修改信息"
        }// 存放数据
    }
    render() {
        return(
           <div>
               <input onChange={this.change} value={this.state.msg}/>
           </div>
        )
    }
    // 同级定义方法
    change= async (e)=>{
        //1 通过默认事件获取数据
       await this.setState({
            msg:e.target.value
        })
        console.log(this.state.msg)
    }
}

2.10 标签的ref属性

• 类似选择器
• 非可控组件 获取数据的应用

2.10.1 标签式使用

import React,{Component} from 'react'

export default class Index extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>
               <input type='text' value='我是数据'  ref='inputRef' readOnly/>
               <button onClick={this.click}>点击</button>
            </div>
        )
    }
    click=()=>{
        console.log(this.refs.inputRef.value)
    }
}

2.10.2 创建式使用

import React,{Component,createRef} from 'react'

export default class Index extends Component{
    constructor() {
        super();
        this.inputRef= createRef()
    }
    render() {
        return(
            <div>
               <input type='text' value='我是数据'  ref={this.inputRef} readOnly/>
               <button onClick={this.click}>点击</button>
            </div>
        )
    }
    click=()=>{
        console.log(this.inputRef.current.value)
    }
}