一、高阶函数

概念：高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回

  • 举个栗子:
    • 接收函数作为参数 ```javascript function a(x) { x(); } function b() { alert(‘hello’); }

a(b);

  2.    - 将函数作为输出返回
  3. ```javascript
  4. function a() {
  5.   function b() {
  6.     alert('hello');
  7.   }
  8.   return b;
  9. }
  11. a()();
  • 以上函数a就是一个高阶函数, 用法非常简单, 那么实际开发中又有哪些是高阶函数呢？
    • Array 的 map 、reduce 、filter 等方法
    • Object 的 keys 、values 等方法


二、高阶组件

概念：**高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件**

  • 举个栗子： ```javascript import React from ‘react’; import logo from ‘./logo.svg’; import ‘./App.css’;

class MyComponent extends React.Component{ render(){ return (

Hello React

) } } function HocComponent(WrappedComponent){ return class extends React.Component{ render(){ return } } }

const NewComponent = HocComponent(MyComponent)

function App() { return ( ); }

export default App;

  1. Tip：HocComponent函数就是一个高阶组件。
  3. <a name="wOL05"></a>
  4. ### 2-1 高阶组件的实现方式-->属性代理
  5. 属性代理的作用：
  7. - 更改prop<br />
  8. - 通过refs获取组件实例<br />
  9. - 抽象state<br />
  10. - 把WrappedComponent与其他elements包装在一起
  11. <a name="FTHLb"></a>
  12. #### 2-1-1 属性代理-更改props
  13. 在高阶组件中添加新的 props，可以在 WrappedComponent 中通过 this.props.name访问到。
  14. ```javascript
  15. import React from 'react';
  16. import logo from './logo.svg';
  17. import './App.css';
  19. class MyComponent extends React.Component{
  20.   render(){
  21.   return (<p>Hello React {this.props.name}</p>)
  22.   }
  23. }
  24. function HocComponent(WrappedComponent){
  25.   return class extends React.Component{
  26.     render(){
  27.       return <WrappedComponent {...this.props}/>
  28.     }
  29.   }
  30. }
  32. const NewComponent = HocComponent(MyComponent)
  34. function App() {
  35.   return (
  36.     <NewComponent name="zhangsan"></NewComponent>
  37.   );
  38. }
  40. export default App;

2-1-2 属性代理-通过refs获取组件实例

可以通过引用（ref）访问到 this （WrappedComponent 的实例），但为了得到引用，WrappedComponent 还需要一个初始渲染，意味着你需要在 HOC 的 render 方法中返回 WrappedComponent 元素，让 React 开始它的一致化处理，你就可以得到 WrappedComponent 的实例的引用。

  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  5. class MyComponent extends React.Component {
  6.   say(){
  7.     console.log("say say say .....")
  8.   }
  9.   render() {
  10.     return (<p>Hello React {this.props.name}</p>)
  11.   }
  12. }
  13. function HocComponent(WrappedComponent) {
  14.   return class extends React.Component {
  15.     //此处的instance会拿到被包装的组件实例，然后访问被包装的组件对象的属性和方法
  16.     proc(instance) {
  17.       instance.say();
  18.       console.log(instance.props.name)
  19.     }
  20.     render() {
  21.       return <WrappedComponent {...this.props} ref={this.proc} />
  22.     }
  23.   }
  24. }
  26. const NewComponent = HocComponent(MyComponent)
  28. function App() {
  29.   return (
  30.     <NewComponent name="zhangsan"></NewComponent>
  31.   );
  32. }
  34. export default App;

2-1-3 属性代理-抽取state

  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  5. class MyInput extends React.Component {
  6.   constructor(props){
  7.     super(props);
  8.     this.state = {
  9.       value:""
  10.     }
  11.     this.handleChange = this.handleChange.bind(this)
  12.   }
  13.   handleChange(event){
  14.     this.setState({
  15.       value:event.target.value
  16.     })
  17.   }
  18.   render() {
  19.     return (<input value={this.state.value} onChange={this.handleChange}></input>)
  20.   }
  21. }
  22. class MyTextArea extends React.Component {
  23.   constructor(props){
  24.     super(props);
  25.     this.state = {
  26.       value:""
  27.     }
  28.     this.handleChange = this.handleChange.bind(this)
  29.   }
  30.   handleChange(event){
  31.     this.setState({
  32.       value:event.target.value
  33.     })
  34.   }
  35.   render() {
  36.     return (<textarea value={this.state.value} onChange={this.handleChange}></textarea>)
  37.   }
  38. }
  40. function HocComponent(WrappedComponent) {
  41.   return class extends React.Component {
  42.     render() {
  43.       return <WrappedComponent/>
  44.     }
  45.   }
  46. }
  48. const NewInput = HocComponent(MyInput)
  49. const NewTextArea = HocComponent(MyTextArea)
  51. function App() {
  52.   return (
  53.     <div>
  54.       <NewInput></NewInput>
  55.       <NewTextArea></NewTextArea>
  56.     </div>
  57.   );
  58. }
  60. export default App;
  62. //这边代码存在的问题：MyInput和MyTextArea组件都有自己的state和change方法，代码重用性太大
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  5. class MyInput extends React.Component {
  6.   render() {
  7.     return (<input value={this.props.value} onChange={this.props.onChange}></input>)
  8.   }
  9. }
  10. class MyTextArea extends React.Component {
  11.   render() {
  12.     return (<textarea value={this.props.value} onChange={this.props.onChange}></textarea>)
  13.   }
  14. }
  16. function HocComponent(WrappedComponent) {
  17.   return class extends React.Component {
  18.     //将所有被包含组件的state和change都抽取到高阶组件中
  19.     constructor(props) {
  20.       super(props);
  21.       this.state = {
  22.         value: ""
  23.       }
  24.       this.handleChange = this.handleChange.bind(this)
  25.     }
  26.     handleChange(event) {
  27.       this.setState({
  28.         value: event.target.value
  29.       })
  30.     }
  31.     render() {
  32.       const newProps = {
  33.         value: this.state.value,
  34.         onChange: this.handleChange
  35.       }
  36.       return (
  37.         //向被包含组件传递属性
  38.         <WrappedComponent {...this.props} {...newProps} />
  39.       )
  40.     }
  41.   }
  42. }
  44. const NewInput = HocComponent(MyInput)
  45. const NewTextArea = HocComponent(MyTextArea)
  47. function App() {
  48.   return (
  49.     <div>
  50.       <NewInput></NewInput>
  51.       <NewTextArea></NewTextArea>
  52.     </div>
  53.   );
  54. }
  56. export default App;

2-1-4 属性代理-用其他元素包装组件

为了封装样式、布局或别的目的，可以用其它组件和元素包裹 WrappedComponent。基本方法是使用父组件实现，但通过 HOC 可以得到更多灵活性。

  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  5. class MyComponent extends React.Component {
  6.   render() {
  7.     return (<p>被包裹组件</p>)
  8.   }
  9. }
  11. function HocComponent(WrappedComponent) {
  12.   return class extends React.Component {
  13.     render() {
  14.       return (
  15.         <div style={{color:"red"}}>
  16.           <WrappedComponent {...this.props} />
  17.         </div>
  19.       )
  20.     }
  21.   }
  22. }
  24. const NewComponent = HocComponent(MyComponent)
  26. function App() {
  27.   return (
  28.     <div>
  29.       <NewComponent></NewComponent>
  30.     </div>
  31.   );
  32. }
  34. export default App;

2-2 高阶组件的实现方式-反向继承

反向继承的作用：

  • 渲染劫持
  • 操作state
    1. function iiHOC(WrappedComponent) {
    2. return class Enhancer extends WrappedComponent {
    3.   render() {
    4.     return super.render()
    5.   }
    6. }
    7. }
    返回的 HOC 类（Enhancer）继承了 WrappedComponent。之所以被称为 Inheritance Inversion 是因为 WrappedComponent 被 Enhancer 继承了，而不是 WrappedComponent 继承了 Enhancer。在这种方式中，它们的关系看上去被反转（inverse）了。

2-2-1 反向继承-渲染劫持

之所以被称为渲染劫持是因为 HOC 控制着 WrappedComponent 的渲染输出，可以用它做各种各样的事。通过渲染劫持可以：

  1. 在由 render输出的任何 React 元素中读取、添加、编辑、删除 props
  2. 读取和修改由 render 输出的 React 元素树
  3. 有条件地渲染元素树
  4. 把样式包裹进元素树（就像在 Props Proxy 中的那样）
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  5. class MyComponent extends React.Component {
  6.   render() {
  7.     return (<p name="pp">被包裹组件</p>)
  8.   }
  9. }
  11. function iiHOC(WrappedComponent) {
  12.   return class Enhancer extends WrappedComponent {
  13.     render() {
  14.       const elementsTree = super.render();
  15.       //打印父组件的属性值
  16.       console.log(elementsTree.props)
  17.       //添加新的 属性返回
  18.       let newProps = {style:{color:'red'}};
  19.       const props = Object.assign({},elementsTree.props,newProps);
  20.       const newElement = React.cloneElement(elementsTree, props, elementsTree.props.children)
  21.       return newElement;
  22.     }
  23.   }
  24. }
  26. const NewComponent = iiHOC(MyComponent)
  28. function App() {
  29.   return (
  30.     <div>
  31.       <NewComponent></NewComponent>
  32.     </div>
  33.   );
  34. }
  36. export default App;

2-2-2 反向继承-修改state

HOC 可以读取、编辑和删除 WrappedComponent 实例的 state，如果需要，也可以给它添加更多的 state。但是这会搞乱 WrappedComponent 的 state，可能会导致破坏某些东西，通常不建议使用高阶组件修改添加state。

  1. 通过访问 WrappedComponent 的 props 和 state 来做调试。
  2. 这里 HOC 用其他元素包裹着 WrappedComponent，还输出了 WrappedComponent 实例的 props 和 state。
  4. export function IIHOCDEBUGGER(WrappedComponent) {
  5.   return class II extends WrappedComponent {
  6.     render() {
  7.       return (
  8.         <div>
  9.           <h2>HOC Debugger Component</h2>
  10.           <p>Props</p> <pre>{JSON.stringify(this.props, null, 2)}</pre>
  11.           <p>State</p><pre>{JSON.stringify(this.state, null, 2)}</pre>
  12.           {super.render()}
  13.         </div>
  14.       )
  15.     }
  16.   }
  17. }