ljunb/react-native-iShiWuPai

你好,这块儿的写法没看懂,求大神赐教。。

Opened this issue · 2 comments

**const NetInfoDecorator = WrappedComponent => class extends Component {** constructor(props) { super(props) this.state = { isConnected: true, } }
是在函数中返回一个组件吗?把组件的名字作为参数?

ljunb commented

@fangzongwu 你好,这里是高阶组件的写法,类似于高阶函数。

JS中可以把函数作为参数,传入到另一个函数中,比如我们常用的通过map去渲染多个相同组件的时候,这里map就是这种应用(可以延伸学习函数式编程)。

高阶组件与此类似,就是可以传入一个组件,对该组件做一些自己的加工,然后返回加工后的组件。比如这个NetInfoDecorator,就是为传入的组件添加了网络状态的监听,并把网络连接标志位 isConnected作为props,传递到传入的组件去。

当然这里应用不一定准确,只是为了练习这种写法,什么时候要用高阶组件,还要看你实际情况。另外推荐《深入React技术栈》,这本书也是比较深入地讲解了这些内容的~