React高阶组件 和 Render Props

高阶组件

本质

本质是函数,将组件作为接收参数,返回一个新的组件。HOC本身不是React API,是一种基于React组合的特而形成的设计模式。

解决的问题(作用)

  • 一句话概括:功能的复用,减少代码冗余
  • 进一步解释:在实际情况中,多个组件可能会做某些相同的事情,有着相同的功能,存在大量的代码冗余。我们可以将这部分功能拆分出来,每个组件尽量只保留自己独有的作用,通过HOC生成我们最终需要的组件。

实现方法:

无论哪种方法,都是在HOC函数内定义新的组件,在新的组件内做一些公共的功能和事情

  1. 属性代理
  2. 反向继承

属性代理

这是最常规的写法,原理等同于ES7装饰器、Python装饰器。函数传入的参数,除了原组件,还可以定义其他的参数,通过这些参数来区别每个实际组件。比如,公共的功能是获取数据。获取数据这件事情是相同的,但获取的内容不同。如何决定最后生成的组件获取各自指定的内容呢?通过函数传参。

// 示例用localstorage代替如网络请求等的异步操作
localStorage.setItem("comment","asuiklfhs");  
localStorage.setItem("read","123");

class Comment extends React.Component {

   render() {
      return (
         <div>
            {this.props.data}
         </div>
      )
   }
}

class Read extends React.Component {

   render() {
      return (
         <div>
            {this.props.data}
         </div>
      )
   }
}

const HOCTest = (key) => {
   return (WrappedComponent) => {
      return class NewComponent extends React.Component{

         constructor(props) {
            super(props);
            this.state = {
               data: ''
            };
         }

         componentDidMount() {
            const data = localStorage.getItem(key);
            this.setState({
               data
            });
         }

         render() {
            console.log(this.myRef);
            return (
               <div ref={(e)=>{this.myRef = e;}}>
                  <WrappedComponent {...this.props} data={this.state.data} />
               </div>
            );
         }
      }
   }
};

const CommentNew = HOCTest("comment")(Comment);  // HOC生成新组件
const ReadNew = HOCTest("read")(Read);

class Root extends React.Component {
   render() {
      return (
         <div className="App">
            Hello World
            <CommentNew/>
            <ReadNew/>
         </div>
      );
   }
}

在这里,React第三方的组件库通常使用 函数柯里化 的写法。对于使用者来说,改变了调用函数时的传参方式,更加容易理解。即:原本调用函数wrapper(Component, params1, params2)  柯里化后调用wrapper(params1,params2)(Component)

属性代理常见的作用:

  1. 操作props
  2. 通过Refs访问组件实例
  3. 提取state
  4. 组合更多的html元素

反向继承

顾名思义,就是将返回的组件继承了原组件。它允许生成的组件通过this获取原组件,意味着可以获取到state,props,生命周期钩子,以及render

localStorage.setItem("comment","asuiklfhs");
localStorage.setItem("read","123");

class Comment extends React.Component {
   constructor(props){
      super(props);
      this.state = {id:"comment"}
   }

   componentDidMount() {
      console.log("Comment DidMount");
   }

   render() {
      return (
         <div>
            {this.props.data}
         </div>
      )
   }
}

class Read extends React.Component {
   constructor(props){
      super(props);
      this.state = {id:"read"}
   }

   render() {
      return (
         <div>
            {this.props.data}
         </div>
      )
   }
}

const HOCTest = (key) => {
   return (WrappedComponent) => {
      return class NewComponent extends WrappedComponent{

         componentDidMount() {
            console.log("HOC DidMount");
            const data = localStorage.getItem(key);
            this.setState({
               ...this.state,
               data
            });
         }

         render() {
            return (
               <WrappedComponent data={this.state.data}/>
            );
         }
      }
   }
};

const CommentNew = HOCTest("comment")(Comment);
const ReadNew = HOCTest("read")(Read);

class Root extends React.Component {

   render() {
      return (
         <div className="App">
            Hello World
            <CommentNew/>
            <ReadNew/>
         </div>
      );
   }
}

作用:

  1. 渲染劫持。由于新组件可以控制原组件的render方法,可以做各种控制渲染的操作。
  2. 操作state

注意点:

  1. 不要在函数内修改原组件
  2. 使用反向继承方式时,会丢失原本的显示名
  3. 不要在render函数中使用HOC

高阶组件的缺点:

  1. 难以溯源。如果原始组件A通过好几个HOC的构造,最终生成了组件B,不知道哪个属性来自于哪个HOC,需要翻看每个HOC才知道各自做了什么事情,使用了什么属性。
  2. props属性名的冲突。某个属性可能被多个HOC重复使用。
  3. 静态构建。新的组件是在页面构建之前生成,先有组件,后生成页面。

Render Props 

作用

  1. 功能的复用,与HOC类似。
  2. 组件间数据的单向传递。

什么是Render Props?

是一个用于告知组件要渲染什么内容的函数属性。该函数返回一个组件,是渲染出来的内容。

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <p>位置:x:{ mouse.x } y: { mouse.y }</p>
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>移动鼠标!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

通过以上Demo可以看到,Mouse组件通过render属性(属性名也可以是别的名字),指定了渲染哪个子组件,并且子组件可以接收参数值,进而实现内部逻辑。

再进行分析,发现Mouse组件提供可变数据源,是一个基础数据的提供者,最关键的代码是:

{this.props.render(this.state)}

通过render属性,将数据传递给另外一个组件。至于这个数据拿来干什么,怎么去渲染,就不是它管的事情了。

因此,整个页面很多地方可能需要用到鼠标坐标数据,以上的例子就可以实现功能的复用。

相对高阶组件的优点:

  1. 不用担心props的命名冲突的问题
  2. 可以溯源,子组件的props一定来自父组件。
  3. 是动态构建的,页面在渲染后,可以动态地决定渲染哪个组件。
  4. 所有能用HOC完成的事情,Render Props都可以做,且更加灵活。
  5. 除了功能复用,还可以用作两个组件的单向数据传递。

 

posted @ 2019-09-02 21:02  学霸初养成  阅读(932)  评论(0编辑  收藏