JS每日一题: react 中的高阶组件理解?
Posted JS每日一题
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS每日一题: react 中的高阶组件理解?相关的知识，希望对你有一定的参考价值。
20190308期
react 中的高阶组件理解?
说在前面，高阶组件本身不是React API, 它只是一种思想，具体点来说高阶组件就是一个函数, 该函数接收一个组件作为参数，并近回一个新的组件
对比组件将props属性转变成UI，高阶组件则是将一个组件转换成另一个组件,简称HOC (Higher Order Component), 我们先来看一个最简实现
function HOC(WrappedComponent) {
return class Demo extends React.Component {
render() {
const newProps = {
user
}
return <WrappedComponent {...this.props} {...newProps}/>
}
}
}
上面的代码应用场景其实还是挺多的, 用户信息基本都是需要用在多个模块中的， 我们利用HOC将组件进行包裹一层，那么每个组件中都能访问到user这个属性
通过 Refs 访问到组件实例
refs中react中组件实例的句柄，我们可以通过refs来访问到实例的方法和实例本身
function HOC(WrappedComponent) {
return class Demo extends React.Component {
proc(ref) {
this.ref = ref;
}
render() {
const newProps = {
user
}
return <WrappedComponent {...this.props } ref = {::this.proc}/>
}
}
}
Ref 的回调函数会在 WrappedComponent 渲染时执行，我们拿到ref后可以用来读取/添加实例的 props ，调用实例的方法
提取 state
我们想在外层拿到被包裹组件的state也是很简单的
function HOC(WrappedComponent) {
return class Demo extends React.Component {
render() {
// 这样就轻松将被包裹组件的属性及方法提取至states对象
const newProps = {
states: {
user: this.state.user,
changeFn: this.changeFn
}
}
return <WrappedComponent {...this.props } {...newProps}/>
}
}
}
再来看一个经典的库react-redux中核心方法connect
语法: connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
作用: connect函数允许我们将 store 中的数据作为 props 绑定到组件上
怎么做到的呢？可以猜测一下，正是高阶组件的魔力
const ConnectedComment = connect(commentSelector, commentActions)(Comment)
// 上面这段代码看的可能有点不习惯，我们拆分成下面这种
// connect是一个返回函数的函数(高阶函数)
const enhance = connect(commentListSelector, commentListActions);
// 返回的函数就是一个高阶组件，该高阶组件返回一个组件被连接到Redux store
const ConnectedComment = enhance(CommentList);
总结
高阶组件属于函数式编程(functional programming)思想，对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。而Mixin这种混入的模式，会给组件不断增加新的方法和属性，组件本身不仅可以感知，甚至需要做相关的处理(例如命名冲突、状态维护)，一旦混入的模块变多时，整个组件就变的难以维护，也就是为什么如此多的React库都采用高阶组件的方式进行开发
最近答题
基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢
关注「JS每日一题」，参与答题！
以上是关于JS每日一题: react 中的高阶组件理解?的主要内容，如果未能解决你的问题，请参考以下文章
react.js 高阶组件----很简单的实例理解高阶组件思想
JS每日一题: react中类组件和函数式组件中有什么不同?