Java教程

组件间通讯及钩子函数

本文主要是介绍组件间通讯及钩子函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

组件的props

  • 组件是封闭的，要接收外部数据应该通过props来实现

  • props的作用：接收传递给组件的数据

  • 传递数据：给组件标签添加属性

  • 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

  • 示例：

    /*
* props  函数组件
* */
const Hello = props => {
    console.log(props);
    return (
        <div>
            props: {props.name}
        </div>
    )
}

ReactDOM.render(<Hello name='xiaohao' age={18}/>, document.getElementById('root'))

/*
* props  类组件
* */

class Hello extends React.Component {
    render(){
        console.log(this.props)
        return (
            <div>
                props: {this.props.name}
            </div>
        )
    }
}


ReactDOM.render(<Hello name='xiaohao' age={18}/>, document.getElementById('root'))

  • 特点：

    • 1、可以给组件传递任意类型的数据

      • 示例：

        class Hello extends React.Component {
    
    render(){
        console.log(this.props)
        this.props.fn()
        return (
            <div>
                props: {this.props.name}
                {this.props.zujian}
            </div>
        )
    }
}


ReactDOM.render(
    <Hello 
    name='xiaohao' 
    age={18}
    list={[
        1, 2, 3
    ]}
    fn = {() => console.log('这是一个函数')}
    zujian = {<p>这是一个p标签</p>}
    />, document.getElementById('root')
)

    • 2、props是只读的对象，只能读取属性的值，无法修改对象

    • 3、注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props

      • 示例：

        class Hello extends React.Component {

    constructor(props){
        super(props)
        console.log(props);
    }
    
    render(){
        console.log(this.props)
        this.props.fn()
        return (
            <div>
                props: {this.props.name}
                {this.props.zujian}
            </div>
        )
    }
}


ReactDOM.render(
    <Hello 
    name='xiaohao' 
    age={18}
    list={[
        1, 2, 3
    ]}
    fn = {() => console.log('这是一个函数')}
    zujian = {<p>这是一个p标签</p>}
    />, document.getElementById('root')
)

组件通讯的三种方式

  • 1、父组件 -> 子组件

    • 1、父组件提供要传递的state数据

    • 2、给子组件标签添加属性，值为state中的数据

    • 3、子组件中通过props接收父组件中传递的数据

    • 示例：

      class Parent extends React.Component {
    state = {
        lastName: '顾'
    } 
    render(){
        return (
            <div className="parent">
                父组件：
                <Child name={this.state.lastName}/>
            </div>
        )
    }
}

const Child = props => {
    console.log(props);
    return (
        <div className="child">
            <p>子组件接收到父组件的数据：{props.name}</p>
        </div>
    )
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

  • 2、子组件 -> 父组件

    • 思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

    • 1、父组件提供一个回调函数（用于接收数据）

    • 2、将该函数作为属性的值，传递给子组件

    • 3、子组件通过props调用回调函数

    • 4、将子组件的数据作为参数传递给回调函数

    • 示例：

      class Parent extends React.Component {
    state = {
        msg: ''
    }
    getChildMsg = data => {
        console.log('接收到儿子传来的消息', data);
        this.setState({
            msg: data
        })
    }
    render(){
        return (
            <div className="parent">
                父组件：{this.state.msg}
                <Child getMsg={this.getChildMsg}/>
            </div>
        )
    }
}

class Child extends React.Component {
    state = {
        msg: '刷抖音'
    }
    
    handleClick = () => {
        // 子组件调用父组件中传过来的回调函数
        this.props.getMsg(this.state.msg)
    }
    render(){
        return (
            <div className="child">
                子组件：
                <button onClick={this.handleClick}>点我</button>
            </div>
        )
    }
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

    • 注意：回调函数中this指向问题！！！

  • 3、兄弟组件

    • 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

    • 思想：状态提升

    • 公共父组件职责:1、提供共享状态 2、提供操作共享状态的方法

    • 要通讯的子组件只需通过props接收状态或操作状态的方法

    • 示例：

      class Content extends React.Component {

    state = {
        count: 0
    }

    onIncrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render(){
        return (
            <div>
                <Child1 count={this.state.count}/>
                <Child2 onIncrement={this.onIncrement}/>
            </div>
        )
    }
}


class Child1 extends React.Component {
    render(){
        return (
            <h1>计数器：{this.props.count}</h1>
        )
    }
}

class Child2 extends React.Component {
    render(){
        return (
            <button onClick={this.props.onIncrement}>+1</button>   
        )
    }
}

ReactDOM.render(<Content/>, document.getElementById('root'))

Context

  • 更好的姿势：使用Context

  • 作用：跨组件传递数据（比如：主题、语言等）

  • 使用步骤：

    • 1、调用React.createContext()创建Provider（提供数据）和Consumer（消费数据）两个组件。

    • 2、使用Provider组件作为父节点。

    • 3、设置value属性，表示要传递的数据。

    • 4、调用Consumer组件接收数据。

    • 示例：

      const { Provider, Consumer } = React.createContext()

class App extends React.Component {
    render (){
        return (
            <Provider value="小浩">
                <div>
                    父组件
                    <Node/>
                </div>
            </Provider>
        )
    }
}

const Node = props => {
    return (
        <div className="node">
            <SubNode/>
        </div>
    )
}

const SubNode = props => {
    return (
        <div className="subnode">
            <Child/>
        </div>
    )
}

const Child = props => {
    return (
        <div className="child">
            我是子组件
            <Consumer>
                {data => <span>我是子节点：{data}</span>}
            </Consumer>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

    • 总结：

      • 1、如果两个组件是远方亲戚（比如：嵌套多层）可以使用Context实现组件通讯
      • 2、Context提供了两个组件：Provider和Consumer
      • 3、Provider组件：用来提供数据
      • 4、Consumer组件：用来消费数据

props深入

  • children属性

    • children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性。

    • children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）。

    • 示例：

      // const App = props => {
//     console.log(props);
//     return (
//         <div>
//             <h1>组件标签的子节点：</h1>
//             {props.children}
//         </div>
//     )
// }

// ReactDOM.render(<App>我是app</App>, document.getElementById('root'))


// const App = props => {
//     console.log(props);
//     return (
//         <div>
//             <h1>组件标签的子节点：</h1>
//             {props.children}
//         </div>
//     )
// }

// ReactDOM.render(<App><p>我是一个p标签</p></App>, document.getElementById('root'))


const App = props => {
    console.log(props);
    props.children()
    return (
        <div>
            <h1>组件标签的子节点：</h1>
        </div>
    )
}

ReactDOM.render(<App>{() => console.log('我是一个函数')}</App>, document.getElementById('root'))

  • props校验

    • 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据。

    • 如果传入的数据格式不对，可能会导致组件内部报错

    • 关键问题：组件的使用者不知道明确的错误原因

    • props校验：允许在创建组件的时候，就指定props的类型、格式等

    • 作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性

    • 使用步骤：

      • 1、安装包prop-types（yarn add prop-types / npm i props-types ）

      • 2、导入prop-types包

      • 3、使用组件名：propTypes={}来给组件的props添加校验规则

      • 4、校验规则通过PropTypes对象来指定

      • 示例：

        import PropTypes from 'prop-types'
const App = props => {
    const arr = props.colors
    const lis = arr.map((item, index) => (<li key={index}>{item.name}</li>))
    return <ul>{lis}</ul>
}
App.propTypes = {
    colors: PropTypes.array
}

ReactDOM.render(<App colors={[{name: 'niu'}]} />, document.getElementById('root'))

    • 约束规则

      • 1、常见类型：array、bool、func、number、object、string

      • 2、React元素类型：element

      • 3、必填项：isRequired

      • 4、特定结构的对象：shape({})

      • 示例：

        import PropTypes from 'prop-types'
const App = props => {
    return (
        <div>
            <h1> props校验</h1>
        </div>
    )
}
// 添加props校验
// 属性 a 的类型：数值（number）
// 属性 fn 的类型：函数（func）并且为必填项
// 属性 tag 的类型： React元素（element）
// 属性 filter 的类型： 对象（{area: '上海', price: 1999}）
App.propTypes = {
    a: PropTypes.number,
    fn: PropTypes.func.isRequired,
    tag: PropTypes.element,
    filter: PropTypes.shape({
        area: PropTypes.string,
        price: PropTypes.number
    })
}

ReactDOM.render(<App fn={() => console.log('校验函数')} />, document.getElementById('root'))

    • props的默认值

      • 场景：分页组件 -> 每页显示条数

      • 作用：给props设置默认值，在未传入props时生效

      • 示例：

        const App = props => {
    console.log(props);
    return (
        <div>
            <h1> props默认值 {props.pageSize}</h1>
        </div>
    )
}

// 添加props默认值
App.defaultProps = {
    pageSize: 10
}

ReactDOM.render(<App  />, document.getElementById('root'))

组件的生命周期

  • 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等

  • 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程

  • 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数

  • 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。

  • 只有类组件才有生命周期

  • 生命周期的三个阶段

    • 1、每个阶段的执行时机

      • 1、创建时（挂载阶段）

        • 执行时机：组件创建时（页面加载时）

        • 执行顺序：constructor() -> render() -> compoentDidMount()

        • 示例：

          class App extends React.Component {
    constructor(props){
        super(props);
        console.warn('钩子函数 constructor');
        this.state = {
            count: 0
        }

    }

    render(){
        console.warn('钩子函数 render');

        // 错误演示 不要在render中调用setState方法
        // this.setState({
        //     count: 1
        // })

        return (
            <div id="title">
                render
            </div>
        )
    }

    componentDidMount(){
        console.warn('钩子函数 componentDidMount');
        const title = document.getElementById('title')
        console.log(title);
    }

}

ReactDOM.render(<App  />, document.getElementById('root'))

      • 2、更新时（更新阶段）

        • 执行时机：1、setState() 2、forceUpdate() 3、组件接收到新的props

        • 说明：以上三者任意一种变化，组件就会重新渲染

        • 示例：

          class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            count: 0
        }

    }
    onIncrement = () => {
        // this.setState({
        //     count: this.state.count + 1
        // })

        // 强制更新
        this.forceUpdate()
    }

    render(){
        console.warn('钩子函数 render');
        return (
            <div>
                <Child count={this.state.count}/>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }

}

class Child extends React.Component {

    render(){
        console.warn('子组件----钩子函数 render');
        return (
            <div>
                计数：{this.props.count}
            </div>
        )
    }

}


ReactDOM.render(<App  />, document.getElementById('root'))

        • 执行顺序：render() -> componentDidUpdate()

        • 示例：

          class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            count: 0
        }

    }
    onIncrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render(){
        console.warn('钩子函数 render');
        return (
            <div>
                <Child count={this.state.count}/>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }

}

class Child extends React.Component {

    render(){
        console.warn('子组件----钩子函数 render');
        return (
            <div id='child'>
                计数：{this.props.count}
            </div>
        )
    }

    // 注意：如果要调用setState()更新状态，必须要放在一个if条件中
    // 因为：如果直接调用setState()更新状态，也会导致递归
    componentDidUpdate(prevProps){
        console.log('更新前数据', prevProps, '更新后数据', this.props);
        console.warn('子组件----钩子函数 componentDidUpdate');
        
        // const child = document.getElementById('child')
        // console.log(child.innerHTML);

        // 错误示范
        // this.setState({})

        // 正确示范
        if(prevProps.count !== this.props.count){
            // 发送ajax请求
            this.setState({})
        }
    }

}


ReactDOM.render(<App  />, document.getElementById('root'))

      • 3、卸载时（卸载阶段）

        • 执行时机：组件从页面中消失

        • 示例：

          class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            count: 0
        }

    }
    onIncrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render(){
        console.warn('钩子函数 render');
        return (
            <div>
                {this.state.count >= 3 ? <p>到3la</p> : (<Child count={this.state.count}/>)}
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }

}

class Child extends React.Component {

    componentDidMount(){
        // 创建定时器
        this.timeId = setInterval(()=>{
            console.log('定时器正在运行');
        }, 500)
    }

    render(){
        console.warn('子组件----钩子函数 render');
        return (
            <div id='child'>
                计数：{this.props.count}
            </div>
        )
    }

    componentWillUnmount(){
        console.warn('子组件----钩子函数 componentWillUnmount');

        // 清洗计时器
        clearInterval(this.timeId)
    }


}


ReactDOM.render(<App  />, document.getElementById('root'))

    • 2、每个阶段钩子函数的执行顺序

    • 3、每个阶段钩子函数的作用

    • 不常用钩子函数介绍

      • 新版完成生命周期钩子函数

render-props和高阶组件

  • React组件复用概述

    • 思考：如果两个组件中的部分功能相似或相同，该如何处理？
    • 处理方式：复用相似的功能（联想函数封装）
    • 复用什么？ 1、state 2、操作state的方法（组件状态逻辑）
    • 两种方式：1、render props 2、高阶组件（HOC）
    • 注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）

  • render props模式

    • 思路分析：

      • 思路：将要复用的state和操作state的方法封装到一个组件中
      • 问题1：如何拿到该组件中复用的state？
      • 在使用组件时，添加一个值为函数的prop，通过函数参数来获取（需要组件内部实现）
      • 问题2：如何渲染任意的UI？
      • 使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

    • 使用步骤：

      • 1、创建Mouse组件，在组件中提供复用的状态逻辑代码（1、状态 2、操作状态的方法）

      • 2、将要复用的状态作为props.render(state)方法的参数，暴露到组件外部

      • 3、使用props.render()的返回值作为要渲染的内容

      • 示例：

        class Mouse extends React.Component {

    // 鼠标位置
    state = {
        x: 0,
        y: 0
    }

    // 鼠标移动事件的事件处理程序
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }

    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove', this.handleMouseMove)
    }

    render(){
        // return null
        return this.props.render(this.state)
    }

}


class App extends React.Component {

    render(){
        return (
            <div>
                render props 模式
                <Mouse render={(mouse) => (<p>鼠标的位置： x:{mouse.x}   y:{mouse.y}</p>)} />
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

    • 演示Mouse组件的复用

      • Mouse组件负责：封装复用的状态逻辑代码（1、状态 2、操作状态）

      • 状态：鼠标坐标（x, y）

      • 操作状态的方法：鼠标移动事件

      • 传入的render prop负责：使用复用的状态来渲染UI结构

      • 示例：

        import img from "./images/logo192.png"
class Mouse extends React.Component {

    // 鼠标位置
    state = {
        x: 0,
        y: 0
    }

    // 鼠标移动事件的事件处理程序
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }

    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove', this.handleMouseMove)
    }

    render(){
        // return null
        return this.props.render(this.state)
    }

}


class App extends React.Component {

    render(){
        return (
            <div>
                render props 模式
                <Mouse render={mouse => (<p>鼠标的位置： x:{mouse.x}   y:{mouse.y}</p>)} />

                <Mouse render={mouse => (<img src={img} alt="logo" style={{
                    position: 'absolute',
                    top: mouse.y - 96,
                    left: mouse.x - 96
                }}/>)} />
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))
这篇关于组件间通讯及钩子函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航