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