React - React 组件进阶

2023-11-22 16:47:16

组件通讯介绍

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

组件的props

基本使用

组件是封闭的，要接受外部数据应该通过props来实现
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性

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

特点

可以给组件传递任意类型的数据
props是只读属性，不能对值进行修改
注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props，其他的地方是可以拿到的

组件通讯的三种方式

父组件传递数据给子组件

父组件提供要传递的state数据
给子组件标签添加属性，值为state中的数据
子组件中通过props接收父组件中传递的数据

子组件传递数据给父组件

利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
父组件提供一个回调函数，用来接收数据
将该函数作为属性的值，传递给子组件

子组件通过props调用回调函数

兄弟组件传递

将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
这个称为状态提升
公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
要通讯的子组件只需要通过props接收状态或操作状态的方法

定义布局结构，一个Counter里面包含两个子组件，一个是计数器的提示，一个是按钮

class Counter extends React.Component {
    render() {
        return (<div>
            <Child1 />
            <Child2 />
        </div>
        )
    }
}
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：</h1>
        )
    }
}
class Child2 extends React.Component {
    render() {
        return (
            <button>+1</button>
        )
    }
}

在父组件里定义共享状态，把这个状态传递给第一个子组件

class Counter extends React.Component {
    // 提供共享的状态
    state = {
        count: 0
    }
    render() {
        return (<div>
            {/* 把状态提供给第一个子组件 */}
            <Child1 count={this.state.count}/>
            <Child2 />
        </div>
        )
    }
}

在第一个子组件里面就能通过props获取到

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

在父组件中提供共享方法，通过属性传递给第二个子组件，方便第二个子组件来进行调用

    // 提供共享方法
    onIncrement = (res) => {
        // 只要第二个子组件调用了这个函数，就会执行里面代码
        this.setState({
            count: this.state.count + res
        })
    }
    render() {
        return (<div>
            ...
            {/* 把共享方法提供给第二个子组件 */}
            <Child2 onIncrement={this.onIncrement} />
        </div>
        )
    }

在第二个子组件里面通过props来获取到对应函数，然后进行调用

class Child2 extends React.Component {
    handleClick = () => {
        // 这里一旦调用，就会执行父组件里面 onIncrement函数
        this.props.onIncrement(2)
    }
    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}

Context

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递

作用： 跨组件传递数据

使用步骤

调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件

使用 Provider 组件作为父节点

设置 value 属性，表示要传递的数据

哪一层想要接收数据，就用 Consumer 进行包裹，在里面回调函数中的参数就是传递过来的值

如果两个组件相隔层级比较多，可以使用 Context 实现组件通讯
Context提供了两个组件：Provider 和 Consumer
Provider 组件：用来提供数据
Consumer 组件：用来消费数据

props进阶

children属性

children属性：表示组件标签的子节点，当组件标签有子节点时，props就会有该属性
children属性与普通的props一样，值可以使任意值（文本、react元素、组件、甚至是函数）

props校验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
如果传入的数据不对，可能会导致报错
关键问题：组件的使用者不知道需要传递什么样的数据
props校验：允许在创建组件的时候，指定props的类型、格式等

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

使用步骤

安装包 prop-types (yarn add prop-types | npm i props-types)
导入prop-types 包
使用组件名.propTypes={} 来给组件的props添加校验规则
校验规则通过 PropTypes 对象来指定

常见的约束规则

创建的类型： array、bool、func、number、object、string
React元素类型：element
必填项：isRequired
特定结构的对象： shape({})
更多的约束规则

props的默认值

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

组件生命周期

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等
组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
构造函数的作用：为开发人员在不同阶段操作组件提供了实际
只有类组件才有生命周期

生命周期阶段

创建时（挂载阶段）

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

更新时

执行时机：setState()、 forceUpdate()、组件接收到新的props
说明：以上三者任意一种变化，组件就会重新渲染
执行顺序：
·

卸载时

执行时机：组件从页面中消失
作用：用来做清理操作

新版完整生命会走棋钩子函数

`getDerivedStateFromProps()`

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
不管原因是什么，都会在每次渲染前触发此方法

`shouldComponentUpdate()`

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true

`getSnapshotBeforeUpdate()`

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等

render-props模式

React组件复用概述

思考：如果两个组件中的部分功能相似或相同，该如何处理？
处理方式：复用相似的功能
复用什么？
- state
- 操作state的方法
两种方式：
- render props模式
- 高阶组件（HOC）
注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式
思路：将要复用的state和操作state的方法封装到一个组件中

思路

拿到该组件中复用的state
- 在使用组件时，添加一个值为函数的prop，通过函数参数来获取

渲染到任意的UI
- 使用该函数的返回值作为要渲染的UI内容

使用步骤

创建Mouse组件，在组件中提供复用的状态逻辑代码(1. 状态 2. 操作状态的方法)
将要复用的状态作为 props.render(state)方法的参数，暴露到组件外部
使用props.render() 的返回值作为要渲染的内容

class Mouse extends React.Component {
    // 鼠标位置状态
    state = {
        x: 0,
        y: 0
    }

    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }
    render(){
        // 向外界提供当前子组件里面的数据
        return this.props.render(this.state)
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                App
                <Mouse render={mouse => {
                    return <p>X{mouse.x}Y{mouse.y}</p>
                }}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

children代替render属性

注意：并不是该模式叫 render props就必须使用名为render的prop，实际上可以使用任意名称的prop
把prop是一个函数并且告诉组件要渲染什么内容的技术叫做： render props模式
推荐：使用childre代替render属性

优化代码

推荐给render props模式添加props校验

应该在组件卸载时解除 mousemove 事件绑定

高阶组件

目的：实现状态逻辑复用
采用 包装模式

思路分析

高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件

高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

使用步骤

创建一个函数，名称约定以with开头
指定函数参数，参数应该以大写字母开头
在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

包装函数

// 定义一个函数，在函数内部创建一个相应类组件
function withMouse(WrappedComponent) {
    // 该组件提供复用状态逻辑
    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)
        }
        // 当组件移除时候解绑事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }
        render() {
            // 在render函数里面返回传递过来的组件，把当前组件的状态设置进去
            return <WrappedComponent {...this.state} />
        }
    }
    return Mouse
}

哪个组件需要加强，通过调用withMouse这个函数，然后把返回的值设置到父组件中即可

function Position(props) {
    return (
        <p>
            X:{props.x}
            Y:{props.y}
        </p>
    )
}
// 把position 组件来进行包装
let MousePosition = withMouse(Position)

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                高阶组件
                <MousePosition></MousePosition>
            </div>
        )
    }
}

设置`displayName`

使用高阶组件存在的问题：得到两个组件的名称相同
原因：默认情况下，React使用组件名称作为displayName
解决方式：为高阶组件设置displayName，便于调试时区分不同的组件
displayName的作用：用于设置调试信息(React Developer Tools信息)
设置方式：

传递props

问题：如果没有传递props，会导致props丢失问题
解决方式：渲染WrappedComponent时，将state和props一起传递给组件

组件通讯是构建React应用必不可少的一环
props的灵活性让组件更加强大
状态提升是React组件的常用模式
组件生命周期有助于理解组件的运行过程
钩子函数让开发者可以在特定的时机执行某些功能
render props 模式和高阶组件都可以实现组件状态逻辑的复用
组件极简模型： (state,props) => UI

码农公寓

组件通讯介绍

组件的props

基本使用

特点

组件通讯的三种方式

父组件传递数据给子组件

子组件传递数据给父组件

兄弟组件传递

Context

props进阶

children属性

props校验

常见的约束规则

props的默认值

组件生命周期

生命周期阶段

创建时（挂载阶段）

更新时

卸载时

getDerivedStateFromProps()

shouldComponentUpdate()

getSnapshotBeforeUpdate()

render-props模式

React组件复用概述

思路

使用步骤

children代替render属性

优化代码

高阶组件

思路分析

使用步骤

设置displayName

传递props

相关文章

`getDerivedStateFromProps()`

`shouldComponentUpdate()`

`getSnapshotBeforeUpdate()`

设置`displayName`