组件通信、表单处理、生命周期、ref属性、插件使用、ui组件库

一.组件通信

1.父组件向子组件传递数据

父组件: 通过自定义属性传递数据
子组件:通过this.props接收数据

父组件:
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    constructor(){
        super()
        this.state = {
            name:'朱鹏',
            age:25,
        }
    }
    render() {
        const {name,age} = this.state
        return (
            <div className="alert alert-info">
                <h1>父组件</h1>
                <div>name的值为:{name}</div>
                <div>age的值为:{age}</div>
                {/* 引入子组件 */}
                <Child name={name} age={age}></Child>
            </div>
        )
    }
}

子组件
import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        console.log(this.props);
        return (
            <div className="well">
                <h1>子组件</h1>
                <div>name的值为:{this.props.name}</div>
                <div>age的值为:{this.props.age}</div>
            </div>
        )
    }
}

2.子组件向父组件传递数据

父组件: 通过自定义事件接收数据
子组件: 通过this.props调用自定义事件传递数据

父组件:
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    constructor(){
        super()
        this.state = {
            msg:''
        }
    }
    render() {
        const {name,age,msg} = this.state
        return (
            <div className="alert alert-info">
                <h1>父组件</h1>
                <h3>{msg}</h3>
                {/* 引入子组件 */}
                <Child name={name} age={age} message={(e)=>this.getMessage(e)}></Child>
            </div>
        )
    }
    getMessage(name){
        // console.log(name);
        this.setState({msg:name})
    }
}

子组件
import React, { Component } from 'react'

export default class Child extends Component {
    constructor(){
        super()
        this.state = {
            pageTitle:'新闻首页'
        }
    }
    render() {
        // console.log(this.props);
        return (
            <div className="well">
                <h1>子组件</h1>
                <h3>{this.state.pageTitle}</h3>
                <button className="btn btn-success" onClick={()=>this.send()}>发送数据</button>
            </div>
        )
    }
    send(){
        // console.log(this.props);
        this.props.message(this.state.pageTitle)
    }
}

3.非父子通信

1. 通过父传子及子传父来间接实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQ50f4as-1616807986774)(C:\Users\Administrator\Desktop\web1102\day17-react\media\非父子组件通信.gif)]

2.通过events来实现 https://www.npmjs.com/package/events

npm i events --save

实现方式:

// 引入events
var EventEmitter = require('events')

// 得到events对象
var ee = new EventEmitter()

export default ee;

Box1.jsx
import React, { Component } from 'react'
import ee from '../../utils/Events'
export default class Box1 extends Component {
    constructor(){
        super()
        this.state = {
            msg:'王一博'
        }
    }
    render() {
        return (
            <div className="alert alert-info">
                <h1>Box1组件</h1>
                <div>msg的值为:{this.state.msg}</div>
                <button className="btn btn-success" onClick={()=>this.send()}>发送</button>
            </div>
        )
    }
    send(){
        // 触发自定义事件
        ee.emit('message',this.state.msg)
    }
}

Box2.jsx
import React, { Component } from 'react'
import ee from '../../utils/Events'
export default class Box2 extends Component {
    constructor(){
        super()
        this.state = {
            msg:''
        }
    }
    render() {
        ee.on('message',(e)=>{
            // console.log(this);
            this.setState({msg:e})
        })
        return (
            <div className="alert alert-info">
                <h1>Box2组件</h1>
                <div>msg的值为:{this.state.msg}</div>
            </div>
        )
    }
}

二.表单处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dscl7arr-1616807986777)(C:\Users\Administrator\Desktop\web1102\day17-react\media\单项数据流.png)]

手动实现双向数据绑定

import React, { Component } from 'react'

export default class Form extends Component {
    constructor(){
        super()
        this.state = {
            name:'赵丽颖'
        }
    }
    hander(e){
        // console.log(e.target.value);
        this.setState({name:e.target.value})
    }
    render() {
        return (
            <div className="alert alert-info">
                <input className="form-control" onChange={(e)=>this.hander(e)} value={this.state.name} type="text"/>
                <div>name的值为:{this.state.name}</div>
            </div>
        )
    }
}

三.生命周期

定义:

从创建到销毁的过程就是生命周期

钩子函数: 在程序执行过程中,自动被触发的函数称之为钩子函数.

1.创建阶段

• componentWillMount 组件将要挂载
  • 可以操作数据
  • 不能操作dom
  • 执行次数: 1次
• renderjsx模板渲染(将jsx模板渲染给虚拟DOM)
  • 可以操作数据
  • 不能操作dom
  • 执行次数: 1次
• componentDidMount 组件挂载完成
  • 可以操作数据
  • 可以操作dom节点
  • 执行次数:1次
  • 做其他操作: 开发轮播图 发起ajax请求 延时器 计时器

2.更新阶段

• shouldComponentUpdate 应该更新组件吗?

  • 必须有返回值

  • 如果返回true: 表示更新组件
    如果返回false:表示不更新
    在实际开发中false用的比较多.
    	1.有时不希望客户端看到最新更新的数据.
    	2.性能调优
    

  • 参数一: nextProp: 没有获取到最新的props数据

  • 参数二: nextState: 获取到最新的state数据

• componentWillUpdate 组件将要更新

  • 获取state数据是更新之前的数据
  • 获取dom节点文本内容是更新之前的数据
  • 参数一: nextProp: 没有获取到最新的props数据
  • 参数二: nextState: 获取到最新的state数据

• render 渲染jsx模板

  • 获取state数据是更新之后的数据
  • 获取dom节点文本内容是更新之后的数据

• componentWillReceiveProps 组件将要接收props数据

  • 参数一: nextProp: 获取到最新的props数据
  • 参数二: nextState: 没有获取到最新的state数据

• componentDidUpdate组件更新完成

  • 获取state数据是更新之后的数据
  • 获取dom节点文本内容是更新之后的数据
  • 参数一: preProp: 没有获取到更新之前的props数据
  • 参数二: preState: 获取到更新之前的state数据

3.销毁阶段

• componentWillUnmount组件将要销毁

四.ref属性

作用:操作普通元素和子组件

• 操作普通元素
  • 方式一

<div ref="div"></div>
<button className="btn btn-info" onClick={()=>this.getRef()}>获取</button>
 function getRef{
 	  // 方式一
        // console.log(this.refs.div);
        // this.refs.div.style.width = '100px';
        // this.refs.div.style.height = '100px';
        // this.refs.div.style.background = 'green';

 }

• 方式二:

{/* 方式二 */}
{/* dom: 是系统自动注入的参数  是形参 */}
<div ref={dom=>this.add=dom}></div>
<button className="btn btn-info" onClick={()=>this.getRef()}>获取</button>
function getRef(){
    // 方式二
    // console.log(this.add);
    this.add.innerHTML = '远处飘来一阵风,什么风?疯子';
    this.add.style.color = 'aqua';
    this.add.style.background = 'purple';
}

• 方式三

 {/* 方式三 */}
<div ref={this.refAdd}></div>
 <button className="btn btn-info" onClick={()=>this.getRef()}>获取</button>
 function getRef{
 	// console.log(this.refAdd);
        this.refAdd.current.innerHTML = 'haha';
        this.refAdd.current.style.background = 'yellow';
    }
 }

• 操作子组件

<Child ref={dom=>this.child=dom}></Child>
<button className="btn btn-info" onClick={()=>this.getRef()}>获取</button>
function getRef(){
		// console.log(this.child);
        // console.log(this.child.state.msg);
        this.child.message()
}

五.插件使用

1.react-awesome-swiper轮播图插件

使用

npm install react-awesome-swiper --save

import React, { Component } from 'react'
import AwesomeSwiper from 'react-awesome-swiper';
export default class Banner extends Component {
    constructor(){
        super()
        this.swiperRef = null
        this.config = {
            loop : true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
            },
            // Disable preloading of all images
            preloadImages: false,
            // Enable lazy loading
            lazy: true,
            speed: 500,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            pagination: {
              el: '.swiper-pagination',
              bulletElement : 'li',
              hideOnClick :true,
              clickable :true,
            },
            on: {
              slideChange: function () {
                console.log(this.activeIndex);
              },
            },
          };
    }
    render() {
        console.log(this.props);
        return (
            <AwesomeSwiper ref={ref => (this.swiperRef = ref)} config={this.config} className="your-classname">
                <div className="swiper-wrapper">
                    {this.props.imgs.map(item=>(
                         <div className="swiper-slide" key={item}>
                             <img src={item} alt=""/>
                         </div>
                    ))}
                
                </div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
                <div className="swiper-pagination"></div>
            </AwesomeSwiper>
        )
    }
}

Index.jsx

import React, { Component } from 'react'
import Banner from '../components/Banner'
export default class Index extends Component {
    constructor(){
        super()
        this.state = {
            imgs:[
                '/slider/01.jpg',
                '/slider/02.jpg',
                '/slider/03.jpg',
            ]
        }
    }
    render() {
        return (
            <div>
                <Banner imgs={this.state.imgs}></Banner>
            </div>
        )
    }
}

六.UI组件库

ant-design组件库

安装

cnpm i antd --save

安装图标库

npm install --save @ant-design/icons