React 高阶组件（HOC）

官方文档：https://zh-hans.reactjs.org/docs/higher-order-components.html

组件是 React 中代码复用的基本单元。但有时会发现某些模式并不合适传统组件。

含义

HOC 是灵活使用 react 组件的一个技巧，本身不是一个组件，是一个参数为组件，返回值是一个组件的函数。
HOC 本身不是 react 中 API 的一部分，是 react 的组合特性而形成的设计模式。

作用

* 强化组件

高阶组件返回的组件，可以劫持上一层传过来的 props，然后混入新的 props，来增强组件的功能。

1.混入 props

通过承接上层的 props,在混入自己的 props，来强化组件

function classHOC(WrapComponent){return class  Idex extends React.Component{state={name:'gs'}componentDidMount(){console.log('HOC')}render(){return <WrapComponent{ ...this.props }{...this.state }/>}}
}
function Index(props){const { name,...otherProps } = propsuseEffect(()=>{console.log( 'index' )},[])return <div>my name is { name }</div>
}export default classHOC(Index)

hooks 版本应用

function functionHoc(WrapComponent){return function Index(props){const [ state , setState ] = useState({ name :'gs'  })return  <WrapComponent { ...props }  { ...state }   />}
}

2.state 控制更新

可以将 HOC 的 state 的配合起来，控制业务组件的更新。类似用于处理来自 react-redux 中 state 更改，带来的订阅更新的作用。

function classHOC(WrapComponent){return class  Idex extends React.Component{constructor(){super()this.state={name:'gs'}}const changeName=(name)=>{this.setState({ name })}render(){return<WrapComponent{ ...this.props }{ ...this.state }changeName={this.changeName}/>}}
}
function Index(props){const [ value ,setValue ] = useState(null)const { name ,changeName } = propsreturn <div><div>   hello,world , my name is { name }</div>改变name <input onChange={ (e)=> setValue(e.target.value)  }  /><button onClick={ ()=>  changeName(value) }  >确定</button></div>
}export default classHOC(Index)

* 复用逻辑

高阶组件可以对 react 组件进行加工处理。可以根据需求对原有的组件进行加工，可以定制专属的 HOC。
官网例子：
例如，假设有一个 CommentList 组件，它订阅外部数据源，用以渲染评论列表：

class CommentList extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);this.state = {// 假设 "DataSource" 是个全局范围内的数据源变量comments: DataSource.getComments()};}componentDidMount() {// 订阅更改DataSource.addChangeListener(this.handleChange);}componentWillUnmount() {// 清除订阅DataSource.removeChangeListener(this.handleChange);}handleChange() {// 当数据源更新时，更新组件状态this.setState({comments: DataSource.getComments()});}render() {return (<div>{this.state.comments.map((comment) => (<Comment comment={comment} key={comment.id} />))}</div>);}
}

编写了一个用于订阅单个博客帖子的组件，该帖子遵循类似的模式：

class BlogPost extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);this.state = {blogPost: DataSource.getBlogPost(props.id)};}componentDidMount() {DataSource.addChangeListener(this.handleChange);}componentWillUnmount() {DataSource.removeChangeListener(this.handleChange);}handleChange() {this.setState({blogPost: DataSource.getBlogPost(this.props.id)});}render() {return <TextBlock text={this.state.blogPost} />;}
}

CommentList 和 BlogPost 不同 - 它们在 DataSource 上调用不同的方法，且渲染不同的结果。但它们的大部分实现都是一样的： 1.在挂载时，向 DataSource 添加一个更改侦听器。 2.在侦听器内部，当数据源发生变化时，调用 setState。 3.在卸载时，删除侦听器。
所以调用函数 withSubscription 函数进行处理：

const CommentListWithSubscription = withSubscription(CommentList,(DataSource) => DataSource.getComments()
);const BlogPostWithSubscription = withSubscription(BlogPost,(DataSource, props) => DataSource.getBlogPost(props.id)
);

withSubscription 函数逻辑处理：

// 此函数接收一个组件...
function withSubscription(WrappedComponent, selectData) {// ...并返回另一个组件...return class extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);this.state = {data: selectData(DataSource, props)};}componentDidMount() {// ...负责订阅相关的操作...DataSource.addChangeListener(this.handleChange);}componentWillUnmount() {DataSource.removeChangeListener(this.handleChange);}handleChange() {this.setState({data: selectData(DataSource, this.props)});}render() {// ... 并使用新数据渲染被包装的组件!// 请注意，我们可能还会传递其他属性return <WrappedComponentdata={this.state.data}{...this.props}/>;}};
}

* 事件监控

HOC 还可以对原有组件进行监控。比如对一些事件监控，错误监控，事件监听等一系列操作。


function ClickHoc (Component){return  function Wrap(props){const dom = useRef(null)useEffect(()=>{const handleClick = () => console.log('发生点击事件')dom.current.addEventListener('click',handleClick)return () => dom.current.removeEventListener('click',handleClick)},[])return  <div ref={dom}  ><Component  {...props} /></div>}
}@ClickHoc
class Index extends React.Component{render(){return <div  className='index'  ><button>组件内部点击</button></div>}
}
export default ()=>{return <div className='box'  ><Index /><button>组件外部点击</button></div>
}

以上