浅谈 react高阶组件-参数-高阶函数

2022-05-17 194

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1.不废话,书接上文react-高阶组件初识,只讲了个开头2.接下来继续

1. 前言

1.不废话,书接上文react-高阶组件初识,只讲了个开头

2.接下来继续

2.参数

react-高阶组件初识中,高阶组件的参数只是一个组件,但是其实高阶组件的参数还可以接收其他参数,比如根据传递的参数来获取 storage的数据

2.1 高阶组件代码

function withUserData(WrappedComponent,key) {
            return class extends React.Component {
                constructor(props){
                    super(props)
                    this.state= { userInfo:{} }
                }
                componentDidMount() {
                    //key传递过来的
                    let userInfo = JSON.parse(localStorage.getItem(key))
                    this.setState({ userInfo })
                }
                render() {
                    // ...this.props 传递给当前组件的属性继续向下传递
                    return <WrappedComponent userInfo={this.state.userInfo} {...this.props} />
                }
            }
        }

1.其实没有额外变化只是根据 key来获取值

2.这里面为什么以 with开头,其实是受react-router里面的 withRouter的影响

2.2 包裹组件也没变化

class UserView2 extends React.Component {
            render() {
                let { userInfo } = this.props
                return (
                    <div>
                        <h1>{userInfo.name}</h1>
                        <p>{userInfo.description}</p>
                    </div>
                )
            }
        }

2.3 联合高阶组件的使用

const UserHOC = withUserData(UserView2,"userInfo")
        let App = () => {
            return (
                <div>
                    <h1>App</h1>
                    <UserHOC />
                </div>
            )
        }

就是多加个参数而已

3. 高阶函数

3.1 基本概念

1.高阶函数,返回值是一个高阶组件,所以也可以看成是高阶组件的变种形式

3.2 整改

既然返回值是高阶组件那就好说了

const withUserData = (key)=>(WrappedComponent)=> {
            return class extends React.Component {
                constructor(props){
                    super(props)
                    this.state= { userInfo:{} }
                }
                componentDidMount() {
                    //key传递过来的
                    let userInfo = JSON.parse(localStorage.getItem(key))
                    this.setState({ userInfo })
                }
                render() {
                    // ...this.props 传递给当前组件的属性继续向下传递
                    return <WrappedComponent userInfo={this.state.userInfo} {...this.props} />
                }
            }
        }

3.3 分析

1.高阶组件作为返回值就行

2.上面的写法和下面的写法等价,箭头函数的基础

const withUserData2 = (key)=>(WrappedComponent)=>  class extends React.Component {}

3.4 WrappedComponent

WrappedComponent 这个包裹组件没有变化

3.5 联合使用

const UserHOC = withUserData("userInfo")(UserView2)
        let App = () => {
            return (
                <div>
                    <h1>App</h1>
                    <UserHOC />
                </div>
            )
        }

1.这种写法在 react-redux里面见到的比较多

export default connect(mapStateToProps, mapDispatchToProps)

2.类似这种,其实很多第三方库都有,只是之前可能不太了解高阶组件,高阶函数给忽略掉了