超级详细react笔记(九)组件进阶篇

1 引入

• 了解组件的基本使用和组件之间传值后,需要深度剖析组件
• 使组件化更明显
• 降低组件之间的耦合度
• 增强组件的独立性

2 组件

• 基于鼠标移动讲解

2.1 组件的props

• children.js

import React,{Component} from 'react'
export default class Children1 extends Component{
    constructor() {
        super();
        this.state={
            x:0,
            y:0
        }
    }
    componentDidMount() {
        window.addEventListener('mousemove',this.handle)
    }
    handle=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    render() {
        return this.props.render(this.state)
    }
}

• APP.js

import React,{Component} from 'react'
import {Children1} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Children1 render={
                    data=>{
                        return <div>
                            x:{data.x}
                            y:{data.y}
                        </div>
                    }
                }/>
                <Children1
                    render={
                        data=>{
                            return <div>
                                <img
                                    style={{position:'absolute',
                                        left:data.x+'px',top:data.y+'px'}}
                                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2436024046,2080035606&fm=26&gp=0.jpg" alt=""/>
                            </div>
                        }
                    }
                />
            </div>
        )
    }
}

2.2 组件的children(推荐)

2.2.1 使用

• 优点:方便校验,方便控制

• children.js

import React,{Component} from 'react'
export default class Children1 extends Component{
    constructor() {
        super();
        this.state={
            x:0,
            y:0
        }
    }
    componentDidMount() {
        window.addEventListener('mousemove',this.handle)
    }
    handle=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    render() {
        return this.props.children(this.state)
    }
}

• APP.js

import React,{Component} from 'react'
import {Children1} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Children1 >
                    {
                        data=>{
                            return <div>
                                x:{data.x}
                                y:{data.y}
                            </div>
                        }
                    }
                </Children1>
                <Children1
                >
                    {
                        data=>{
                            return <div>
                                <img
                                    style={{position:'absolute',
                                        left:data.x+'px',top:data.y+'px'}}
                                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2436024046,2080035606&fm=26&gp=0.jpg" alt=""/>
                            </div>
                        }
                    }
                </Children1>
            </div>
        )
    }
}

2.2.2 校验

children.js

import React,{Component} from 'react'
import PropTypes from 'prop-types'
export default class Children1 extends Component{
    constructor() {
        super();
        this.state={
            x:0,
            y:0
        }
    }
    static propTypes = {
        children:PropTypes.func.isRequired
    }
    componentDidMount() {
        window.addEventListener('mousemove',this.handle)
    }
    handle=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    render() {
        return this.props.children(this.state)
    }
}

2.3 高级组件基本封装

• 利用函数去封装组件
• 参数为一个组件
• withMove/index.js

import React,{Component} from 'react'
import move from './withMove'
function Child1 (data){
    return(
        <div>
            x:{data.x}
            y:{data.y}
        </div>
    )
}
function Child2(data){
    return (
        <div>
            <img
                style={{position:'absolute',
                    left:data.x+'px',top:data.y+'px'}}
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2436024046,2080035606&fm=26&gp=0.jpg" alt=""/>
        </div>
    )
}

const WithChild1 = move(Child1)
const WithChild2 = move(Child2)
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <WithChild1/>
                <WithChild2/>
            </div>
        )
    }
}

• APP.js

import React,{Component} from 'react'
import PropTypes from 'prop-types'
export default function move (WarpCom){
    class Children1 extends Component{
        constructor() {
            super();
            this.state={
                x:0,
                y:0
            }
        }
        static propTypes = {
            children:PropTypes.func.isRequired
        }
        componentDidMount() {
            window.addEventListener('mousemove',this.handle)
        }
        componentWillUnmount() {
            window.removeEventListener('mousemove',this.handle)
        }

        handle=(e)=>{
            this.setState({
                x:e.clientX,
                y:e.clientY
            })
        }
        render() {
            return <WarpCom {...this.state}/>
        }
    }
    return Children1
}

2.4 高级组件组件化封装

• child1.js

import React,{Component} from 'react'
import move from '../../withMove'
class Child1 extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>
                x:{this.props.x}
                y:{this.props.y}
            </div>
        )
    }
}
export default move(Child1)

• child2.js

import React,{Component} from 'react'
import move from '../../withMove'
 class Child2 extends Component{
    constructor() {
        super();
    }
    render() {
        return (
            <div>
                <img
                    style={{position:'absolute',
                        left:this.props.x+'px',top:this.props.y+'px'}}
                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2436024046,2080035606&fm=26&gp=0.jpg" alt=""/>
            </div>
        )
    }
}
export default move(Child2)

• APP.js

import React,{Component} from 'react'
import {Child1,Child2} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Child1/>
                <Child2/>
            </div>
        )
    }
}

2.5 优化

• withMove.js

import React,{Component} from 'react'
import PropTypes from 'prop-types'
export default function move (WarpCom){
    class Children1 extends Component{
        constructor() {
            super();
            this.state={
                x:0,
                y:0
            }
        }
        static propTypes = {
            children:PropTypes.func.isRequired
        }
        componentDidMount() {
            window.addEventListener('mousemove',this.handle)
        }
        componentWillUnmount() {
            window.removeEventListener('mousemove',this.handle)
        }

        handle=(e)=>{
            this.setState({
                x:e.clientX,
                y:e.clientY
            })
        }
        render() {
            return <WarpCom {...this.state}/>
        }
    }
    Children1.displayName=`$withMove${displayName(WarpCom)}`
    return Children1
}
function displayName(Warp){
    return Warp.displayName||Warp.name|| 'component'
}

3 源码

• 码云地址: https://gitee.com/lakerzhang/react.git

4 案例

4.1 组件化封装

• cat.js

import React from 'react'
import Catch from '../../withMove/catch'
class Cat extends React.Component{
    constructor() {
        super();
        this.state={
            left:10
        }
    }
    render() {
        return(
            <div style={{position:'absolute',
                width:'100px',
                left:this.state.left+'px',
                zIndex:999}}>
                <h2>猫</h2>
                <button onClick={this.click}>加速</button>
                <button onClick={this.uClick}>减速</button>
                <img
                    style={{
                    width:'100px',
                    // left:
                    // height:
                    }}
                    src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2569538891,2153045923&fm=26&gp=0.jpg'/>
            </div>
        )
    }
    click=()=>{
        this.setState(state=>{
           return{
               left:state.left+=20
           }
        })
    }
    uClick=()=>{
        this.setState(state=>{
            return{
                left:state.left-=20
            }
        })
    }
}
export default Catch(Cat)

• mouse.js

import React from 'react'
export default class Mouse extends React.Component{
    constructor() {
        super();
        this.state={
            left:100
        }
    }
    render() {
        return(
            <div style={{position:'absolute',
                width:'100px',
                left:this.state.left+'px'}}>
                <h2>老鼠</h2>
                <button onClick={this.click}>加速</button>
                <button onClick={this.uClick}>减速</button>
                <img
                    style={{
                        width:'100px',
                        // height:
                    }}
                    src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1147108782,3583726862&fm=26&gp=0.jpg'/>
            </div>
        )
    }
    click=()=>{
        this.setState(state=>{
            return{
                left:state.left+=20
            }
        })
    }
    uClick=()=>{
        this.setState(state=>{
            return{
                left:state.left-=20
            }
        })
    }
}

• APP.js

import React,{Component} from 'react'
import {Cat,Mouse} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Cat/>
                <Mouse/>
            </div>
        )
    }
}

4.2 高级组件封装

---