react第二天

最新推荐文章于 2024-02-26 10:46:09 发布

小余童鞋11

最新推荐文章于 2024-02-26 10:46:09 发布

阅读量201

点赞数

文章标签： react

本文链接：https://blog.csdn.net/Little_Fishs/article/details/104974883

版权

day19笔记

如何修改React端口号

node_modules=>react-scripts=>scripts=>start.js
大概60行的位置
看到代码 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
把3000修改成你想要的端口号
记得重启当前服务器
尽量不要用vscode控制台 ①因为vsCode控制台有时候会卡顿 ②你容易忘记已经开过了同一个端口号，会造成服务冲突
大家不要照着我的代码敲，大家白天听逻辑，晚上或者休息的时候，回顾自己敲，如果忘了一些流程，你就回顾下笔记，最后整理自己的笔记。

回顾

react的概念
脚手架的创建
jsx
创建组件的方式（函数创建,类的创建）
两种方式的创建区别：
①函数创建没有生命周期，类的创建有生命周期，学到render()渲染，constructor() 初始化
②函数创建方式没有state,类的创建方式有state（状态机）

一、事件

事件绑定=>传递参数=>event=>阻止默认事件、阻止事件传播=>每个框架会有自己独特的方法
事件的案例（绑定方法）

    //箭头函数触发
    getInfo() {
        console.log(this, 'this')
        console.log(this.state.num, '我被触发了')

    }
    //bind方法触发
    getInfoA() {
        console.log(this.state.num, '我you被触发了')
    }
                {/* 
                这种方法没有this
                <button onClick={this.getInfo}>点击我触发</button> */}
                {/* 箭头函数 */}
                <button onClick={() => this.getInfo()}>点我触发，我是箭头函数</button>
                <hr />
                {/* bind 绑定方法 */}
                <button onClick={this.getInfoA.bind(this)}>我是触发事件的另一种方法</button>
                <hr />

事件的案例（传递参数）

    //箭头函数传递参数
    getMsg(n, m) {
        console.log(n, m, '参数')
    }
    //bind传递参数
    getMsgA(n, m) {
        console.log(n, m, '参数')
    }
{/* 箭头函数传递参数的时候（）里面都是实参 */}
                <div>
                    <button onClick={() => { this.getMsg(10, 30) }}>我要传递参数</button>
                </div>
                {/* bind 绑定方法传递参数的时候（）第一个参数是this，后面都是实参 */}
                <div>
                    <button onClick={this.getMsgA.bind(this, 50, 80)}>bind传递参数</button>
                </div>

事件的案例（传递Event）

    //箭头函数传递event
    getEvent(e) {
        console.log(e, '参数')
    }
    //bind传递event
    getEventA(e) {
        console.log(e, '参数')
    }
 {/* 箭头函数event 没有隐式传参 */}
                <div>
                    <button onClick={(event) => { this.getEvent(event) }}>我要传递event</button>
                </div>
                {/* bind 绑定方法传event 有隐式传参*/}
                <div>
                    <button onClick={this.getEventA.bind(this)}>bind传递event </button>
                    {/* <button onClick={this.getEventA.bind(this,event)}>bind传递event </button> */}
                </div>

事件的案例（阻止默认事件）

    //触发右键菜单的事件
    getMenu(e) {
        //阻止默认事件
        e.preventDefault();
        console.log(e, '右键了')
        //return false 这种方法 在react中不好用

    }
    //触发右键菜单的事件
    getMenuA(e) {
        //阻止默认事件
        e.preventDefault();
        console.log(e, '右键了BIND')
        //return false 这种方法 在react中不好用

    }
{/* 触发发右键菜单事件 */}
                <div onContextMenu={(event) => this.getMenu(event)} className='box'>
                    我是右键
                </div>
                <div onContextMenu={this.getMenuA.bind(this)} className='box'>
                    我是右键
                </div>

事件的案例（阻止冒泡事件）

    //小盒子事件
    getBox(e) {
        //阻止冒泡事件
        e.stopPropagation();
        console.log('我是小盒子')
    }
    //小盒子事件bind
    getBoxBind(e) {
        //阻止冒泡事件
        e.stopPropagation();
        console.log('我是小盒子')
    }
    //大盒子事件
    getBigBox() {
        console.log('我是大盒子')
    }
<div className='bigBox' onClick={() => this.getBigBox()}>
                    <div className='box' onClick={(event) => this.getBox(event)}>
                    </div>
                </div>
                <hr />
                <div className='bigBox' onClick={() => this.getBigBox()}>
                    <div className='box' onClick={this.getBoxBind.bind(this)}>
                    </div>
                </div>

二、props

父子组件传值
当父组件要传递props发生变化的时候，触发组件重现渲染，函数中是重新渲染，类是重新触发render()
函数

function fnDemo(props) {
    //子组件（函数创建方式，接收父组件数据，利用的是形参，一般都写成props）props 是一个对象
    //函数创建父子组件取值，props.XX
    console.log(props, 'aaaa')
    return (
        <div className='props' >
            <h1>函数创建方式</h1>
            <h1>来自老父亲的爱-----{props.num}</h1>
            <h2>{props.info}</h2>
        </div>
    );
}

    constructor(props) {//初始化
        super(props)
        //在初始化没有props,如果你一定要在constructor用props，那么就那super(props)去接收一下，
        //super(props)的接收 只是用来在constructor得到this.props
        console.log(this.props,'你是谁')
    }
    render() {
        console.log(this,'类')
        return (
            <div className='props'>
                <h1>我是classDemo</h1>
        <h1>来自老父亲的爱---{this.props.num}</h1>
            </div>
        )
    }

三、state

修改state的唯一方法是 setState()
类的创建方式有state,函数创建方式没有state
setState() 是异步方法
setState()会触发render()，会重新渲染

    constructor() {
        console.log('我被初始化了')
        super()
        this.state = {
            num: 1
        }
    }
    //累加事件
    add() {
        //修改累加 num
        //   this.state.num++ 这种方法不行！！！！ 不能直接去修改state状态 要通过一个方法，setState()
        //setState() 是异步方法
        //setState会触发render()，会重新渲染
        //！！！接收接口返回参数的时候赋值 必须用setState()
        this.setState({
            num: this.state.num + 1
        })
    }
    render() {
        return (
            <div>
                <h1>我是state组件</h1>
                <button onClick={() => this.add()}>点击我给num+1</button>
                <h1>我是num,我变化了---{this.state.num}</h1>
            </div>
        )
    }

state用法

① 只有类的定义方式中才有state
② 修改state的唯一方式是setState()
③ 取值方法可以利用es6中的解构赋值方法去省略this.state
④ 当修改state里面对象或者数组的时候，我们先把state的对象和数组去赋值一个变量，然后去修改变量，之后再重新给state赋值，赋值的时候用setState()
⑤setState()它是一个异步操作,利用callback回调函数，可以强制同步
⑥有一些值不被用于视图渲染，那么就没必要在state定义，保证state它是最少数据集合

    constructor() {
        console.log('初始化')
        super()
        this.timer = null
        this.state = {//一般是视图要渲染的属性 才定义到这个state中
            num: 50,
            str: '我是一个字符串',
            newsList: [
                {
                    id: 1,
                    info: '美国研制疫苗进入人体实验阶段？？？？？'
                },
                {
                    id: 2,
                    info: '意大利封锁全国。。。。'
                },
                {
                    id: 3,
                    info: '塞尔维亚感谢中国人民！！！'
                },
            ],
            obj: {
                name: '路飞'
            },
            x: 100,
            y: 50,
            time:new Date()
        }
    }
    //删除事件
    del(i) {
        //const {newsList} = this.state 相当于 let newsList = this.state.newsList
        const { newsList } = this.state
        newsList.splice(i, 1)
        console.log(newsList, '删除之后的数组')
        //!!!***当数组发生变化的时候，我要重新去更改一下 state数据
        this.setState({
            newsList
        })
    }
    //变更名字事件
    changeName(n) {
        console.log(n, '形参')
        //let obj = this.state.obj 
        //结构
        let { obj } = this.state
        obj.name = n
        this.setState({
            obj
        })
    }
    //x,y事件
    changeInfo() {
        //实现x的变化 直接写两个setState()是不行 异步
        //强制同步 目的执行一个结果，下次用到这个结果去赋值
        //setState这个方法第二个参数是回调函数，如果不需要刻意省略，需要就是强制同步，先执行完赋值，再执行回调函数中的内容
        this.setState({
            x: this.state.x + 5
        }, () => {//这里面是异步操作，也可以在这里面调取axios
            console.log(this.state.x,'x的新值')
            this.setState({
                y: this.state.x
            })
        })
    }
    //利用生命周期 vue (挂载 mounted)
    componentWillMount(){
        console.log('将要挂载')
     this.timer=   setInterval(()=>{
            console.log(1111)
            this.setState({
                time:new Date()
            })
        },1000)
    }
    //销毁组件 清除定时器等等，为防止内存泄漏
    componentWillUnmount(){
        //将要卸载
        clearInterval(this.timer)
    }
    render() {
        console.log('渲染')
        const { num, str, newsList, obj, x, y,time } = this.state
        return (
            <div>
                <h1>我是state案例</h1>
                <h1>购买数量是---{this.state.num}</h1>
                <h1>信息内容是：----{this.state.str}</h1>
                <hr />
                <div>解构赋值</div>
                <h1>数量是==={num}</h1>
                <h1>取字符串的值---{str}</h1>
                <hr />
                <ul>
                    <li>新闻大事记</li>
                    {
                        newsList.map((item, i) => {
                            return <li key={item.id}>
                                <h1>{i + 1}、新闻标题：{item.info}</h1>
                                <button onClick={this.del.bind(this, i)}>删除</button>
                            </li>
                        })
                    }
                </ul>
                <hr />
                <h1>我是名字是--{obj.name}</h1>
                <div>
                    <button onClick={() => this.changeName('三刀流')}>点击我变换名字</button>
                </div>
                <hr />
                {/* 需求： 我给x累加（+5），得到之后的值赋给Y */}

                <h1>我是x值----{x}</h1>
                <h1>我是Y值----{y}</h1>
                <button onClick={this.changeInfo.bind(this)}>累加x,得到的结果赋值给Y</button>
                <hr/>
                <h1>当前时间是{time.toLocaleTimeString()}</h1>
            </div>
        )
    }

四、组件通信

vue组件通信
父子组件
子父组件
兄弟组件 Vuex状态管理

React父子组件通信案例
father.js 动漫和电影组件切换显示

    constructor(){
        super()
        this.state={
            isShow:true
        }
    }
    //切换事件
    getShow(n){
        this.setState({
            isShow :n
        })
    }
    render(){
        const {isShow} = this.state
        return(
            <div className='info'>
                <h1>我是父组件</h1>
                <div>
                    <button onClick={()=>this.getShow(true)}>动漫</button>
                    <button onClick={this.getShow.bind(this,false)}>电影</button>
                </div>
                {isShow ?  <Comic></Comic> : <Movie></Movie>}
            </div>
        )
    }

comic.js 动漫组件

   constructor(){
        super()
        this.state={
            comicList:[
                {
                    id:1,
                    img:require('../../assets/images/1.jpg'),
                    name:'哪吒之魔童降世'
                },
                {
                    id:2,
                    img:require('../../assets/images/2.jpg'),
                    name:'海贼王'
                },
                {
                    id:3,
                    img:require('../../assets/images/3.jpg'),
                    name:'葫芦兄弟'
                },
            ]
        }
    }
    render(){
        const {comicList} = this.state
        return(
            <div className='info clear'>
                <h1>我是动漫页面</h1>
                {
                    comicList.map(item=>{
                        console.log(item,'遍历对象')
                        return <Data key={item.id} d={item}></Data>
                    })
                }
            </div>
        )
    }

movie.js 电影组件

   constructor(){
        super()
        this.state={
            movieList:[
                {
                    id:1,
                    img:require('../../assets/images/4.jpg'),
                    name:'囧妈'
                },
                {
                    id:2,
                    img:require('../../assets/images/5.jpg'),
                    name:'中国机长'
                },
                {
                    id:3,
                    img:require('../../assets/images/6.jpg'),
                    name:'电影'
                },
            ]
        }
    }
    render(){
        console.log(this.state.movieList,'电影列表')

        return(
            <div className='info clear'>
                <h1>我是电影界面</h1>
                {
                    this.state.movieList.map(item=>{
                        return <Data d={item} key={item.id}></Data>
                    })
                }
            </div>
        )
    }

data.js 共通的视图组件

    render() {
        console.log(this.props, '父组件数据')
        const { d:{img,name} } = this.props
        return (
            <div className='item'>
                <img src={img} alt="" />
                <p className='name'>名称：{name}</p>
            </div>
        )
    }